/* * Theme token layer — light/dark. * * The app has ~4.3k hardcoded light-mode utilities (`bg-gray-50`, * `text-gray-900`, `border-gray-200`, `bg-white`) spread across 162 * LiveViews. Rather than annotate every one with a `dark:` variant, the * Tailwind `gray` ramp is redefined in tailwind.config.js to resolve to the * custom properties below, so flipping `.theme-dark` on re-themes the whole * app at once. * * The ramp is INVERTED by role, not by hue: `gray-50` is the lightest surface * in light mode and the darkest surface in dark mode; `gray-900` is the * strongest text colour in both. Anything using the ramp for its conventional * purpose therefore keeps its contrast direction for free. * * Values are bare `R G B` triplets so Tailwind's `` opacity * modifiers (`bg-gray-500/50`) keep working. */ :root { /* Light — matches stock Tailwind `gray`, so nothing shifts visually. */ --c-gray-50: 249 250 251; --c-gray-100: 243 244 246; --c-gray-200: 229 231 235; --c-gray-300: 209 213 219; --c-gray-400: 156 163 175; --c-gray-500: 107 114 128; --c-gray-600: 75 85 99; --c-gray-700: 55 65 81; --c-gray-800: 31 41 55; --c-gray-900: 17 24 39; --c-gray-950: 3 7 18; /* Surfaces. `surface` is what `bg-white` becomes; it sits ABOVE the page background in both themes, which is why dark mode raises it rather than darkening it. */ --c-surface: 255 255 255; --c-surface-raised: 255 255 255; --c-surface-sunken: 249 250 251; --c-page: 249 250 251; --c-shadow: 0 0 0; --c-shadow-strength: 0.1; color-scheme: light; } .theme-dark { --c-gray-50: 15 16 19; --c-gray-100: 32 34 39; --c-gray-200: 44 47 54; --c-gray-300: 60 64 73; --c-gray-400: 113 118 131; --c-gray-500: 148 154 168; --c-gray-600: 178 184 197; --c-gray-700: 205 210 221; --c-gray-800: 228 231 238; --c-gray-900: 243 245 249; --c-gray-950: 250 251 253; --c-surface: 26 28 33; --c-surface-raised: 34 37 43; --c-surface-sunken: 11 12 15; --c-page: 15 16 19; --c-shadow: 0 0 0; --c-shadow-strength: 0.45; /* Native widgets — scrollbars,