/* ==========================================================
   DESIGN TOKENS
   Shared foundation for the entire site. Every chapter built
   after this one draws from these same values — nothing here
   is local to a single section.
   ========================================================== */
:root{

  /* — ANOPY COLOR PALETTE — "Cool Clinical" (2026-09) — */
  /* Harmony, Connection, Music */
  /* More Moments That Matter */
  /*
     Previous "vintage" palette, kept for a fast revert:
       --cream-bg #f8f5ef   --warm-beige #eadcc2
       --forest-green #23744b   --navy #273f59
       --terracotta #c08e4b   --brown #7b4a25
       --text-dark #273f59   --text-muted #7b4a25   --text-on-dark #f8f5ef
       --line #e2d7c3
       --moss-bg #2f4a37 / edge #263c2c / text #dfe7dd / heading #eef3ec
       --terracotta-text #5a3a1f
       --on-photo rgba(248,245,239, .94 / .55 / .40)
  */

  /* Primary backgrounds */
  --cream-bg:       #ecebe6;    /* Primary background - cool greige */
  --warm-beige:     #d8d8ce;    /* Alt sections, cards */

  /* Primary brand colors */
  --forest-green:   #57804c;    /* Primary action, healing - fills, large text, rules */
  --forest-green-ink: #45683c;  /* Same green, darkened for small text / links (AA on --cream-bg) */
  --forest-green-btn: #507646;  /* Same green, darkened for solid button fills — #57804c under
                                    light text-on-dark measures ~4.06:1, below AA's 4.5:1 for
                                    normal text; this measures ~4.64:1. */
  --navy:           #29323e;    /* Ink - blue-charcoal: trust, dark bands, body text */

  /* Accent warmth */
  --terracotta:     #c57a45;    /* Warm accent - burnt orange, small spark only */
  --brown:          #5b626b;    /* Grounding / secondary - cool grey */

  /* Text colors */
  --text-dark:      #29323e;    /* Ink - main text */
  --text-muted:     #5b626b;    /* Cool grey - secondary text */
  --text-on-light:  #29323e;    /* Ink text on light backgrounds */
  --text-on-dark:   #f1f2ec;    /* Light text on dark backgrounds */

  /* Hairlines / borders */
  --line:           #cbcbbf;    /* hairline on greige surfaces */

  /* Legacy aliases — nav.css and a few shared components still reference
     the Afzal token names. Mapped onto the Anopy palette so nothing
     renders with an unresolved var(). Prefer the Anopy names above in
     any new rule. */
  --ivory:            var(--cream-bg);
  --ivory-warm:       var(--warm-beige);
  --charcoal:         var(--text-dark);
  --charcoal-soft:    var(--text-muted);
  --olive-mid:        var(--forest-green);
  --moss-bg:          #29323e;
  --moss-bg-edge:     #212a33;
  --moss-text:        #d8dce2;
  --moss-heading:     #f1f2f4;
  --rust:             var(--terracotta);
  --terracotta-text:  #4a2e18;
  --on-photo:         rgba(241, 242, 236, 0.94);
  --on-photo-soft:    rgba(241, 242, 236, 0.55);
  --on-photo-dim:     rgba(241, 242, 236, 0.40);

  /* — type — */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Work Sans', Helvetica, Arial, sans-serif;

  /* type scale (locked site-wide) */
  --size-quote:   24px;   /* pull-quote register */
  --size-body:    24px;
  --size-body-sm: 20px;
  --size-caption: 16px;

  /* reading body — quiet, long-form paragraph text (Meeting onward) */
  --size-read:      16px;
  --size-read-lg:   17px;   /* opening line, slightly more presence */
  --size-read-label: 10px;

  /* small UI text — buttons, labels, chrome. Named by role rather
     than value since each is a distinct, deliberately-different
     size from its neighbors (formalizing values already in use
     across the site, not introducing new ones). */
  --size-micro:        11px;  /* small CTA/button text */
  --size-label:         12px;  /* eyebrows, small field/stat labels */
  --size-ui:            13px;  /* nav wordmark, footer name, form labels */
  --size-body-xs:       14px;  /* compact captions/titles */
  --size-body-compact:  15px;  /* arrival CTA, compact body text */

  /* spacing scale — 8px base unit */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  /* --space-xl carries the vertical rhythm between nearly every section
     on the site, so it is the single lever for how much air sits
     between them. Eased 128 -> 96: still a clear, unhurried beat
     between chapters, but the old value left stretches of empty ground
     tall enough to read as a gap rather than a pause. */
  --space-xl:  96px;
  --space-xxl: 176px;

  /* Sticky header (utility strip + main bar). The homepage hero subtracts
     this so the full-bleed frame fits the first screen exactly. */
  --site-header-h: 111px;

  /* shared container horizontal padding — used identically across
     reset.css and every chapter's .__section rule */
  --container-pad: clamp(24px, 6vw, 96px);

  /* motion */
  --ease-slow:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover:   450ms;
  --dur-reveal:  900ms;
}

/* Header height steps down/up with the breakpoints in nav.css (main bar
   wraps at 900px, short CTA label at 520px, tighter still on very narrow
   phones). Keep these in sync so the homepage hero always fits the first
   screen exactly. */
@media (max-width: 900px){
  :root{ --site-header-h: 174px; }
}
@media (max-width: 520px){
  :root{ --site-header-h: 159px; }
}
@media (max-width: 340px){
  :root{ --site-header-h: 191px; }
}