/* =========================================================================
   ROOTED EXPANSION — DESIGN TOKENS
   Earthbound sanctuary with a trace of cosmic dust.
   Source: Website Master Foundation v02, §11 · A+ Build Directive v03, §9
   All text/background pairings verified against WCAG 2.2 AA (see docs/ACCESSIBILITY.md)
   ========================================================================= */

:root {
  /* ---- Color · 85% living-Earth ground ---------------------------------
     Anima Mundi translation pass (v04 directive) — working palette,
     contrast-verified in docs/ACCESSIBILITY.md */
  --clouded-linen:   #F7F2E9;   /* main canvas */
  --warm-parchment:  #EADFCF;   /* alternating panels, editorial fields */
  --garden-taupe:    #CBB9A7;   /* dividers, borders — decorative only, fails AA as text */
  --sandstone:       var(--garden-taupe); /* legacy alias, same value */

  /* ---- Color · living green ------------------------------------------ */
  --soft-sage:       #87957A;   /* quiet decorative accent — fails AA as small text */
  --moss-leaf:       #607553;   /* botanical accent, AA on light grounds */
  --rooted-green:    #31583C;   /* brand emphasis, headings, small fields — AAA on light */
  --rooted-green-deep: #26442E; /* hover/active state for green fills */

  /* ---- Color · warm accents ------------------------------------------ */
  --terracotta:      #A6543D;   /* reserved warm accent, no longer the primary CTA color */
  --terracotta-deep: #844330;
  --umber-mid:       #7F6A52;   /* primary action/link color — warm, between Garden Taupe and Deep Umber */
  --umber-mid-deep:  #6B583F;   /* hover/active state */
  --ember-clay:      #B96845;   /* small warmth, hover, material accents — large text only */
  --amber-ochre:     #C18B42;   /* glints, inlays, fine rules only — never text */

  /* ---- Color · green washes (section/panel backgrounds) --------------- */
  --sage-wash:       #CACCBC;   /* clearly green-tinted section background */
  --moss-panel:      #B8BEAA;   /* deeper green panel for callouts/highlights */

  /* ---- Color · deep grounding (never dominant, never black) --------- */
  --aged-oak:        #7B5B3C;   /* secondary text, wood/material reference */
  --deep-umber:      #4A372D;   /* primary text, primary CTA fill — not black */

  /* ---- Color · 15% midsummer-dusk world (concentrated moments only) -- */
  --blue-dusk:       #485260;   /* limited evening/cosmic field */
  --night-garden:    #293C35;   /* footer, hero-open reveal, closing invitation */
  --dusk-glint:      #F4C77A;   /* firefly/star/amber glint on dusk grounds */
  --ember-glow:      #CBA057;   /* soft, muted gold-umber for CTAs on dusk grounds */
  --ember-glow-deep: #BC9550;   /* hover/active state */

  /* ---- Color · five values, one identifying tint each ------------------
     Used only for small category tags/pills — never as full section fills.
     Each pairing verified against WCAG AA (see docs/ACCESSIBILITY.md). */
  --value-remembering-bg:   #BFBFBD;
  --value-remembering-text: #272D34;
  --value-integrity-bg:     #DCD1C3;
  --value-integrity-text:   #5C442D;
  --value-right-relationship-bg:   #E5CFC3;
  --value-right-relationship-text: #7C3F2D;
  --value-reciprocity-bg:   #EAD9C1;
  --value-reciprocity-text: #513A1B;
  --value-stewardship-bg:   #CBD0C3;
  --value-stewardship-text: #24422D;

  /* ---- Semantic roles -------------------------------------------------*/
  --ink:             var(--deep-umber);
  --ink-soft:        var(--aged-oak);
  --ink-on-dark:     var(--clouded-linen);
  --ink-on-dark-soft: #E0D6C6;

  --bg-canvas:       var(--clouded-linen);
  --bg-panel:        var(--warm-parchment);
  --bg-deep:         var(--night-garden);   /* dusk-world surface: footer + concentrated moments */
  --bg-deepest:      var(--night-garden);

  --line:            var(--garden-taupe);
  --line-on-dark:    rgba(224, 214, 198, 0.22);

  --accent:          var(--umber-mid);
  --accent-deep:     var(--umber-mid-deep);
  --accent-soft:     var(--moss-leaf);
  --accent-warm:     var(--ember-clay);
  --brand-green:     var(--rooted-green);
  --brand-green-deep: var(--rooted-green-deep);

  --focus-ring:      #1D4E3A; /* high-contrast, distinct from accent, passes AA on all light grounds */
  --focus-ring-on-dark: var(--dusk-glint); /* AA/AAA on night-garden & blue-dusk */

  /* ---- Backward-compatible aliases (pre-v04 token names) --------------- */
  --oak-bark:        var(--aged-oak);
  --oak-bark-deep:   var(--night-garden);
  --clay-red:        var(--umber-mid);
  --clay-red-deep:   var(--umber-mid-deep);
  --warm-taupe:      var(--garden-taupe);

  /* ---- v09 additions — expert-audit palette, mapped onto the existing
     living-Earth system rather than a second competing token set. New
     names only where a genuinely new role was needed (rose-clay as a
     human/cosmic transition tint; pollen as a small luminous-detail
     accent distinct from amber-ochre's inlay use). See
     docs/CHANGELOG_v09.md for where each is used. --------------------- */
  --re-paper:        var(--clouded-linen);
  --re-bone:         var(--warm-parchment);
  --re-ink:          var(--deep-umber);
  --re-forest:       var(--rooted-green);
  --re-moss:         var(--moss-leaf);
  --re-terracotta:   var(--umber-mid);
  --re-pollen:       #D2A13B;
  --re-rose-clay:    #D6A59A;
  --re-dusk:         var(--blue-dusk);
  --re-wash-iridescent:
    radial-gradient(circle at 16% 18%, rgb(224 158 148 / 48%), transparent 44%),
    radial-gradient(circle at 84% 16%, rgb(156 184 154 / 42%), transparent 46%),
    radial-gradient(circle at 22% 88%, rgb(150 178 214 / 36%), transparent 44%),
    radial-gradient(circle at 88% 86%, rgb(226 175 74 / 40%), transparent 42%),
    radial-gradient(circle at 50% 50%, rgb(255 253 248 / 55%), transparent 60%),
    var(--warm-parchment);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --text-2xl:  clamp(1.9rem, 1.55rem + 1.7vw, 2.65rem);
  --text-3xl:  clamp(2.3rem, 1.8rem + 2.5vw, 3.4rem);
  --text-4xl:  clamp(2.8rem, 2rem + 4vw, 4.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --measure: 64ch;
  --measure-narrow: 46ch;

  /* ---- Spacing (8px rhythm) -------------------------------------------- */
  --space-1:  0.5rem;
  --space-2:  0.75rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  4.5rem;
  --space-8:  6rem;
  --space-9:  8rem;

  /* ---- Shape -------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Elevation (warm-toned, never grey) ---------------------------- */
  --shadow-sm: 0 1px 2px rgba(61, 44, 35, 0.08);
  --shadow-md: 0 6px 24px -8px rgba(61, 44, 35, 0.22);
  --shadow-lg: 0 18px 48px -16px rgba(61, 44, 35, 0.30);

  /* ---- Motion --------------------------------------------------------- */
  --ease-organic: cubic-bezier(0.22, 0.61, 0.25, 0.99);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;
  --duration-threshold: 1300ms;

  /* ---- Layout ----------------------------------------------------------*/
  --content-width: 1240px;
  --content-narrow: 780px;
  --header-height: 84px;
}

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