/* Theme tokens — the single source of truth for both color themes.
 *
 * Every Tailwind color utility used by the gateway resolves to one of these
 * CSS variables (see the `tailwind.config` colors block in base.html), so the
 * SAME templates/components render both themes; only the values here differ.
 *
 * Vars are space-separated RGB triplets ("9 9 11"), consumed as
 * `rgb(var(--c-zinc-950) / <alpha-value>)` so Tailwind opacity modifiers
 * (e.g. bg-zinc-900/40) keep working.
 *
 * Palette names keep their Tailwind identity but act as ROLES:
 *   - zinc-*  = neutral chrome, from page background (950) to strongest text
 *               (100). Light mode mirrors the ramp (950<->50, 900<->100, ...)
 *               so "zinc-950" always means "page background".
 *   - accents = hue kept, lightness re-tuned per theme: text shades (100-400)
 *               darken on light backgrounds, dark tint/border shades (700-950)
 *               become pale, solids (500/600) stay saturated.
 *   - white/black stay literal (text on solid accent buttons, modal scrims).
 *
 * Adding a theme = add another `html.<name> { ... }` block and extend the
 * switch in settings.html; no template changes needed.
 * Do not hardcode hex colors in templates/JS — use palette utilities or
 * `rgb(var(--c-...))` (tests/unit/test_theme_tokens.py enforces this).
 */

:root {
    color-scheme: dark;

    --c-zinc-50: 250 250 250;
    --c-zinc-100: 244 244 245;
    --c-zinc-200: 228 228 231;
    --c-zinc-300: 212 212 216;
    --c-zinc-400: 161 161 170;
    --c-zinc-500: 113 113 122;
    --c-zinc-600: 82 82 91;
    --c-zinc-700: 63 63 70;
    --c-zinc-800: 39 39 42;
    --c-zinc-900: 24 24 27;
    --c-zinc-950: 9 9 11;

    --c-emerald-100: 209 250 229;
    --c-emerald-200: 167 243 208;
    --c-emerald-300: 110 231 183;
    --c-emerald-400: 52 211 153;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 5 150 105;
    --c-emerald-700: 4 120 87;
    --c-emerald-800: 6 95 70;
    --c-emerald-900: 6 78 59;
    --c-emerald-950: 2 44 34;

    --c-red-300: 252 165 165;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 220 38 38;
    --c-red-700: 185 28 28;
    --c-red-800: 153 27 27;
    --c-red-900: 127 29 29;
    --c-red-950: 69 10 10;

    --c-amber-100: 254 243 199;
    --c-amber-200: 253 230 138;
    --c-amber-300: 252 211 77;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-amber-600: 217 119 6;
    --c-amber-700: 180 83 9;
    --c-amber-800: 146 64 14;
    --c-amber-900: 120 53 15;
    --c-amber-950: 69 26 3;

    --c-blue-400: 96 165 250;
    --c-blue-500: 59 130 246;
    --c-blue-600: 37 99 235;
    --c-blue-800: 30 64 175;

    --c-cyan-300: 103 232 249;
    --c-cyan-400: 34 211 238;
    --c-cyan-500: 6 182 212;

    --c-sky-400: 56 189 248;
    --c-sky-500: 14 165 233;

    --c-teal-400: 45 212 191;
    --c-teal-500: 20 184 166;

    --c-orange-300: 253 186 116;
    --c-orange-400: 251 146 60;
    --c-orange-500: 249 115 22;
    --c-orange-600: 234 88 12;
    --c-orange-700: 194 65 12;
    --c-orange-800: 154 52 18;

    --c-purple-400: 192 132 252;
    --c-purple-500: 168 85 247;

    --c-violet-300: 196 181 253;
    --c-violet-400: 167 139 250;
    --c-violet-500: 139 92 246;

    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;

    --c-green-300: 134 239 172;
    --c-green-400: 74 222 128;

    --c-pink-400: 244 114 182;
    --c-fuchsia-400: 232 121 249;
    --c-lime-500: 132 204 22;
    --c-indigo-400: 129 140 248;
}

html.light {
    color-scheme: light;

    /* Neutral chrome: mirrored ramp. 950 = page bg, 100 = strongest text. */
    --c-zinc-50: 9 9 11;
    --c-zinc-100: 24 24 27;
    --c-zinc-200: 39 39 42;
    --c-zinc-300: 63 63 70;
    --c-zinc-400: 82 82 91;
    --c-zinc-500: 113 113 122;
    --c-zinc-600: 161 161 170;
    --c-zinc-700: 212 212 216;
    --c-zinc-800: 228 228 231;
    --c-zinc-900: 244 244 245;
    --c-zinc-950: 250 250 250;

    /* Accents: text shades (100-400) darken, dark tints (700-950) go pale,
       solids (500/600) stay saturated at AA-friendly lightness. */
    --c-emerald-100: 6 78 59;
    --c-emerald-200: 6 95 70;
    --c-emerald-300: 4 120 87;
    --c-emerald-400: 5 150 105;
    --c-emerald-500: 5 150 105;
    --c-emerald-600: 4 120 87;
    --c-emerald-700: 110 231 183;
    --c-emerald-800: 167 243 208;
    --c-emerald-900: 209 250 229;
    --c-emerald-950: 236 253 245;

    --c-red-300: 185 28 28;
    --c-red-400: 220 38 38;
    --c-red-500: 220 38 38;
    --c-red-600: 185 28 28;
    --c-red-700: 252 165 165;
    --c-red-800: 254 202 202;
    --c-red-900: 254 226 226;
    --c-red-950: 254 242 242;

    --c-amber-100: 120 53 15;
    --c-amber-200: 146 64 14;
    --c-amber-300: 180 83 9;
    --c-amber-400: 180 83 9;
    --c-amber-500: 217 119 6;
    --c-amber-600: 180 83 9;
    --c-amber-700: 252 211 77;
    --c-amber-800: 253 230 138;
    --c-amber-900: 254 243 199;
    --c-amber-950: 255 251 235;

    --c-blue-400: 37 99 235;
    --c-blue-500: 37 99 235;
    --c-blue-600: 29 78 216;
    --c-blue-800: 191 219 254;

    --c-cyan-300: 14 116 144;
    --c-cyan-400: 8 145 178;
    --c-cyan-500: 8 145 178;

    --c-sky-400: 2 132 199;
    --c-sky-500: 2 132 199;

    --c-teal-400: 13 148 136;
    --c-teal-500: 13 148 136;

    --c-orange-300: 194 65 12;
    --c-orange-400: 194 65 12;
    --c-orange-500: 234 88 12;
    --c-orange-600: 194 65 12;
    --c-orange-700: 253 186 116;
    --c-orange-800: 254 215 170;

    --c-purple-400: 147 51 234;
    --c-purple-500: 147 51 234;

    --c-violet-300: 109 40 217;
    --c-violet-400: 124 58 237;
    --c-violet-500: 124 58 237;

    --c-rose-300: 190 18 60;
    --c-rose-400: 225 29 72;
    --c-rose-500: 225 29 72;

    --c-green-300: 21 128 61;
    --c-green-400: 22 163 74;

    --c-pink-400: 219 39 119;
    --c-fuchsia-400: 192 38 211;
    --c-lime-500: 101 163 13;
    --c-indigo-400: 79 70 229;
}