/* ==========================================================================
   BRAND TOKENS: edit here first. "Measured Ground, elevated."
   Four brand colors + white. Every other color below is a named tint or shade
   of those four (no new hues). Contrast notes are measured ratios.
   ========================================================================== */

/* Manrope is self-hosted: a small Latin WOFF2 first, the full TTF as fallback. */
@font-face{
  font-family:Manrope;
  src:url(../fonts/Manrope-Variable.woff2) format('woff2'),url(../fonts/Manrope-Variable.ttf) format('truetype');
  font-weight:200 800;font-display:swap;
}

:root{
  /* ---- 1. The four brand colors (do not change) ---- */
  --color-evergreen:#183D35;   /* text, buttons, dark sections */
  --color-ivory:#F4F1E9;       /* page background, text on dark */
  --color-mineral:#C9CFC5;     /* panels, 1px hairlines */
  --color-clay:#AA6952;        /* rules, bars, icons, LARGE type only. Never small text. */
  --color-white:#fff;

  /* ---- 2. Named tints and shades (derived from the four above) ---- */
  --evergreen-deep:#102822;    /* evergreen + 35% black. Closing CTA, footer, hero overlays. Ivory on it: 13.8:1 */
  --evergreen-soft:#34544D;    /* evergreen + 12% white. Borders and hover on dark */
  --clay-soft:#CAA294;         /* clay + 38% white. Accent type and rules ON DARK: 5.2:1 on evergreen, 6.8:1 on deep */
  --clay-wash:#EDE3DA;         /* clay + ivory. Quiet warm callout background */
  --ivory-deep:#E9E8E0;        /* ivory + 5% evergreen. Zebra rows, subtle panels */
  --mineral-soft:#E1E2D9;      /* mineral + ivory. Icon tiles, soft panels */
  --text-muted:#32534B;        /* evergreen + ivory. Secondary text: 7.5:1 on ivory, 8.5:1 on white */

  /* ---- 3. Semantic roles (components read these; dark sections override them) ---- */
  --bg:var(--color-ivory);
  --fg:var(--color-evergreen);
  --fg-muted:var(--text-muted);
  --accent:var(--color-clay);          /* large type only (3.8:1 on ivory, 4.3:1 on white) */
  --rule:var(--color-clay);            /* decorative rules and bars */
  --line:var(--color-mineral);         /* 1px hairlines */
  --card:var(--color-white);
  --card-line:var(--color-mineral);
  --focus:var(--color-evergreen);

  /* ---- 4. Type: Manrope only ---- */
  --font-sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-body:clamp(1.0625rem,1.02rem + .2vw,1.125rem);
  --fs-lead:clamp(1.1875rem,1.1rem + .45vw,1.4rem);
  --fs-h1:clamp(3rem,8vw,6.5rem);            /* homepage hero */
  --fs-h1-page:clamp(2.5rem,5.6vw,4.5rem);   /* inner-page heroes (longer headlines) */
  --fs-h2:clamp(2rem,4.5vw,3.5rem);
  --fs-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --fs-small:.875rem;
  --fs-eyebrow:.75rem;
  --lh-body:1.65;
  --measure:65ch;

  /* ---- 5. Space and layout ---- */
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:3rem;--space-6:4rem;--space-8:6rem;
  --section-y:clamp(4.5rem,9vw,8.5rem);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --max:1240px;
  --hdr-h:84px;            /* header height at the top of the page */
  --hdr-h-solid:68px;      /* header height once scrolled */
  --mobile-bar-h:60px;

  /* ---- 6. Shape, shadow, motion ---- */
  --radius:14px;           /* cards, inputs, small images */
  --radius-lg:20px;        /* large cards, tiles, big images */
  --radius-pill:999px;     /* buttons, pills */
  --shadow-1:0 1px 2px rgba(16,40,34,.05),0 6px 18px rgba(16,40,34,.06);
  --shadow-2:0 2px 4px rgba(16,40,34,.05),0 14px 36px rgba(16,40,34,.10);
  --shadow-3:0 4px 8px rgba(16,40,34,.06),0 24px 56px rgba(16,40,34,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:400ms;

  /* Legacy names kept so older snippets keep working */
  --color-bg:var(--bg);--color-text:var(--fg);--color-surface:var(--color-mineral);--color-accent:var(--color-clay);
}