/* =========================================================
   Integrated Embodiment — Design Tokens
   Mist direction (default): cool silver-grey neutrals with warm taupe.
   ========================================================= */

:root {
  /* ---------- Color: neutrals — Mist, cool silver with warm undertone ---------- */
  --linen-50:   #F4F2EF;   /* page canvas — cool warm-white */
  --linen-100:  #EAE7E2;   /* soft surface */
  --linen-200:  #D8D4CE;   /* hairline / divider */
  --linen-300:  #B9B4AD;   /* muted rule */
  --linen-400:  #8F8A84;   /* secondary type — warm grey */

  --stone-600:  #585450;   /* body text — warm deep grey */
  --stone-800:  #3A3634;   /* headlines */
  --stone-900:  #1F1C1B;   /* strongest ink */

  /* ---------- Color: primary — Taupe (warm dark stone, from the CTA) ---------- */
  /* NOTE: kept under --sage-* token names so all components inherit the
     current palette without renaming. "sage" is now a semantic slot,
     not a literal hue — current values are warm taupe. */
  --sage-50:    #F0EDE9;
  --sage-100:   #E0DAD3;
  --sage-200:   #C4BDB4;
  --sage-400:   #8C827A;
  --sage-500:   #5A5049;   /* PRIMARY — warm dark taupe (matches CTA) */
  --sage-600:   #463E39;
  --sage-700:   #342E2B;
  --sage-900:   #1D1917;

  /* ---------- Color: accent — Dusty Rose / Clay-Mauve ---------- */
  /* Muted warm accent that reads with the misty background */
  --terra-50:   #F3EAE5;
  --terra-100:  #E8D8D0;
  --terra-300:  #C8A59A;
  --terra-500:  #A37866;   /* ACCENT — dusty clay */
  --terra-700:  #75503F;
  --terra-900:  #3E281F;

  /* ---------- Color: tertiary — Sage-Mist (cool accent) ---------- */
  --honey-200:  #D5DCD4;
  --honey-500:  #8A9891;

  /* ---------- Color: semantic ---------- */
  --bg:          var(--linen-50);
  --surface:     #FFFFFF;
  --surface-2:   var(--linen-100);
  --border:      var(--linen-200);
  --border-strong: var(--linen-300);
  --text:        var(--stone-600);
  --text-soft:   var(--linen-400);
  --text-strong: var(--stone-800);
  --text-ink:    var(--stone-900);
  --accent:      var(--sage-500);
  --accent-ink:  var(--sage-700);
  --warm:        var(--terra-500);
  --warm-soft:   var(--terra-100);

  --success:   #5F7A4A;
  --warning:   #B8843B;
  --danger:    #A0462A;

  /* ---------- Type ---------- */
  --font-serif: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Sizes — fluid scale, editorial */
  --fs-display:  clamp(3rem, 6vw + 1rem, 5.25rem);   /* 48-84 */
  --fs-h1:       clamp(2.25rem, 3vw + 1rem, 3.25rem);
  --fs-h2:       clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
  --fs-h3:       1.375rem;
  --fs-lead:     1.1875rem;   /* 19 */
  --fs-body:     1.0625rem;   /* 17 */
  --fs-small:    0.9375rem;   /* 15 */
  --fs-micro:    0.8125rem;   /* 13 */
  --fs-eyebrow:  0.75rem;     /* 12, uppercase */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tracking-eyebrow: 0.16em;
  --tracking-wide:    0.08em;
  --tracking-tight:   -0.02em;

  /* ---------- Spacing (8pt baseline) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows — soft, single-cast, warm ---------- */
  --shadow-sm: 0 1px 2px rgba(50,45,35,0.05), 0 1px 3px rgba(50,45,35,0.03);
  --shadow-md: 0 2px 6px rgba(50,45,35,0.05), 0 10px 24px rgba(50,45,35,0.06);
  --shadow-lg: 0 8px 24px rgba(50,45,35,0.08), 0 32px 72px rgba(50,45,35,0.10);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;

  /* ---------- Layout ---------- */
  --container:        1240px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
}