/* ───────────────────────────────────────────────────────────── 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 — GSL red */ --brand: #d32f2f; --brand-strong: #b71c1c; --brand-soft: rgba(211, 47, 47, 0.12); /* Status palette (theme-independent hues, theme-aware surfaces below) */ --green: #16a34a; --amber: #d97706; --red: #dc2626; --blue: #2563eb; --violet: #7c3aed; --teal: #0d9488; --pink: #db2777; --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: #f3f3f4; --surface: #ffffff; --surface-2: #f6f6f7; --surface-3: #ececed; --border: #e4e4e6; --border-strong: #d0d0d3; --text: #181818; --text-2: #5c5c61; --text-3: #919196; --sidebar-bg: #e7e7ea; --sidebar-text: #5c5c61; --sidebar-text-active: #181818; --sidebar-hover: rgba(0, 0, 0, 0.05); --sidebar-active: rgba(211, 47, 47, 0.10); --green-soft: #d3f1dd; --green-text: #137036; --amber-soft: #fde9c8; --amber-text: #9a4607; --red-soft: #fcdcdc; --red-text: #b91c1c; --blue-soft: #d9e6fc; --blue-text: #1d4ed8; --violet-soft: #e9defb; --violet-text: #6d28d9; --teal-soft: #ccefe9; --teal-text: #0c6b62; --pink-soft: #fcdcec; --pink-text: #be185d; --slate-soft: #e8ecf2; --slate-text: #475569; --grey-soft: #e4e4e7; --grey-text: #52525b; --weekend-tint: #f7f8fa; } /* Dark theme */ [data-theme="dark"] { --bg: #121212; --surface: #1d1d1f; --surface-2: #232325; --surface-3: #2a2a2d; --border: #2e2e31; --border-strong: #3d3d41; --text: #ededee; --text-2: #a9a9b0; --text-3: #74747b; --sidebar-bg: #0f0f0f; --sidebar-text: #a6a6ac; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: rgba(211, 47, 47, 0.26); --green-soft: rgba(22, 163, 74, 0.24); --green-text: #5cea91; --amber-soft: rgba(230, 126, 10, 0.24); --amber-text: #fcc23c; --red-soft: rgba(220, 38, 38, 0.24); --red-text: #fb8a8a; --blue-soft: rgba(37, 99, 235, 0.26); --blue-text: #9dbcfa; --violet-soft: rgba(124, 58, 237, 0.26);--violet-text: #cbbcfd; --teal-soft: rgba(13, 148, 136, 0.26); --teal-text: #6cf2dd; --pink-soft: rgba(219, 39, 119, 0.26); --pink-text: #f9a4cd; --slate-soft: rgba(100, 116, 139, 0.22);--slate-text: #b6c0d2; --grey-soft: rgba(160, 160, 170, 0.18); --grey-text: #b8b8bf; --weekend-tint: rgba(255, 255, 255, 0.02); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); }