/* ========================================================================= Coder B · Changelog — Design Tokens (Direction A · Timeline) Vanilla CSS custom properties. Light + dark are toggled via a data-theme attribute on (or a [data-theme="dark"] container). Accent is the Coder B orange by default; alternates are exposed for completeness — flip --accent / --accent-bg / --accent-border together. ========================================================================= */ /* Light (default) */ :root, :root[data-theme="light"] { /* Surfaces */ --bg: #faf9f6; /* page background (warm-neutral) */ --surface: #ffffff; /* cards, top bar, table rows */ --surface-2: #f3f1ec; /* subtle elevation / hover / table head */ --elev: #ffffff; /* highest surface (modals, popovers) */ /* Text */ --text: #16181d; /* primary body */ --muted: #5d6470; /* secondary, meta, labels */ --faint: #9aa0ac; /* tertiary, captions, dividers' labels */ /* Lines */ --border: #e6e3dc; /* default borders */ --border-2: #d6d2c8; /* stronger / scroll thumb */ /* Brand accent — Coder B orange */ --accent: oklch(60% 0.16 42); /* approx #ea5a1c */ --accent-bg: color-mix(in oklab, var(--accent) 14%, transparent); --accent-border: color-mix(in oklab, var(--accent) 35%, transparent); /* Semantic — used for section chips and status dots */ --add: oklch(48% 0.14 145); /* approx #1a7a3e */ --fix: oklch(55% 0.13 75); /* approx #a3711a */ --break: oklch(52% 0.18 25); /* approx #c63e2f */ --info: oklch(50% 0.10 230); /* approx #2d6da3 */ /* Type */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px; /* Spacing scale (informational — use directly or as design rhythm) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Layout */ --topbar-height: 56px; --rail-width: 230px; --reader-max: 880px; /* main column max width on reader page */ --activity-rail: 280px; } /* Dark */ :root[data-theme="dark"] { --bg: #0c0f14; --surface: #11151c; --surface-2: #161b24; --elev: #1c222d; --text: #e6edf3; --muted: #8b95a5; --faint: #5a6473; --border: #222a36; --border-2: #2c3441; --accent: oklch(70% 0.16 42); /* lighter in dark */ --accent-bg: color-mix(in oklab, var(--accent) 18%, transparent); --accent-border: color-mix(in oklab, var(--accent) 45%, transparent); --add: oklch(70% 0.14 145); --fix: oklch(72% 0.13 75); --break: oklch(68% 0.18 25); --info: oklch(70% 0.10 230); } /* Auto — respect OS preference when no explicit data-theme set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0c0f14; --surface: #11151c; --surface-2: #161b24; --elev: #1c222d; --text: #e6edf3; --muted: #8b95a5; --faint: #5a6473; --border: #222a36; --border-2: #2c3441; --accent: oklch(70% 0.16 42); --accent-bg: color-mix(in oklab, var(--accent) 18%, transparent); --accent-border: color-mix(in oklab, var(--accent) 45%, transparent); --add: oklch(70% 0.14 145); --fix: oklch(72% 0.13 75); --break: oklch(68% 0.18 25); --info: oklch(70% 0.10 230); } } /* ------------------------------------------------------------------------- Optional accent variants — apply via [data-accent="blue|green|mono"] ------------------------------------------------------------------------- */ :root[data-accent="blue"] { --accent: oklch(60% 0.13 245); } :root[data-accent="green"] { --accent: oklch(60% 0.12 150); } :root[data-accent="mono"] { --accent: oklch(22% 0 0); } :root[data-theme="dark"][data-accent="blue"] { --accent: oklch(70% 0.13 245); } :root[data-theme="dark"][data-accent="green"] { --accent: oklch(70% 0.12 150); } :root[data-theme="dark"][data-accent="mono"] { --accent: oklch(92% 0 0); } /* When --accent changes, --accent-bg and --accent-border auto-derive via color-mix(). */