/* ============================================================================
   tokens.css — MARKET-INVARIANT layer
   ----------------------------------------------------------------------------
   Holds everything that does NOT change between markets: the type scale,
   spacing, radii, leading/tracking, shadows, and a :root of SEMANTIC colour
   tokens that POINT AT the per-market --theme-* variables.

   Load order per page:  tokens.css  +  ONE theme file  +  components.css + prose.css
   Custom properties resolve at use-time, so load order between tokens and the
   theme file does not matter — both merge into the same :root cascade.
   ========================================================================== */

:root {
  /* --- Semantic colour tokens → per-market theme vars ---------------------- */
  /* Components reference ONLY these. The raw values live in the theme file.   */
  --color-brand:          var(--theme-brand);
  --color-brand-strong:   var(--theme-brand-strong);
  --color-brand-soft:     var(--theme-brand-soft);
  --color-accent:         var(--theme-accent);
  --color-accent-strong:  var(--theme-accent-strong);
  --color-accent-soft:    var(--theme-accent-soft);

  --color-bg:             var(--theme-bg);
  --color-surface:        var(--theme-surface);
  --color-surface-2:      var(--theme-surface-2);
  --color-text:           var(--theme-text);
  --color-text-soft:      var(--theme-text-soft);
  --color-muted:          var(--theme-muted);
  --color-border:         var(--theme-border);
  --color-link:           var(--theme-link);

  /* Fixed white for text/marks that always sit on brand/accent fills.        */
  --color-on-brand:       #ffffff;

  /* --- Typography families → theme (display/body may swap per market) ------ */
  --font-display:         var(--theme-font-display);
  --font-body:            var(--theme-font-body);
  --font-mono:            ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Type scale (invariant) --------------------------------------------- */
  --text-xs:    0.78rem;
  --text-sm:    0.875rem;
  --text-base:  1.0625rem;   /* 17px reading size */
  --text-lg:    1.2rem;
  --text-xl:    1.4rem;
  --text-2xl:   clamp(1.55rem, 1.2rem + 1.6vw, 2rem);
  --text-3xl:   clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);
  --text-4xl:   clamp(2.3rem, 1.5rem + 3.6vw, 3.4rem);

  --leading-body:   1.72;
  --leading-snug:   1.32;
  --leading-tight:  1.08;
  --tracking-tight: -0.018em;

  --measure:    68ch;        /* ideal long-form line length (~65–75ch) */

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

  /* --- Radii (invariant) -------------------------------------------------- */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    18px;
  --radius-pill:  999px;

  /* --- Elevation (invariant) ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20,30,25,.06), 0 1px 3px rgba(20,30,25,.05);
  --shadow-md: 0 4px 14px rgba(20,30,25,.08);
  --shadow-lg: 0 18px 48px rgba(20,30,25,.14);

  /* --- Layout (invariant) ------------------------------------------------- */
  --container:    1200px;
  --focus-ring:   3px solid var(--color-brand);
}