/* ───────────────────────────────────────────────────────────── Design tokens — Sneat-calibrated (light default), GSL red brand. Every colour in the app references one of these variables — switching [data-theme] on swaps everything. Light palette lifted from Sneat's grey scale (#f5f5f9 canvas, #384551 headings, #646e78 body); dark is its dark-pro cousin. ───────────────────────────────────────────────────────────── */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/open-sans-var.woff2') format('woff2'); } :root { /* Brand — GSL red */ --brand: #d32f2f; --brand-strong: #b71c1c; --brand-soft: rgba(211, 47, 47, 0.10); /* 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: 248px; --topbar-h: 58px; --radius: 10px; /* cards */ --radius-sm: 6px; /* inputs, buttons, small chrome */ --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; /* Sneat's card shadows — soft, slightly blue-grey, no hard borders */ --shadow-1: 0 2px 6px 0 rgba(67, 89, 113, 0.12); --shadow-2: 0 6px 20px 0 rgba(67, 89, 113, 0.18); } /* Light theme (default) */ :root, [data-theme="light"] { --bg: #f5f5f9; --surface: #ffffff; --surface-2: #fbfbfb; --surface-3: #f2f3f3; --border: #e4e6e8; --border-strong: #bdc1c5; --text: #384551; --text-2: #646e78; --text-3: #91979f; --sidebar-bg: #ffffff; --sidebar-text: #646e78; --sidebar-text-active: #d32f2f; --sidebar-hover: rgba(56, 69, 81, 0.04); --sidebar-active: rgba(211, 47, 47, 0.08); --green-soft: #e8f8ee; --green-text: #137036; --amber-soft: #fdf1de; --amber-text: #9a4607; --red-soft: #fce9e9; --red-text: #b91c1c; --blue-soft: #e7effd; --blue-text: #1d4ed8; --violet-soft: #f0e9fc; --violet-text: #6d28d9; --teal-soft: #e2f5f2; --teal-text: #0c6b62; --pink-soft: #fce9f2; --pink-text: #be185d; --slate-soft: #eef1f5; --slate-text: #475569; --grey-soft: #eeeef0; --grey-text: #52525b; --weekend-tint: #fafafd; } /* Dark theme — neutral black/grey, no blue or purple tint */ [data-theme="dark"] { --bg: #161616; --surface: #1e1e1e; --surface-2: #242424; --surface-3: #2b2b2b; --border: #383838; --border-strong: #4a4a4a; --text: #e5e5e5; --text-2: #a3a3a3; --text-3: #767676; --sidebar-bg: #1a1a1a; --sidebar-text: #a3a3a3; --sidebar-text-active: #ff7d7d; --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-active: rgba(211, 47, 47, 0.22); --green-soft: rgba(22, 163, 74, 0.22); --green-text: #6ce69a; --amber-soft: rgba(230, 126, 10, 0.22); --amber-text: #fcc23c; --red-soft: rgba(220, 38, 38, 0.22); --red-text: #fb8a8a; --blue-soft: rgba(37, 99, 235, 0.24); --blue-text: #9dbcfa; --violet-soft: rgba(124, 58, 237, 0.24);--violet-text: #cbbcfd; --teal-soft: rgba(13, 148, 136, 0.24); --teal-text: #6cf2dd; --pink-soft: rgba(219, 39, 119, 0.24); --pink-text: #f9a4cd; --slate-soft: rgba(100, 116, 139, 0.22);--slate-text: #b6c0d2; --grey-soft: rgba(160, 160, 160, 0.16); --grey-text: #b8b8b8; --weekend-tint: rgba(255, 255, 255, 0.02); --shadow-1: 0 2px 6px 0 rgba(0, 0, 0, 0.45); --shadow-2: 0 6px 20px 0 rgba(0, 0, 0, 0.55); }