/* tokens.css - Terminal Ledger design tokens
   Source: docs/design/tokens.md §5 "Ready-to-paste :root block", transcribed
   verbatim from design/dps-visual-system.dc.html (Artboard 05 token sheet).
   Amendments applied per task-1-brief.md are called out inline below. */

:root {
  /* ---- color · surfaces (dark-first; there is no light mode) ---- */
  --bg:            oklch(0.17 0.012 250);  /* app background, input wells */
  --surface-1:     oklch(0.20 0.012 250);  /* cards */
  --surface-2:     oklch(0.24 0.012 250);  /* raised: controls, featured card */
  --surface-3:     oklch(0.27 0.012 250);  /* control hover, selected segment */
  --surface-modal: oklch(0.22 0.012 250);  /* modal/bottom-sheet + card hover */
  --dock-bg:       oklch(0.20 0.012 250 / 0.94); /* + backdrop-filter: blur(12px) */
  --scrim:         rgba(8, 10, 14, 0.62);        /* + backdrop-filter: blur(3px) */

  /* ---- color · text ---- */
  --text-1:        oklch(0.92 0.01 250);   /* primary - never pure white */
  --text-2:        oklch(0.72 0.015 250);  /* secondary */
  --text-3:        oklch(0.62 0.015 250);  /* muted / captions - not on surface-2 */
  --text-faint:    oklch(0.55 0.012 250);  /* placeholder, fine print, disabled text */

  /* ---- color · accent + signal ---- */
  --accent:        oklch(0.85 0.19 130);   /* lime: ticker, primary CTA, focus. Nothing else */
  --accent-hover:  oklch(0.89 0.19 130);
  --on-accent:     oklch(0.17 0.03 130);   /* ink on lime buttons */
  --burn:          oklch(0.63 0.21 25);    /* accelerating-cost cue only; large/bold text */
  --burn-border:   oklch(0.63 0.21 25 / 0.35);

  /* ---- color · hairlines (always 1px) ---- */
  --hairline:        rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.16);
  --hairline-frame:  rgba(255,255,255,0.12); /* screen/ad/figure frames */
  --hairline-ghost:  rgba(255,255,255,0.22); /* ghost buttons, drag handle */
  --bar-track:       rgba(255,255,255,0.08);
  --bar-fill:        rgba(255,255,255,0.32); /* ladder bars */
  --progress-fill:   rgba(255,255,255,0.45); /* reading progress - white, never lime */
  --link-underline:  rgba(255,255,255,0.3);

  /* ---- type ---- */
  --font-sans:  'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, monospace;   /* every numeral, all caps labels */
  --font-serif: 'Fraunces', Georgia, serif;              /* editorial only; never numerals */

  /* Aliased to --ticker-size (backlog 12): this token used to carry its own
     clamp() with the stale 2.5rem floor, while the committed decision is the
     3rem floor below. One definition now, so the old floor cannot resurface. */
  --text-ticker:       var(--ticker-size);               /* mono 600, lh 1, -0.02em, tabular-nums */
  --text-stat:         24px;   /* mono 600 / 1.2 · 18px mobile */
  --text-price:        40px;   /* mono 600 / 1 · 36px mobile */
  --text-h1-product:   clamp(28px, 2.4vw, 34px);         /* sans 600, -0.015em */
  --text-h1-editorial: clamp(32px, 3.2vw, 46px);         /* serif 600 / 1.08, -0.015em */
  --text-h2-editorial: 29px;   /* serif 600 / 1.2, -0.01em · 24px mobile */
  --text-h3:           24px;   /* sans 600 / 1.25, -0.01em · 22px mobile */
  --text-quote:        29px;   /* serif 500 italic / 1.35 · 23px mobile */
  --text-deck:         20px;   /* sans 400 / 1.55 */
  --text-body-article: 19px;   /* sans 400 / 1.75 · 18px mobile · 66ch measure */
  --text-body-ui:      15px;   /* sans 400–500 / 1.6 */
  --text-body-sm:      14px;
  --text-meta:         12px;   /* mono */
  --text-caption:      11px;   /* mono 400, +0.12em, uppercase · 10px mobile */

  --tracking-caps:    0.12em;
  --tracking-eyebrow: 0.14em;
  --tracking-ad:      0.16em;
  --tracking-tight:   -0.015em;
  --leading-body:     1.75;
  --leading-ui:       1.6;
  /* numerals: font-variant-numeric: tabular-nums (slashed-zero added globally below) */

  /* ---- space (8px base; 4/12 half-steps) ---- */
  --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;
  --gutter-desktop: 32px; --gutter-mobile: 16px;
  --container-max: 1376px; --measure: 66ch;

  /* ---- radii ---- */
  --radius-0: 0;         /* cards, frames - everything structural */
  --radius-control: 2px; /* buttons, inputs, chips - the only radius */

  /* ---- control heights ---- */
  --h-nav: 36px; --h-control: 40px; --h-cta: 44px; --h-control-mobile: 48px;
  --h-header: 64px; --h-header-mobile: 56px;

  /* ---- motion ---- */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1); /* the only easing */
  --dur-fast: 120ms;  /* hover, chips */
  --dur-std:  180ms;  /* panels, toggle, scrim fade */
  --dur-roll: 300ms;  /* ticker digits, ladder bars */
  --pulse:    dpsPulse 1s var(--ease) infinite; /* opacity 1 → 0.25 → 1 */

  /* ---- states ---- */
  --focus-ring: 2px solid var(--accent); /* outline-offset: 2px, :focus-visible only */
  --disabled-opacity: 0.32;

  /* ---- shadow (modal only; elevation is otherwise lightness) ---- */
  --shadow-modal: 0 40px 120px rgba(0,0,0,0.6);

  /* ==== Task 1 amendment 1: surfaces the token sheet's short-name aliases
     use downstream (theme.css / catalog.md / later tasks reference --s0.. --s3,
     --s15 directly). --s15 is the modal/hover surface; --s3 is control-hover. ==== */
  --s0:  var(--bg);
  --s1:  var(--surface-1);
  --s15: oklch(0.22 0.012 250); /* modal/hover surface */
  --s2:  var(--surface-2);
  --s3:  oklch(0.27 0.012 250);

  /* ==== Task 1 amendment 2: text-scale short aliases, plus --t4 which the
     token sheet only carried as --text-faint. placeholders + disabled ONLY -
     fails AA as visible text. ==== */
  --t1: var(--text-1);
  --t2: var(--text-2);
  --t3: var(--text-3);
  --t4: oklch(0.55 0.012 250); /* placeholders + disabled ONLY - fails AA as visible text */

  /* ==== remaining short aliases every later task styles against ==== */
  --ink-on-accent: var(--on-accent);
  --frame:         var(--hairline-frame);
  --ghost-border:  var(--hairline-ghost);
  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3);
  --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6);
  --sp-7: var(--space-7); --sp-8: var(--space-8); --sp-9: var(--space-9);
  --r:        var(--radius-control); /* 2px */
  --dur-med:  var(--dur-std);  /* 180ms */
  --dur-slow: var(--dur-roll); /* 300ms */

  /* ==== Task 1 amendment 3: ticker size, floor raised 2.5rem -> 3rem per the
     design file's own note (formula floors at 40px @ 390, shown at 48px). ==== */
  --ticker-size: clamp(3rem, 6vw + 1rem, 6rem);

  /* ==== Overnight wave 1 (2026-08-31), backlog 16: the "PREMIUM" plus-badge
     gradient was hardcoded emerald hex in index.html's inline <style>. Not a
     money color (lime stays reserved for ticker/CTA/focus per accent
     discipline), so it gets its own named token pair instead of reuse. ==== */
  --badge-plus-start: #10b981;
  --badge-plus-end:   #059669;
}

/* ==== narrow-phone header offset (2026-09-06) ====
   --h-header-mobile is not a decorative height, it is the space every page
   reserves under a position: fixed header (public/index.html
   .main-container, cost.css .cost-main, legacy-pages.css .tl-legacy-main
   and .tl-404-content, premium.html's wrapper: all read this token inside
   their own max-width: 768px block). At 600px and below theme.css wraps the
   nav to a second row and switches .tl-header from fixed to sticky, so the
   header sits in normal flow and pushes its own content down. Reserving a
   second header's worth of space on top of that would leave a gap the size
   of the bar, and no constant could be right anyway once the height depends
   on how the nav wraps. Zero here is the whole offset those pages need.
   Change this with the .tl-header block in theme.css, never on its own. */
@media (max-width: 600px) {
  :root { --h-header-mobile: 0px; }
}

@keyframes dpsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ==== Task 1 amendment 4 ==== */
body { font-variant-numeric: tabular-nums slashed-zero; }
a:hover { color: var(--t1); }                    /* NEVER lime - lime = money only */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; }
}