/* ============================================================
   tokens.css — the single source of truth for the whole site.

   Every colour, font-size, spacing, and radius on the site points
   at a token defined here. No page inlines a raw hex, size, or
   margin. Need a value that isn't here? Add it as a named step
   below and reuse it — never drop a one-off into a page.

   One edit here propagates to all pages. Linked from every
   page's <head> before its inline <style>.

   How to read a clamp:  clamp(30px, 4.8vw, 74px)
     30px  = smallest (on a phone)
     74px  = largest (on a big screen)
     4.8vw = how fast it grows between the two
   ============================================================ */

:root {
  /* ── COLOUR ─────────────────────────────────────────────
     Neutrals, used across the whole site. index.html is the
     reference; every page adopts these exactly. */

  --bg: #e2ddd5; /* page background (cream) */
  --surface: #faf7f2; /* light cards / off-white */
  --surface-alt: #dedad2; /* neutral card variant (logo, media) */
  --panel: #ffffff; /* true white behind flat artwork */
  --surface-dark: #111111; /* dark cards / sections */

  /* One near-black does two jobs. Primary text and the dark
     surface were 15 levels apart, so they share one ink now. */
  --text: #111111; /* primary text, same ink as --surface-dark */
  --text-on-dark: #ede8df; /* bright text on dark (15.5:1) */
  --text-muted-on-dark: #b8b1a6; /* muted text on dark (8.9:1) */

  /* One secondary grey does two jobs. Body and muted were 12
     levels apart. Labels read quieter through size and caps, not
     a lighter colour (a lighter grey fails AA on the cream). */
  --text-body: #5a5450; /* body copy on light (5.5:1) */
  --text-muted: #5a5450; /* labels, meta, same grey as body */

  --accent: #ffa51e; /* single accent; fill or underline, never text on light */

  --line: #d8d3cb; /* hairline on light */
  --line-dark: #2a2826; /* hairline on dark, kept lighter than the ink so it stays visible */

  /* ── TYPE ───────────────────────────────────────────────
     Fixed steps are UI labels that shouldn't scale. Fluid
     (clamp) steps are content type that grows with the viewport.
     One step per genuinely distinct size on the site. */

  /* Fixed — labels, nav, meta */
  --fs-2xs: 10px; /* micro labels, nav */
  --fs-xs: 12px; /* small labels */
  --fs-sm: 14px; /* standard labels */
  --fs-md: 20px; /* fixed lead-in numbers */

  /* Caption was fluid — clamp(11px, 0.85vw, 12px) — but the clamp
     grew so slowly that it only reached 12px at a 1412px viewport,
     so the 11px floor was what rendered on a phone AND on most
     laptops. 11px is below what detail text should be on screen.
     Now flat: captions and hero creds read 12px everywhere. Same
     value as --fs-xs for now; the two are separate steps by intent
     and should be reconciled in the wider type pass. */
  --fs-caption: 12px; /* fine print, captions, hero creds */

  /* Fluid — content, small to large */
  --fs-body: clamp(13px, 0.9vw, 14px); /* running paragraphs (~14) */
  --fs-body-lg: clamp(14px, 1vw, 16px); /* emphasised body */
  --fs-lead: clamp(17px, 2vw, 28px); /* slogans, intros */
  --fs-subhead-sm: clamp(20px, 2.2vw, 34px); /* small subheads */
  --fs-subhead: clamp(22px, 2.4vw, 38px); /* subheads */
  --fs-heading-sm: clamp(26px, 3.4vw, 50px); /* small headings */
  --fs-heading: clamp(30px, 3.7vw, 56px); /* headings */
  --fs-heading-lg: clamp(32px, 4.8vw, 74px); /* large headings */
  --fs-display: clamp(40px, 5.5vw, 86px); /* display */
  --fs-display-lg: clamp(48px, 7.3vw, 116px); /* big display */
  --fs-mega: clamp(52px, 9vw, 140px); /* hero mega */

  /* ── SPACING ────────────────────────────────────────────
     One step per distinct spacing value on the site. --gap is
     the base unit (grid gap + outer frame). --sp-card is the
     inner-card padding. */

  --gap: 10px; /* grid gap + outer frame */
  --sp-card: 20px; /* inner-card padding */

  --sp-hair: 2px; /* optical nudge */
  --sp-1: 4px;
  --sp-2: 6px; /* tight (absorbs 5, 7) */
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 16px;
  --sp-7: 18px;
  --sp-8: 24px;
  --sp-9: 26px;
  --sp-10: 28px;
  --sp-11: 32px;
  --sp-12: 40px;
  --sp-13: 44px;
  --sp-14: 48px;
  --sp-15: 52px;
  --sp-16: 56px;
  --sp-17: 60px;
  --sp-18: 72px;
  --sp-19: 80px;
  --sp-20: 96px;
  --sp-21: 100px;

  /* ── RADIUS ─────────────────────────────────────────────
     --radius is the card corner. Smaller steps for chips,
     tags, and small media. (Circles use 50% directly.) */

  --radius: 15px; /* cards */
  --radius-sm: 12px; /* small media / panels (absorbs 16) */
  --radius-xs: 6px; /* chips, tags (absorbs 4) */

  /* ── SPACING ROLES (semantic) ───────────────────────────
     Reach for these by intent. They point at the ladder above;
     use a raw --sp-* only for a genuine one-off the roles miss. */

  --space-gap: var(--gap); /* 10 — gap between grid items / small elements */
  --space-inset: var(--sp-card); /* 20 — padding inside a card or panel */
  --space-stack-sm: var(--sp-2); /* 6  — label to its heading (tight) */
  --space-stack: var(--sp-7); /* 18 — heading to body, paragraph rhythm */
  --space-block: var(--sp-12); /* 40 — between sub-blocks in a section */
  --space-section: var(--sp-18); /* 72 — between major sections */

  /* ── GRID ───────────────────────────────────────────────
     A 12-column layout grid. Content sits in a centred container
     with the --gap frame; columns share the --gap gutter. Use the
     .grid utility (components.css) and place items with
     grid-column. The homepage keeps its own bento; everything
     editorial (about, playground, this guide) rides this grid. */

  --grid-cols: 12;
  --grid-gutter: var(--gap); /* 10 */
  --grid-max: 1200px; /* container max width */
}
