/* ───────────────────────────────────────────────────────────── Design tokens. Every colour in the app references one of these variables — switching [data-theme] on swaps everything. No per-element dark: classes, ever. ───────────────────────────────────────────────────────────── */ :root { /* Brand */ --brand: #4f7cff; --brand-strong: #3b63d9; --brand-soft: rgba(79, 124, 255, 0.12); /* Status palette (theme-independent hues, theme-aware surfaces below) */ --green: #16a34a; --amber: #d97706; --red: #dc2626; --blue: #2563eb; --violet: #7c3aed; --slate: #64748b; /* Layout metrics */ --sidebar-w: 216px; --topbar-h: 44px; --radius: 8px; --radius-sm: 6px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08); } /* Light theme */ :root, [data-theme="light"] { --bg: #f4f5f8; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef0f4; --border: #e3e6ec; --border-strong: #cdd2dc; --text: #1a2233; --text-2: #5b6577; --text-3: #9099aa; --sidebar-bg: #171c28; --sidebar-text: #aab2c5; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: rgba(79, 124, 255, 0.18); --green-soft: #e7f6ec; --green-text: #15803d; --amber-soft: #fdf2e3; --amber-text: #b45309; --red-soft: #fdeaea; --red-text: #b91c1c; --blue-soft: #e8effd; --blue-text: #1d4ed8; --violet-soft: #f1eafd; --violet-text: #6d28d9; --slate-soft: #eef1f5; --slate-text: #475569; } /* Dark theme */ [data-theme="dark"] { --bg: #11141b; --surface: #1a1f2a; --surface-2: #1f2531; --surface-3: #262d3b; --border: #2a3142; --border-strong: #3a4356; --text: #e6e9f0; --text-2: #a3acc0; --text-3: #6c7689; --sidebar-bg: #151923; --sidebar-text: #99a2b5; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-active: rgba(79, 124, 255, 0.22); --green-soft: rgba(22, 163, 74, 0.16); --green-text: #4ade80; --amber-soft: rgba(217, 119, 6, 0.16); --amber-text: #fbbf24; --red-soft: rgba(220, 38, 38, 0.16); --red-text: #f87171; --blue-soft: rgba(37, 99, 235, 0.16); --blue-text: #93b4f8; --violet-soft: rgba(124, 58, 237, 0.16);--violet-text: #c4b5fd; --slate-soft: rgba(100, 116, 139, 0.18);--slate-text: #b6c0d2; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); }