/* * LaunchRail Theme System * ────────────────────── * Semantic CSS custom properties for light and dark modes. * Change branding by updating the values in :root below. * * All values reference Tailwind v4 @theme colour variables where * possible, keeping them in sync with utility classes. */ /* ─────────────────────────────────────────────── LIGHT MODE (default) ─────────────────────────────────────────────── */ :root { /* ── Surfaces ── */ --surface-bg: oklch(100% 0 0); /* page background */ --surface-raised: oklch(98.4% 0.003 248); /* cards, panels */ --surface-overlay: oklch(100% 0 0); /* modals, dropdowns */ --surface-sunken: oklch(96.1% 0.006 248); /* inputs, code blocks */ --surface-hover: oklch(95.0% 0.006 248); /* hover state */ --surface-active: oklch(93.0% 0.010 250); /* active/pressed */ /* ── Text ── */ --text-primary: oklch(21.0% 0.017 261); /* headings, body */ --text-secondary: oklch(44.6% 0.030 257); /* sub-text */ --text-muted: oklch(55.4% 0.030 254); /* placeholders */ --text-disabled: oklch(70.6% 0.026 253); --text-inverse: oklch(100% 0 0); /* ── Borders ── */ --border-color: oklch(92.5% 0.010 250); /* default borders */ --border-strong: oklch(87.0% 0.016 251); /* stronger borders */ --border-focus: oklch(40.0% 0.112 289); /* primary-600 focus ring */ /* ── Brand shortcuts ── */ --brand-primary: oklch(40.0% 0.112 289); /* = primary-600 = #282780 */ --brand-primary-hover: oklch(33.0% 0.095 289); /* = primary-700 */ --brand-primary-text: oklch(100% 0 0); /* ── Top bar ── */ --topbar-bg: oklch(100% 0 0); --topbar-border: oklch(92.5% 0.010 250); --topbar-text: oklch(21.0% 0.017 261); /* ── Sidebar ── */ --sidebar-bg: oklch(98.4% 0.003 248); --sidebar-border: oklch(92.5% 0.010 250); --sidebar-item-hover: oklch(95.0% 0.006 248); --sidebar-item-active: oklch(97.0% 0.010 289); /* primary-50 */ --sidebar-item-active-text: oklch(40.0% 0.112 289); /* primary-600 */ /* ── Shadows ── */ --shadow-color: 0 0 0; /* ── Misc ── */ --focus-ring: 0 0 0 3px oklch(40.0% 0.112 289 / 0.25); --overlay-bg: oklch(0% 0 0 / 0.5); /* ── Border radius (brand) ── */ --brand-radius: 0.5rem; /* ── Transition ── */ --transition-base: 150ms ease; } /* ─────────────────────────────────────────────── DARK MODE (.dark on ) ─────────────────────────────────────────────── */ .dark { /* ── Surfaces ── */ --surface-bg: oklch(13.9% 0.013 263); /* = neutral-950 */ --surface-raised: oklch(21.0% 0.017 261); /* = neutral-900 */ --surface-overlay: oklch(27.8% 0.021 259); /* = neutral-800 */ --surface-sunken: oklch(18.0% 0.015 262); --surface-hover: oklch(24.0% 0.019 260); --surface-active: oklch(30.0% 0.022 258); /* ── Text ── */ --text-primary: oklch(96.1% 0.006 248); /* = neutral-100 */ --text-secondary: oklch(70.6% 0.026 253); /* = neutral-400 */ --text-muted: oklch(55.4% 0.030 254); /* = neutral-500 */ --text-disabled: oklch(44.6% 0.030 257); --text-inverse: oklch(13.9% 0.013 263); /* ── Borders ── */ --border-color: oklch(27.8% 0.021 259); /* = neutral-800 */ --border-strong: oklch(37.2% 0.025 258); /* = neutral-700 */ --border-focus: oklch(71.9% 0.138 261); /* = primary-400 */ /* ── Brand ── */ --brand-primary: oklch(69.0% 0.110 289); /* = primary-400 */ --brand-primary-hover: oklch(79.5% 0.080 289); /* = primary-300 */ --brand-primary-text: oklch(13.9% 0.013 263); /* ── Top bar ── */ --topbar-bg: oklch(21.0% 0.017 261); --topbar-border: oklch(27.8% 0.021 259); --topbar-text: oklch(96.1% 0.006 248); /* ── Sidebar ── */ --sidebar-bg: oklch(18.0% 0.015 262); --sidebar-border: oklch(27.8% 0.021 259); --sidebar-item-hover: oklch(24.0% 0.019 260); --sidebar-item-active: oklch(16.0% 0.044 289); /* primary-950 */ --sidebar-item-active-text: oklch(79.5% 0.080 289); /* primary-300 */ /* ── Misc ── */ --focus-ring: 0 0 0 3px oklch(71.9% 0.138 261 / 0.3); --overlay-bg: oklch(0% 0 0 / 0.7); }