/* * tokens.css — Design tokens. * * The single source of truth for the visual theme. Load FIRST. * * Theme switching: set `data-theme="dark"` on to activate the * dark palette. All other CSS files reference these tokens only. */ :root { color-scheme: light; --bg: #f6f7f9; --surface: #ffffff; --text: #1f2937; --text-muted: #6b7280; --border: #e5e7eb; --accent: #2f6df6; --accent-soft: #e8efff; --danger: #dc2626; --danger-soft: #fee2e2; --focus-ring: rgba(47, 109, 246, 0.35); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.18); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius: 10px; --app-bar-h: 56px; --timeline-night: #eef1f6; --surface-hover: #f0f1f3; --transition: 120ms; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1117; --surface: #1a1d24; --text: #e4e6ea; --text-muted: #8b929e; --border: #2a2d35; --accent: #4c8dff; --accent-soft: #1a2744; --danger: #f87171; --danger-soft: #2d1a1a; --focus-ring: rgba(76, 141, 255, 0.4); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.6); --timeline-night: #13151b; --surface-hover: #22262f; }