/* Real Good Mood — design tokens (docs/DESIGN.md §2)
   White ground, one cool grey step, near-black ink, one teal accent. No cream, no beige.
   Afacad arrives from Google Fonts via <link> in the layout (display=swap); the Fallback face
   below is a metric-adjusted local() face so the swap barely moves text.
   Components read only the live vars (--bg, --fg, --line …), never the palette directly. */

@font-face { font-family:"Afacad Fallback"; src:local("Trebuchet MS"), local("Roboto"), local("Helvetica Neue"); size-adjust:92%; ascent-override:96%; descent-override:24%; line-gap-override:0%; }

/* Registered properties: interpolable, so scroll scenes and transitions can animate them. */
@property --melt     { syntax:"<number>"; inherits:true; initial-value:0; }
@property --lamp-p   { syntax:"<number>"; inherits:true; initial-value:0; }
@property --tissue-p { syntax:"<number>"; inherits:true; initial-value:0; }
@property --words-p  { syntax:"<number>"; inherits:true; initial-value:0; }
@property --folio-p  { syntax:"<number>"; inherits:true; initial-value:0; }
@property --bleed    { syntax:"<number>"; inherits:true; initial-value:0; }
@property --read-p   { syntax:"<number>"; inherits:true; initial-value:0; }
@property --fl       { syntax:"<color>";  inherits:true; initial-value:transparent; }

:root {
  /* ---- palette ----------------------------------------------------------
     Two light grounds do all the work. --dark exists only for the few places
     that genuinely need to recede (a scrim over footage, a lit stage);
     it is never the page background. */
  --white:#FFFFFF;
  --mist:#F5F6F7;   /* the mild grey: alternating sections, mats, inputs, the gate */
  --mist-2:#ECEEF0; /* one step deeper: insets, hover fills, disabled */
  --dark:#14171A;
  --dark-2:#1D2126;

  --ink:#101315;    /* 17.4:1 on white — headlines */
  --ink-2:#474D53;  /* 8.4:1 on white, 7.9:1 on mist — body */
  --ink-3:#666D74;  /* 5.2:1 on white, 4.9:1 on mist — meta, captions */
  --ink-4:#9AA1A8;  /* 2.7:1 — decorative only, never text under 24px */
  --rule:#E2E5E8;
  --rule-2:#D3D7DB;

  --bone:#F4F5F6;   /* 16:1 on dark */
  --bone-2:#B9BFC5; /* 8.1:1 on dark */
  --bone-3:#8B9299; /* 4.8:1 on dark */
  --rule-dark:rgb(244 245 246 / .16);

  --accent:#0E6E6B;        /* 5.7:1 on white — links, text buttons, filled buttons (with white type) */
  --accent-deep:#0A5250;   /* pressed state of the filled button */
  --accent-bright:#1FABA9; /* the brand teal: marks, ticks, the count dot, focus on dark. Never text on white. */
  --accent-wash:#E8F4F4;   /* tinted panels */
  --error:#B02A18;         /* 5.6:1 on white */
  --error-dark:#F0907A;
  --scrim:rgb(16 19 21 / .42);
  --scrim-strong:rgb(16 19 21 / .58);
  --lamp:#C4D2D2;          /* the soft light pool under a staged object — cool, never amber */
  --grain:0;               /* no paper grain on a white ground */

  /* ---- live ground vars -------------------------------------------------
     Everything reads these. [data-ground] flips them for a dark island. */
  --bg:var(--white);
  --bg-2:var(--mist);
  --bg-3:var(--mist-2);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-4:var(--ink-4);
  --mark:var(--accent); --focus:var(--accent); --err:var(--error);

  /* ---- type -------------------------------------------------------------
     Afacad throughout. One family, held together by weight and size. */
  --font-sans:"Afacad","Afacad Fallback",system-ui,-apple-system,sans-serif;
  --font-italic:var(--font-sans);

  --t-display-xl:clamp(2.75rem, 1.55rem + 4.8vw, 6.5rem);
  --t-display-l:clamp(2.25rem, 1.55rem + 3vw, 4.5rem);
  --t-h2:clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
  --t-h3:clamp(1.25rem, 1.12rem + .6vw, 1.625rem);
  --t-lead:clamp(1.125rem, 1.04rem + .42vw, 1.4rem);
  --t-body:clamp(1rem, .97rem + .18vw, 1.0625rem);
  --t-small:.875rem; --t-eyebrow:.75rem; --t-button:.9375rem;
  --t-numeral:clamp(2.5rem, 1.9rem + 2.6vw, 4rem);

  /* ---- layout -----------------------------------------------------------  */
  --margin:clamp(1.25rem,5vw,5.5rem); --gap:clamp(1rem,2vw,2rem); --mat:clamp(1rem,3vw,3rem);
  --section-gap:clamp(4.5rem,9vw,10rem); --block:3.5rem; --nav-h:68px; --bar-h:68px;
  --chapter-gap:var(--section-gap);   /* compatibility alias: layout.css and pages not yet rebuilt still ask for it */
  --container:1560px; --measure:64ch; --measure-lead:46ch;
  --radius:0px;              /* squared, with two exceptions: pills and the round marks */
  --radius-pill:999px;
  --shadow-lift:0 18px 40px -22px rgb(16 19 21 / .28), 0 2px 8px -4px rgb(16 19 21 / .12);
  --shadow-object:0 40px 70px -40px rgb(16 19 21 / .45);
  --z-folio:40; --z-nav:50; --z-grain:60; --z-flash:70; --z-gate:90;

  /* ---- motion ----------------------------------------------------------- */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-slow:cubic-bezier(.65,0,.35,1);
  --d-hover:320ms; --d-fade:640ms; --d-reveal:820ms; --d-line:1000ms; --d-plate:1200ms; --d-sheet:900ms;
}

/* A dark island: the scrimmed hero copy, a lit stage, anything that has to recede.
   Declared as its own block so an element that opts in recomputes every var from its own ground. */
[data-ground="dark"] {
  --bg:var(--dark); --bg-2:var(--dark-2); --bg-3:var(--dark-2);
  --line:var(--rule-dark); --line-2:var(--rule-dark);
  --fg:var(--bone); --fg-2:var(--bone-2); --fg-3:var(--bone-3); --fg-4:var(--bone-3);
  --mark:var(--accent-bright); --focus:var(--accent-bright); --err:var(--error-dark);
  color-scheme:dark;
}
[data-ground="light"] {
  --bg:var(--white); --bg-2:var(--mist); --bg-3:var(--mist-2);
  --line:var(--rule); --line-2:var(--rule-2);
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-4:var(--ink-4);
  --mark:var(--accent); --focus:var(--accent); --err:var(--error);
  color-scheme:light;
}

@media (max-width: 63.98em) {
  :root { --nav-h:60px; --bar-h:60px; }
}