/* Stillpoint design tokens — the SSOT for the whole site.
   Two layers: (1) raw palette + font stacks, (2) semantic aliases.
   style.css and the pages consume ONLY the semantic layer — if you're
   reaching for a raw name outside this file, add a semantic alias instead.
   Load order: pages link tokens.css BEFORE style.css.
   mi-site/style.css keeps a deliberate verbatim copy of these values
   (it deploys from its own root and can't reach ../tokens.css) — when
   tokens change here, re-sync mi-site by hand. */

/* ---- Layer 1 · raw palette + fonts (never referenced outside this file) ---- */
:root{
  --sage:#E8EAE1;
  --sage-2:#DDE1D1;
  --cream:#F7F6F0;
  --deep:#39423A;
  --deep-2:#2E372F;
  --ink-soft:#525A50;
  --olive:#6A7253;
  --olive-d:#5C6449;
  --tan:#D8C2A5;
  --serif:"Cormorant Garamond",serif;
  --sans:"Outfit",sans-serif;
}

/* ---- Layer 2 · semantic aliases (what the site actually uses) ---- */
:root{
  --bg:var(--sage);               /* page background */
  --bg-tint:var(--sage-2);        /* tinted section bands (.who, .room) */
  --bg-deep:var(--deep-2);        /* dark statement band (.approach) */
  --surface:var(--cream);         /* cards, panels, chips, form card */
  --text:var(--deep);             /* body + heading ink */
  --text-soft:var(--ink-soft);    /* secondary ink */
  --accent:var(--olive);          /* buttons, active nav, list markers */
  --accent-hover:var(--olive-d);  /* hover states, eyebrows on light bg */
  --accent-warm:var(--tan);       /* arch fill, warm accents on the dark band */
  --line:rgba(57,66,58,.15);      /* hairlines, borders */
  --font-display:var(--serif);
  --font-body:var(--sans);
}

/* ---- Layer 3 · vertical rhythm (the ONE spacing scale for stacked content) ----
   Principle: TIGHT within a group, GENEROUS between groups. Use these tokens for
   vertical spacing instead of bespoke margins/padding, so the rhythm stays
   consistent. The mobile values are redefined once, in style.css's <=640 block
   (and training/style.css's) — change them there, not per-component.
   See COMPONENTS.md "Vertical rhythm" and the design-stillpoint skill. */
:root{
  --vr-eyebrow:28px;        /* eyebrow -> its heading (tightest — they're one unit) */
  --vr-after-heading:16px;  /* heading -> its body copy */
  --vr-before-heading:48px; /* space above an in-flow subheading (new group starts) */
  --vr-header:48px;         /* a section header block -> the section's content */
  --vr-cta:48px;            /* body/quote -> its call-to-action button */
  --vr-cta-alt:30px;        /* a primary CTA button -> its subordinate secondary link beneath it */
  --vr-stack:22px;          /* between stacked sibling cards / panels */
  --vr-section:88px;        /* major section band top/bottom padding (mobile only) */
}