/* ============================================================================
   public/shared/tokens.css
   Canonical design tokens for the whole site (tools, studio, guides,
   landing) -- extracted unchanged from the palette/type system already
   validated across /far2 and every /test page this project has built.
   Nothing here is new; this file exists so every future page reads from
   one source instead of re-declaring the same :root block per page.

   Not applied to server/scoring.js or public/index.html (the legacy "/"
   report) -- that page is being retired, not restyled.
   ============================================================================ */
:root{
  --bg:#f5f5f0; --panel:#ffffff; --panel-line:rgba(26,26,24,0.1);
  --mesh:#ff006e; --marker:#ff5a36; --text:#1a1a18; --muted:#6b6a62;
  --bar-bg:rgba(26,26,24,0.06); --warn:#b3401d; --gold:#a6791f;
  --font-serif:'Cormorant Garamond', Palatino, Georgia, serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* --font-display: the more ornate sibling in the same Cormorant
     superfamily as --font-serif -- same type family, swash-capable italic
     capitals, reserved for large one-per-page hero/display moments (see
     .display-italic in site.css). Not a replacement for --font-serif,
     which stays the workhorse for headings/labels/scores everywhere. */
  --font-display:'Cormorant', 'Cormorant Garamond', Palatino, Georgia, serif;

  /* --shadow-rich: a layered shadow (tight+dark close to the edge, wide+
     soft further out) for a deeper, richer feel than a single flat
     shadow -- same --text-derived color as the flat shadow already used
     ad hoc on .postcard elements across existing pages, just layered. */
  --shadow-rich: 0 2px 6px rgba(26,26,24,0.10), 0 24px 48px rgba(26,26,24,0.08);
}