/* 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 */ --text-ticker: clamp(2.5rem, 6vw + 1rem, 6rem); /* 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