/* ============================================================
   South Mint — Color + Type Foundations
   Single source of truth for tokens used across UI kits, slides,
   and prototypes. Pulled from the South Mint Brand Style Guide.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Body: Inter (self-hosted TTFs supplied by the brand team)
   Display: Bebas Neue (self-hosted) — used as the brand display.
   Script accent: Caveat (Google Fonts) — stand-in for the
   "Freshly Minted" hand-script SVG asset.
   --------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap");

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_18pt-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors (verbatim from style guide) ---------- */
  --color-hunter:       #004638;  /* primary — Hunter green */
  --color-lime:         #B6FCBE;  /* primary accent — fresh */
  --color-honey:        #F0AB4A;  /* secondary accent — logo gold */
  --color-lavender:     #F0BEFB;  /* soft pastel */
  --color-periwinkle:   #96A8FE;  /* digital accent */
  --color-plum:         #6C2D58;  /* deep accent */
  --color-orange:       #F35C27;  /* high-energy */
  --color-white:        #FFFFFF;
  --color-black:        #0A0A0A;

  /* Tints (computed; useful for surfaces over Hunter) */
  --color-hunter-95:    #0A4F40;
  --color-hunter-90:    #135C4D;
  --color-hunter-80:    #1F6B5C;
  --color-cream:        #F6F2E8;  /* warm paper, derived from Honey */

  /* ---------- Semantic — light surfaces ---------- */
  --bg:                 var(--color-white);
  --bg-subtle:          var(--color-cream);
  --surface:            var(--color-white);
  --fg-1:               var(--color-hunter);   /* primary ink */
  --fg-2:               #36544C;               /* secondary ink */
  --fg-3:               #6F8780;               /* tertiary / labels */
  --border:             #D9E0DD;
  --border-strong:      var(--color-hunter);
  --accent:             var(--color-honey);
  --accent-ink:         var(--color-hunter);
  --link:               var(--color-hunter);

  /* ---------- Semantic — dark (Hunter) surfaces ---------- */
  --bg-dark:            var(--color-hunter);
  --surface-dark:       var(--color-hunter-90);
  --fg-1-on-dark:       var(--color-white);
  --fg-2-on-dark:       #C8D9D2;
  --fg-3-on-dark:       #8FAAA1;
  --border-on-dark:     rgba(255,255,255,0.14);

  /* ---------- Status (use sparingly; brand prefers numbers) ---------- */
  --status-positive:    var(--color-lime);
  --status-warn:        var(--color-honey);
  --status-alert:       var(--color-orange);

  /* ---------- Type families ---------- */
  --font-display:       "Bebas Neue", "Tosh A", "tosh-a", ui-sans-serif, system-ui, sans-serif;
  --font-body:          "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-script:        "Caveat", "Snell Roundhand", cursive; /* stand-in for "Freshly Minted" script */
  --font-mono:          ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.875rem;   /* 14 */
  --text-base:  1rem;       /* 16 */
  --text-lg:    1.125rem;   /* 18 */
  --text-xl:    1.25rem;    /* 20 */
  --text-2xl:   1.5rem;     /* 24 */
  --text-3xl:   1.875rem;   /* 30 */
  --text-4xl:   2.25rem;    /* 36 */
  --text-5xl:   3rem;       /* 48 */
  --text-6xl:   3.75rem;    /* 60 */
  --text-7xl:   4.5rem;     /* 72 */
  --text-8xl:   6rem;       /* 96 */

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Radii (brand prefers softly rounded) ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 2px rgba(0,70,56,0.08);
  --shadow-md:  0 6px 18px rgba(0,70,56,0.10);
  --shadow-lg:  0 24px 48px -16px rgba(0,70,56,0.22);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border);

  /* ---------- Layout ---------- */
  --container:  1280px;
  --gutter:     24px;
  --margin:     80px;
}

/* ---------- Base type roles ---------- */
.sm-display, h1.sm, .sm-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.92;
  color: var(--fg-1);
  text-transform: uppercase;
}
.sm-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.98;
  font-size: var(--text-4xl);
  color: var(--fg-1);
  text-transform: uppercase;
}
.sm-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.05;
  font-size: var(--text-2xl);
  color: var(--fg-1);
  text-transform: uppercase;
}
.sm-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: var(--text-lg);
  color: var(--fg-1);
}
.sm-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sm-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg-2);
}
.sm-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-2);
}
.sm-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.sm-script {
  font-family: var(--font-script);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sm-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-feature-settings: "tnum" 1, "lnum" 1;
}