/* ============================================================ The Market Terminal — v3 design tokens (single source of truth) Editorial light paper + two accents (warm/cool) + serif/sans/mono. OKLch color space for perceptual uniformity across light/dark. Apply theme on : data-theme="light" | data-theme="dark" data-density="comfy" | data-density="compact" Density modifiers live with component CSS (chrome.css and friends), not here — only the foundation tokens belong in this file. ============================================================ */ :root, [data-theme="light"] { --paper: oklch(0.985 0.004 85); /* cream page */ --paper-1: oklch(0.975 0.005 85); --paper-2: oklch(0.955 0.006 85); --paper-3: oklch(0.930 0.008 85); --card: oklch(1 0 0); --card-2: oklch(0.982 0.004 85); --ink: oklch(0.18 0.012 270); /* body ink */ --ink-1: oklch(0.30 0.010 270); --ink-2: oklch(0.46 0.008 270); --ink-3: oklch(0.60 0.008 270); --ink-4: oklch(0.72 0.006 270); --rule: oklch(0.88 0.006 270); --rule-soft: oklch(0.93 0.005 270); --rule-strong: oklch(0.68 0.010 270); /* Up/down — muted, editorial; not neon */ --up: oklch(0.54 0.14 152); --up-soft: oklch(0.54 0.14 152 / 0.12); --up-bg: oklch(0.94 0.04 152); --down: oklch(0.54 0.18 28); --down-soft: oklch(0.54 0.18 28 / 0.12); --down-bg: oklch(0.95 0.05 28); --neutral: oklch(0.55 0.010 270); /* Two editorial accents — warm (primary) + cool (secondary) */ --warm: oklch(0.52 0.14 45); /* terracotta / ink red-brown */ --warm-soft: oklch(0.52 0.14 45 / 0.10); --warm-bg: oklch(0.94 0.04 45); --cool: oklch(0.42 0.10 235); /* navy ink blue */ --cool-soft: oklch(0.42 0.10 235 / 0.10); --cool-bg: oklch(0.94 0.03 235); --shadow-card: 0 1px 2px oklch(0 0 0 / 0.04); --shadow-lift: 0 12px 40px oklch(0 0 0 / 0.12); --radius: 4px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: "Source Serif 4", "Source Serif Pro", "Charter", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light; } [data-theme="dark"] { --paper: oklch(0.155 0.008 270); --paper-1: oklch(0.180 0.009 270); --paper-2: oklch(0.210 0.010 270); --paper-3: oklch(0.250 0.010 270); --card: oklch(0.200 0.010 270); --card-2: oklch(0.220 0.011 270); --ink: oklch(0.97 0.004 85); --ink-1: oklch(0.84 0.006 85); --ink-2: oklch(0.64 0.008 85); --ink-3: oklch(0.48 0.008 85); --ink-4: oklch(0.36 0.008 85); --rule: oklch(0.30 0.010 270); --rule-soft: oklch(0.24 0.010 270); --rule-strong: oklch(0.45 0.012 270); --up: oklch(0.78 0.16 152); --up-soft: oklch(0.78 0.16 152 / 0.15); --up-bg: oklch(0.25 0.06 152); --down: oklch(0.72 0.18 28); --down-soft: oklch(0.72 0.18 28 / 0.15); --down-bg: oklch(0.26 0.07 28); --warm: oklch(0.75 0.13 45); --warm-soft: oklch(0.75 0.13 45 / 0.13); --warm-bg: oklch(0.26 0.05 45); --cool: oklch(0.72 0.11 235); --cool-soft: oklch(0.72 0.11 235 / 0.13); --cool-bg: oklch(0.22 0.04 235); --shadow-card: 0 1px 2px oklch(0 0 0 / 0.25), 0 0 0 1px oklch(0.30 0.010 270); --shadow-lift: 0 16px 56px oklch(0 0 0 / 0.45); color-scheme: dark; } /* ===== Universal base (mirrors src/v3/styles.jsx) ===== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; background: none; border: 0; outline: 0; } h1, h2, h3, h4, h5 { margin: 0; } /* ===== Typography utilities ===== */ .serif { font-family: var(--serif); } .mono { font-family: var(--mono); font-feature-settings: "ss01","zero","calt"; } .tabnum { font-variant-numeric: tabular-nums; font-family: var(--mono); } /* ===== Direction utilities ===== */ .up { color: var(--up); } .down { color: var(--down); } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 10px; border: 2px solid var(--paper); } ::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); } /* ============================================================ Legacy compat aliases — map old token names to v3 tokens. Lets legacy pages inherit the new theme without rewriting every inline style="--text-white" or "--accent-primary" reference. These resolve dynamically, so light/dark switching still works. Phase 2 will rewrite per-page inline styles to use native v3 tokens directly; once a wave is fully rewritten, we'll drop the corresponding aliases. ============================================================ */ :root, [data-theme="light"], [data-theme="dark"] { /* Backgrounds */ --bg-primary: var(--paper); --bg-secondary: var(--paper-1); --bg-tertiary: var(--paper-2); --bg-surface-1: var(--card); --bg-surface-2: var(--paper-1); --bg-surface-3: var(--paper-2); --bg-elevated: var(--card); /* Text */ --text-white: var(--ink); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-4); /* Borders */ --border-primary: var(--rule); --border-secondary: var(--rule-soft); --border-highlight: var(--rule-strong); /* Accents — old green primary maps to warm terracotta */ --accent-primary: var(--warm); --accent-secondary: var(--cool); --accent-tertiary: var(--warm-soft); /* States */ --success: var(--up); --danger: var(--down); }