/* tokens.css — design tokens + theme definitions. * * One set of variable NAMES, two themes. Components reference only these * tokens (never raw hex), so a new theme is a new [data-theme] block here * and nothing else changes. Default theme is light (set on ). */ :root { /* shape + spacing — theme-independent */ --radius: 12px; --radius-sm: 8px; --radius-pill: 20px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ─── Light (default) ─────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f4f6fa; --panel: #ffffff; --panel-2: #eef2f7; /* inset surfaces: inputs, lineup cards */ --line: #dce3ec; --txt: #1a2333; --dim: #5b6b83; --acc: #16a34a; /* deeper green — readable on white */ --acc-txt: #ffffff; /* text on accent buttons */ --warn: #b45309; --bad: #dc2626; --blue: #2563eb; --lev-pos: #15803d; --lev-neg: #dc2626; --row-hover: rgba(37, 99, 235, 0.06); --tag-ok-bg: rgba(22, 163, 74, 0.12); --tag-warn-bg: rgba(180, 83, 9, 0.12); --tag-info-bg: rgba(37, 99, 235, 0.12); --diff-bg: rgba(180, 83, 9, 0.08); --diff-line: rgba(180, 83, 9, 0.35); --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); } /* ─── Dark (softened from the original cave-dark) ─────────────────────── */ [data-theme="dark"] { --bg: #131a29; --panel: #1b2436; --panel-2: #151d2e; --line: #2a3547; --txt: #dce4f2; --dim: #8b9bb8; --acc: #22c55e; --acc-txt: #04220f; --warn: #f59e0b; --bad: #ef4444; --blue: #3b82f6; --lev-pos: #22c55e; --lev-neg: #ef4444; --row-hover: rgba(59, 130, 246, 0.08); --tag-ok-bg: rgba(34, 197, 94, 0.15); --tag-warn-bg: rgba(245, 158, 11, 0.15); --tag-info-bg: rgba(59, 130, 246, 0.15); --diff-bg: rgba(245, 158, 11, 0.10); --diff-line: rgba(245, 158, 11, 0.40); --shadow: none; }