/* ============================================================ Design tokens — Phase 1 of the "Bloomberg Terminal × stylized CLI" redesign. OKLCH values are role-named (surface, border, text, accent, positive, negative) rather than colour-named (gray-800, etc.) so that: 1. The same tokens flow into tailwind.config.js as Tailwind utility colours AND into main.css / inline styles as CSS custom properties — single source of truth. 2. When phase 4-5 migrates per-page markup from the legacy `bg-dark-800` style to `bg-surface-panel`, the resolved colour is identical so the diff is mechanical and the visual delta per PR is minimal. See PR description + the design system spec for the full rationale (cardinal red accent, 12-token palette, ≤4px radius). ============================================================ */ :root { /* ─── Surfaces ───────────────────────────────────────────── True-black OLED canvas with panels lifted clearly off it so they read as floating, lit surfaces (not a flat grey wash). The canvas is pure black; panels jump to 0.165 and carry a top light-line + soft drop shadow (see main.css) so the elevation is felt, not just implied by a hairline. A touch more chroma at 264° keeps the darks "considered", never muddy. */ --surface-bg: oklch(0 0 0); /* canvas — pure OLED black */ --surface-panel: oklch(0.165 0.007 264); /* panels, modals */ --surface-elevated: oklch(0.215 0.009 264); /* hovered row, active */ /* ─── Borders ───────────────────────────────────────────── Hairlines, now a touch brighter so card edges stay crisp against pure black instead of dissolving into it. */ --border-subtle: oklch(0.310 0.010 264); /* 1px dividers */ --border-strong: oklch(0.470 0.014 264); /* focus, active */ /* ─── Text ──────────────────────────────────────────────── Four levels — primary→faint. Brighter overall for more punch on the black canvas: most cells are `secondary`, headings + important numbers are `primary`, tiny eyebrow labels `muted`. `faint` bumped 0.470→0.530: at 0.470 it was 2.6–3.1:1 against panels (below WCAG minimum) while being used ~425×, including on money numbers. */ --text-primary: oklch(0.985 0.004 264); --text-secondary: oklch(0.800 0.009 264); --text-muted: oklch(0.620 0.012 264); --text-faint: oklch(0.530 0.012 264); /* ─── Accent ────────────────────────────────────────────── Ember orange — Charizard flame, on-brand for poké*zard*. Used for primary actions + active state. Moved off red (was hue 28°, 3° from --negative at 25°, which made every primary button read as "destructive"). At hue 52° it's now clearly distinct from negative red, and warm enough to feel like the brand's fire without shouting. Pure red is reserved strictly for --negative / destructive. ONE accent per viewport. */ --accent: oklch(0.700 0.195 52); --accent-hover: oklch(0.745 0.190 54); /* Foreground for text/icons ON the ember fill. Bright ember + white text fails contrast, so filled accent surfaces use this near-black warm ink (passes AA, and the dark-core-on-flame look is more on-brand than washed-out white). */ --accent-ink: oklch(0.200 0.020 52); /* ─── Semantic state ────────────────────────────────────── Gains/losses. Negative sits at 25° (warm) so it composes with the accent without clashing — if both appear in the same row it reads as a continuum, not a collision. */ --positive: oklch(0.800 0.185 150); --negative: oklch(0.665 0.210 25); /* ─── Warning ───────────────────────────────────────────── Amber caution state. Hue 85 keeps it clearly distinct from both the cardinal accent (28°) and positive green (145°), so a "needs attention but not an error" row reads as its own thing. Replaces the old yellow-400/orange-500 zoo. */ --warning: oklch(0.825 0.170 85); /* ─── Info ──────────────────────────────────────────────── Cool azure for informational / neutral-interactive surfaces (secondary buttons, links, categorical swatches, chart legends). Kept separate from the cardinal `accent` so the accent stays rare and meaningful — info carries the everyday blue that the legacy markup leaned on heavily. */ --info: oklch(0.720 0.155 250); /* ─── Radius ────────────────────────────────────────────── Three values, all ≤ 4px. Tailwind utilities `rounded-none / rounded-sm / rounded` consume these via the config alias. */ --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; /* ─── Motion ────────────────────────────────────────────── One easing curve, applied via tailwind.config's transitionTimingFunction.DEFAULT — every transition in the app uses it. */ --ease: cubic-bezier(0.3, 0, 0.1, 1); /* ─── Elevation & light ─────────────────────────────────── On a true-black canvas, hairlines alone make panels feel painted-on. These give surfaces real depth: a 1px top light-line (as if lit from above) + a soft drop shadow that separates the panel from the void below. `--elev-panel` is applied to every `.bg-surface-panel` in main.css; the modal variant goes deeper for the floating layers. */ --elev-panel: inset 0 1px 0 0 oklch(1 0 0 / 0.07), 0 1px 2px 0 oklch(0 0 0 / 0.7), 0 8px 28px -6px oklch(0 0 0 / 0.7); --elev-panel-hover: inset 0 1px 0 0 oklch(1 0 0 / 0.10), 0 2px 4px 0 oklch(0 0 0 / 0.7), 0 14px 40px -8px oklch(0 0 0 / 0.8), 0 0 0 1px oklch(0.700 0.195 52 / 0.10); --elev-modal: inset 0 1px 0 0 oklch(1 0 0 / 0.09), 0 0 0 1px oklch(0.700 0.195 52 / 0.08), 0 16px 60px -10px oklch(0 0 0 / 0.9); /* Coloured glows — the "this is alive" cues: primary ember button, focused fields, the active nav row, value chips. Pushed brighter/wider for a bolder, more electric feel. */ --glow-accent: 0 0 0 1px oklch(0.745 0.195 52 / 0.55), 0 0 18px -2px oklch(0.700 0.195 52 / 0.65), 0 2px 10px -2px oklch(0 0 0 / 0.5); --glow-accent-strong: 0 0 0 1px oklch(0.760 0.190 54 / 0.7), 0 0 28px -2px oklch(0.700 0.195 52 / 0.85); --glow-focus: 0 0 0 1px oklch(0.745 0.195 52 / 0.6), 0 0 16px -1px oklch(0.700 0.195 52 / 0.5); --glow-positive: 0 0 18px -3px oklch(0.800 0.185 150 / 0.6); --glow-negative: 0 0 18px -3px oklch(0.665 0.210 25 / 0.6); /* ─── Typography ────────────────────────────────────────── Hybrid system: Inter Tight (sans) is the default UI face — titles, labels, prose, buttons — so the interface reads warm and humanist instead of blocky. JetBrains Mono is reserved for DATA: numbers, prices, table cells, identifiers, eyebrow labels — where its fixed width gives perfect column alignment and the "terminal" feel. The mono face is applied via the data role classes + `.font-mono` in main.css. */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }