/* =====================================================================
   Evergreen Media — Design System Tokens
   ---------------------------------------------------------------------
   Typography-led, restrained, trustworthy. "Deep Forest" is the hero
   neutral for depth and focus; "EGM Green" is the single accent.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Source Sans 3 is the open-source successor to Source Sans Pro — the
   brief called out "Source Sans Pro" but supplied Source Sans 3 files;
   these are metric-compatible, so we alias the family name. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-700-italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* Deep Forest — primary brand neutral / background */
  --deep-forest-100: #112a28;
  --deep-forest-80:  #415553;
  --deep-forest-60:  #707f7e;
  --deep-forest-40:  #a0aaa9;
  --deep-forest-20:  #cfd4d4;

  /* EGM Green — single accent for CTAs / UI / brand dot */
  --egm-green-100: #8aa14a;
  --egm-green-80:  #a2b46e;
  --egm-green-60:  #bac692;
  --egm-green-40:  #d0d9b7;
  --egm-green-20:  #e8ecdc;

  /* Greyscale — functional/structural */
  --white:         #ffffff;
  --off-white:     #f6f7fb;
  --grey-borders:  #99b2c6;
  --grey-bodytext: #4b5563;
  --grey-primary:  #101010;

  /* Accent palettes — data-viz / multi-category. Use sparingly. */
  --moss-100: #4c6639; --moss-80: #708561; --moss-60: #94a288; --moss-40: #b7c2b1; --moss-20: #dbe0d7;
  --dusty-100:#497692; --dusty-80:#6c91a8; --dusty-60:#92adbe; --dusty-40:#b6c8d3; --dusty-20:#dae4e9;
  --butter-100:#f2bf4a;--butter-80:#f5cb6e;--butter-60:#f7d992;--butter-40:#f9e5b7;--butter-20:#fcf2db;
  --auburn-100:#8b2524;--auburn-80:#a35150;--auburn-60:#b97c7c;--auburn-40:#d2a8a7;--auburn-20:#e7d3d3;

  /* ============================================================
     SEMANTIC TOKENS (use these in components, not raw palette)
     ============================================================ */

  /* Surface */
  --bg:           var(--white);
  --bg-muted:     var(--off-white);
  --bg-inverse:   var(--deep-forest-100);  /* hero / footer / full-bleed */
  --bg-accent:    var(--egm-green-20);     /* subtle highlight blocks */

  /* Foreground */
  --fg:           var(--grey-primary);          /* headlines */
  --fg-muted:     var(--grey-bodytext);         /* body copy */
  --fg-subtle:    var(--deep-forest-60);        /* captions, meta */
  --fg-inverse:   var(--white);                 /* on inverse bg */
  --fg-inverse-muted: var(--deep-forest-20);    /* on inverse bg, secondary */
  --fg-accent:    var(--egm-green-100);         /* brand dot, link hover */

  /* Borders + lines */
  --border:        #e5e7eb;                     /* hairlines */
  --border-strong: var(--grey-borders);
  --border-inverse: var(--deep-forest-80);

  /* Interactive */
  --cta:           var(--egm-green-100);
  --cta-hover:     #7d9342;                     /* -6% on EGM green */
  --cta-press:     #6f8539;
  --cta-fg:        var(--white);
  --focus-ring:    var(--egm-green-100);

  /* Status (derived from accent palette — use only for semantic signaling) */
  --success: var(--moss-100);
  --info:    var(--dusty-100);
  --warning: var(--butter-100);
  --danger:  var(--auburn-100);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --font-fallback: Arial, sans-serif;

  /* Type scale — restrained, typography-led.
     Base 17px reads well for long-form body text on white. */
  --fs-display:  clamp(3rem, 5.5vw, 4.5rem);     /* @kind font */ /* 48–72px */
  --fs-h1:       clamp(2.25rem, 3.8vw, 3.25rem); /* @kind font */ /* 36–52px */
  --fs-h2:       clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */ /* 28–36px */
  --fs-h3:       1.5rem;                         /* 24 */
  --fs-h4:       1.25rem;                        /* 20 */
  --fs-body-lg:  1.125rem;                       /* 18 */
  --fs-body:     1.0625rem;                      /* 17 */
  --fs-body-sm:  0.9375rem;                      /* 15 */
  --fs-caption:  0.8125rem;                      /* 13 — uppercase eyebrows */

  --lh-tight:  1.1;   /* @kind font */
  --lh-snug:   1.25;  /* @kind font */
  --lh-normal: 1.45;  /* @kind font */
  --lh-relaxed:1.6;   /* @kind font */

  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-eyebrow:   0.12em;  /* uppercase small caps labels */

  /* ============================================================
     SPACING (4px base, doubles at the top end)
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ============================================================
     RADII — restrained. Brand favors small radii or none at all.
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;     /* cards */
  --radius-pill: 999px;   /* pills / tags only */

  /* ============================================================
     SHADOWS — subtle. No "floating card" drama.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(17, 42, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(17, 42, 40, 0.06), 0 1px 2px rgba(17,42,40,.04);
  --shadow-md: 0 10px 24px rgba(17, 42, 40, 0.08), 0 2px 6px rgba(17,42,40,.05);
  --shadow-lg: 0 24px 48px rgba(17, 42, 40, 0.12);

  /* ============================================================
     MOTION — fast, restrained. No bounces.
     ============================================================ */
  --ease-standard: cubic-bezier(.2, .0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, .2, 1);  /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  200ms; /* @kind other */
  --dur-slow:  320ms; /* @kind other */

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
}

/* =====================================================================
   SEMANTIC DEFAULTS — use these as base styles in any document
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0; }

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-accent);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

.lede {
  font-size: var(--fs-body-lg);
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
  max-width: 62ch;
}

small, .caption {
  font-size: var(--fs-body-sm);
  color: var(--fg-subtle);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--fg-accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Inverse surface helpers (hero blocks, footers) */
.on-inverse {
  background: var(--bg-inverse);
  color: var(--fg-inverse-muted);
}
.on-inverse h1, .on-inverse h2, .on-inverse h3, .on-inverse h4,
.on-inverse .display { color: var(--fg-inverse); }
.on-inverse .eyebrow { color: var(--egm-green-60); }
.on-inverse a { color: var(--fg-inverse); }
.on-inverse hr { border-color: var(--border-inverse); }

/* The signature "period" — use .brand-dot wherever the wordmark logic applies */
.brand-dot {
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: var(--egm-green-100);
  vertical-align: baseline;
  margin-left: 0.04em;
}