/* ──────────────────────────────────────────────────────────────── QUANT WHAL3 · Design tokens v1.1 · 2026-05-27 Drop-in :root block. Single source of truth for all UI surfaces. ──────────────────────────────────────────────────────────────── */ @font-face { font-family: "SF Mono"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/SF-Mono-Light.otf") format("opentype"); } @font-face { font-family: "SF Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/SF-Mono-Regular.otf") format("opentype"); } @font-face { font-family: "SF Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/SF-Mono-Bold.otf") format("opentype"); } :root { /* ── Surfaces ─────────────────────────────────────────────── */ --canvas: #FAFBFC; /* app background */ --paper: #F3F5F8; /* subtle panel */ --surface: #FFFFFF; /* card */ --surface-alt: #F6F7F9; /* nested row / alt stripe */ /* ── Ink ramp ─────────────────────────────────────────────── */ --ink-900: #0B0D12; /* display / strong */ --ink-700: #2B2F3A; /* body */ --ink-500: #5B6272; /* secondary */ --ink-400: #8A90A6; /* tertiary / muted */ --ink-300: #B6BAC6; /* hairline labels */ --hairline: #E6E8ED; /* borders */ /* ── Semantic (desaturated; accent still wins) ───────────── */ --pos: #1F9D55; --neg: #C83232; --warn: #B8801F; --info: #1F6FEB; --pos-fill: rgba(31, 157, 85, 0.10); --neg-fill: rgba(200, 50, 50, 0.10); --warn-fill: rgba(184, 128, 31, 0.12); --info-fill: rgba(31, 111, 235, 0.10); /* ── Accent — the one bold color ─────────────────────────── */ --signal: #E8622C; --signal-soft: rgba(232, 98, 44, 0.10); /* ── Typography ──────────────────────────────────────────── */ --font-mono: "SF Mono", ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace; --fs-display: 2.25rem; /* 36 px — hero numbers */ --fs-h1: 1.625rem; /* 26 px — section title */ --fs-h2: 1.125rem; /* 18 px — block title */ --fs-body: 0.9375rem; /* 15 px */ --fs-meta: 0.8125rem; /* 13 px */ --fs-kicker: 0.6875rem; /* 11 px — uppercase labels */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.45; --tracking-kicker: 0.08em; --tracking-meta: 0.02em; /* ── Spacing (4-pt grid) ─────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Radius ──────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ── Borders ─────────────────────────────────────────────── */ --bw-hair: 1px; --bw-thick: 2px; /* ── Elevation (flat by default) ─────────────────────────── */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(11, 13, 18, 0.04), 0 1px 2px rgba(11, 13, 18, 0.04); --shadow-2: 0 1px 0 rgba(11, 13, 18, 0.04), 0 4px 12px rgba(11, 13, 18, 0.06); /* ── Motion ──────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ──────────────────────────────────────────────────────────────── DARK MODE — Zed One Dark adjacent (no pure black) Applies when [data-theme="dark"] is set on or any container. Reuses existing ink ramp; introduces 4 derived dark surface hexes. ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Dark surfaces */ --canvas: #21242C; /* Zed-bg adjacent · app background */ --paper: #1A1D24; /* deepest recess · sidebar / panel */ --surface: #2B2F3A; /* = light --ink-700 (REUSE) */ --surface-alt: #353945; /* alt row / nested */ --hairline: #3D414D; /* borders on dark */ /* Ink ramp flipped — existing tokens reused as text colors */ --ink-900: #FAFBFC; /* = light --canvas */ --ink-700: #E6E8ED; /* = light --hairline */ --ink-500: #B6BAC6; /* = light --ink-300 */ --ink-400: #8A90A6; /* = light --ink-400 (identical) */ --ink-300: #5B6272; /* = light --ink-500 */ /* Semantic fills bump 8-12% → 14-18% for legibility on dark */ --pos-fill: rgba(31, 157, 85, 0.16); --neg-fill: rgba(200, 50, 50, 0.18); --warn-fill: rgba(184, 128, 31, 0.18); --info-fill: rgba(31, 111, 235, 0.16); --signal-soft: rgba(232, 98, 44, 0.16); /* Elevation softens; borders carry the work on dark */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.45); } /* Honor OS preference by default. User toggle can still override by setting data-theme="light" or data-theme="dark" explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #21242C; --paper: #1A1D24; --surface: #2B2F3A; --surface-alt: #353945; --hairline: #3D414D; --ink-900: #FAFBFC; --ink-700: #E6E8ED; --ink-500: #B6BAC6; --ink-400: #8A90A6; --ink-300: #5B6272; --pos-fill: rgba(31, 157, 85, 0.16); --neg-fill: rgba(200, 50, 50, 0.18); --warn-fill: rgba(184, 128, 31, 0.18); --info-fill: rgba(31, 111, 235, 0.16); --signal-soft: rgba(232, 98, 44, 0.16); --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.45); } } /* Data-theme hook for full-bleed accent surfaces. Note: data-theme="signal" and data-theme="dark" are independent attribute values — they don't conflict. */ [data-theme="signal"] { background: var(--signal); color: #ffffff; } /* Sensible defaults — opt-in by linking this file */ html, body { background: var(--canvas); color: var(--ink-700); font-family: var(--font-mono); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .tabular { font-variant-numeric: tabular-nums; }