:root { /* Named color values */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; --lch-gray: 96% 0.005 96; --lch-gray-dark: 92% 0.005 96; --lch-gray-darker: 75% 0.005 96; --lch-blue: 54% 0.23 255; --lch-blue-light: 95% 0.03 255; --lch-blue-dark: 80% 0.08 255; --lch-orange: 70% 0.2 44; --lch-red: 51% 0.2 31; --lch-green: 65.59% 0.234 142.49; --lch-always-black: 0% 0 0; /* Abstractions */ --color-negative: oklch(var(--lch-red)); --color-positive: oklch(var(--lch-green)); --color-bg: oklch(var(--lch-white)); --color-message-bg: oklch(var(--lch-gray)); --color-text: oklch(var(--lch-black)); --color-text-reversed: oklch(var(--lch-white)); --color-link: oklch(var(--lch-blue)); --color-border: oklch(var(--lch-gray)); --color-border-dark: oklch(var(--lch-gray-dark)); --color-border-darker: oklch(var(--lch-gray-darker)); --color-selected: oklch(var(--lch-blue-light)); --color-selected-dark: oklch(var(--lch-blue-dark)); --color-alert: oklch(var(--lch-orange)); --color-icon: oklch(48% 0.01 268); --btn-hover-bg: oklch(85% 0.012 268); /* Redefine named color values for dark mode */ @media (prefers-color-scheme: dark) { --lch-black: 97% 0.01 275; --lch-white: 18% 0.04 270; --color-bg: #0A1728; --color-message-bg: #1B2837; --lch-gray: 26% 0.035 268; --lch-gray-dark: 32% 0.03 266; --lch-gray-darker: 42% 0.025 264; --lch-blue: 72.25% 0.16 248; --lch-blue-light: 22% 0.045 272; --lch-blue-dark: 42.25% 0.07 248; --lch-orange: 65% 0.21 42; --lch-red: 73.8% 0.184 29.18; --lch-green: 75% 0.21 141.89; --color-icon: #6E7884; --btn-hover-bg: var(--color-border-dark); } } /* Manual dark theme override (via data-theme attribute on ) */ html[data-theme="dark"] { color-scheme: dark; --lch-black: 97% 0.01 275; --lch-white: 18% 0.04 270; --color-bg: #0A1728; --color-message-bg: #1B2837; --lch-gray: 26% 0.035 268; --lch-gray-dark: 32% 0.03 266; --lch-gray-darker: 42% 0.025 264; --lch-blue: 72.25% 0.16 248; --lch-blue-light: 22% 0.045 272; --lch-blue-dark: 42.25% 0.07 248; --lch-orange: 65% 0.21 42; --lch-red: 73.8% 0.184 29.18; --lch-green: 75% 0.21 141.89; --color-icon: #6E7884; } /* Force light theme even when system prefers dark */ html[data-theme="light"] { color-scheme: light; --lch-black: 0% 0 0; --lch-white: 100% 0 0; --lch-gray: 96% 0.005 96; --lch-gray-dark: 92% 0.005 96; --lch-gray-darker: 75% 0.005 96; --lch-blue: 54% 0.23 255; --lch-blue-light: 95% 0.03 255; --lch-blue-dark: 80% 0.08 255; --lch-orange: 70% 0.2 44; --lch-red: 51% 0.2 31; --lch-green: 65.59% 0.234 142.49; --lch-always-black: 0% 0 0; --color-bg: oklch(var(--lch-white)); --color-message-bg: oklch(var(--lch-gray)); --color-icon: oklch(48% 0.01 268); --btn-hover-bg: oklch(85% 0.012 268); }