/* ============================================================ narratrak · tokens.css · v0.1 Drop into your global CSS. Both directions live here — flip the `data-theme` attribute on to swap. Default = Operator (light). ============================================================ */ :root, [data-theme="operator"] { /* ---------- Surface ---------- */ --bg: #fafaf9; --panel: #ffffff; --raised: #f3f1ee; --line: #e7e5e2; --line-strong: #e0ddd8; /* ---------- Text ---------- */ --ink: #15151a; --dim: #6b6b66; --faint: #a8a39b; --on-accent: #ffffff; /* ---------- Semantic accent ---------- */ --accent: #d9461a; /* ember — primary CTA, active monitor */ --accent-hover: #bc3b14; --accent-soft: #fdece4; --accent-ink: #a8330e; --hot: #d9461a; --hot-soft: #fdece4; --hot-ink: #a8330e; --hot-line: #fad6c2; --relevant: #2563eb; --relevant-soft:#e7efff; --relevant-ink: #1f47b3; --relevant-line:#cddaf7; --latest: #4a4a45; --latest-soft: #f3f1ee; --latest-line: #e0ddd8; --ok: #16a34a; --ok-soft: #e3f5e8; --ok-ink: #137333; --ok-line: #bfe3c8; --danger: #d9461a; /* ---------- Type ---------- */ --font-ui: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-display: 38px; --t-display-lh: 1.05; --t-display-ls: -0.022em; --t-h1: 30px; --t-h1-lh: 1.1; --t-h1-ls: -0.02em; --t-h2: 22px; --t-h2-lh: 1.2; --t-h2-ls: -0.01em; --t-h3: 16px; --t-h3-lh: 1.3; --t-h3-ls: -0.005em; --t-body: 14px; --t-body-lh: 1.45; --t-meta: 12px; --t-meta-lh: 1.5; --t-data: 13px; --t-data-lh: 1.4; --t-label: 11px; --t-label-lh: 1.4; --t-label-ls: 0.1em; /* ---------- Space (4px scale) ---------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ---------- Radius ---------- */ --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-full: 999px; /* ---------- Elevation ---------- */ --shadow-1: 0 1px 0 rgba(20,20,20,.02); --shadow-2: 0 4px 12px -4px rgba(20,20,20,.06); --shadow-3: 0 12px 32px -16px rgba(20,20,20,.18); --ring: 0 0 0 3px rgba(21,21,26,.08); /* ---------- Density ---------- */ --row-h: 44px; --nav-h: 56px; --field-h: 38px; /* ---------- Motion ---------- */ --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(.2,.7,.2,1); } /* ============================================================ Direction A · Terminal (dark, trader-terminal) Activate with: ============================================================ */ [data-theme="terminal"] { /* surface */ --bg: #0b0c0e; --panel: #14161a; --raised: #1c1f24; --line: #232830; --line-strong: #2c323c; /* text */ --ink: #e6e7ea; --dim: #8a8f99; --faint: #5a5e66; --on-accent: #0b0c0e; /* accent */ --accent: #f0a020; /* amber */ --accent-hover: #fbb13a; --accent-soft: #2a200a; --accent-ink: #f0a020; --hot: #ff5c4d; --hot-soft: #2a1110; --hot-ink: #ff5c4d; --hot-line: #ff5c4d; --relevant: #4aa3ff; --relevant-soft:#0e1a2a; --relevant-ink: #4aa3ff; --relevant-line:#4aa3ff; --latest: #8a8f99; --latest-soft: #14161a; --latest-line: #232830; --ok: #4ade80; --ok-soft: #0d1f14; --ok-ink: #4ade80; --ok-line: #4ade80; --danger: #ff5c4d; /* type */ --font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* radius — sharper */ --r-1: 0; --r-2: 2px; --r-3: 4px; /* elevation — flat, no shadows */ --shadow-1: none; --shadow-2: none; --shadow-3: 0 12px 32px -16px rgba(0,0,0,.6); --ring: 0 0 0 1px var(--accent); /* density — tighter */ --row-h: 32px; --nav-h: 44px; --field-h: 34px; } /* ============================================================ Recipes — small helpers built from tokens. Optional; use directly or copy patterns into your components. ============================================================ */ .t-display { font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); font-weight: 600; } .t-h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: 600; } .t-h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: 600; } .t-h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: 600; } .t-body { font-size: var(--t-body); line-height: var(--t-body-lh); } .t-meta { font-size: var(--t-meta); line-height: var(--t-meta-lh); color: var(--dim); } .t-data { font-family: var(--font-mono); font-size: var(--t-data); font-variant-numeric: tabular-nums; } .t-label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--dim); } .num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }