/* ==========================================================================
   Design tokens
   Single source of truth. Never hardcode a hex value anywhere else.
   See ACCESSIBILITY.md for the contrast matrix behind these role assignments.
   ========================================================================== */

:root {
  /* ---- Brand palette (fixed — do not alter these six values) ------------ */
  --gold:   #ffc700;  /* call to action only */
  --lemon:  #f7f166;  /* soft surface, marker highlight */
  --olive:  #809e00;  /* accent, icons, decoration — never body text */
  --gray:   #b5b5b5;  /* decorative hairlines only — never text */
  --mist:   #f4f4f4;  /* alternating section surface */
  --forest: #005700;  /* primary brand, headings, dark surfaces */
  --white:  #ffffff;

  /* ---- Derived tokens (required; the brand six cannot carry these roles) - */
  --ink:          #14210f;  /* long-form body copy. 16.7:1 on white          */
  --ink-muted:    #5a6b52;  /* metadata, captions.  5.7:1 on white           */
  --border-ui:    #8f8f8f;  /* input + control outlines. 3.2:1 — meets 3:1   */
  --forest-press: #004200;  /* active state on forest surfaces               */
  --gold-press:   #e6b300;  /* active state on gold                          */
  --forest-tint:  #e6efe6;  /* quiet green surface, alternative to --mist    */

  /* ---- Semantic assignments -------------------------------------------- */
  --surface-page:    var(--white);
  --surface-alt:     var(--mist);
  --surface-quiet:   var(--forest-tint);
  --surface-soft:    var(--lemon);
  --surface-inverse: var(--forest);

  --text-heading:    var(--forest);
  --text-body:       var(--ink);
  --text-muted:      var(--ink-muted);
  --text-on-dark:    var(--white);
  --text-on-gold:    var(--forest);
  --text-on-lemon:   var(--forest);

  --line-hairline:   var(--gray);
  --line-control:    var(--border-ui);

  --focus-ring:      var(--forest);
  --focus-ring-alt:  var(--gold);   /* use on forest surfaces */

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Atkinson Hyperlegible", "Familjen Grotesk", Arial, sans-serif;

  --step-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --step-h1:      clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --step-h2:      clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
  --step-h3:      clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --step-body:    1.0625rem;
  --step-small:   0.9375rem;
  --step-meta:    0.8125rem;

  --leading-tight:  1.04;
  --leading-snug:   1.2;
  --leading-body:   1.65;
  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-meta:   0.06em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* ---- Space ------------------------------------------------------------ */
  --space-2:  0.25rem;
  --space-3:  0.5rem;
  --space-4:  0.75rem;
  --space-5:  1rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --section-y:  clamp(4rem, 9vw, 8rem);
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --measure:    68ch;  /* body copy max width */
  --measure-display: 16ch;

  --width-content: 1200px;
  --width-prose:   720px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* One shadow exists. Do not add a second. */
  --shadow-lift: 0 2px 4px rgba(0, 87, 0, 0.04), 0 12px 28px rgba(0, 87, 0, 0.07);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Signature: the band --------------------------------------------- */
  --band-height:    clamp(20rem, 42vw, 32rem);
  --band-arc:       clamp(1.5rem, 3.4vw, 3rem);  /* arc depth, top and bottom */
  --band-scrim:     rgba(0, 87, 0, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* No dark mode. See DESIGN.md § "Why there is no dark mode". */