/*
 * Color themes. Every page's colors are written as rgb(var(--c-<name>) / alpha)
 * using these palette channels. Midnight (the default) is the original dark
 * look; the other themes remap the same names. Light themes invert the slate
 * ramp (dark backgrounds ↔ light text) and deepen accent text so it stays
 * readable on white. Picked in the header; applied by /assets/theme.js.
 */

:root,
html[data-theme='midnight'] {
  color-scheme: dark;
  --c-slate-50: 248 250 252;
  --c-slate-100: 241 245 249;
  --c-slate-200: 226 232 240;
  --c-slate-300: 203 213 225;
  --c-slate-400: 148 163 184;
  --c-slate-500: 100 116 139;
  --c-slate-700: 51 65 85;
  --c-slate-800: 30 41 59;
  --c-slate-900: 15 23 42;
  --c-slate-950: 2 6 23;
  --c-navy-900: 17 26 46;
  --c-navy-950: 11 20 65;
  --c-sky-100: 224 242 254;
  --c-sky-200: 186 230 253;
  --c-sky-300: 125 211 252;
  --c-sky-400: 56 189 248;
  --c-sky-500: 14 165 233;
  --c-sky-600: 2 132 199;
  --c-blue-200: 191 219 254;
  --c-blue-500: 59 130 246;
  --c-blue-600: 37 99 235;
  --c-blue-800: 30 64 175;
  --c-red-100: 254 226 226;
  --c-red-200: 254 202 202;
  --c-red-250: 248 180 180;
  --c-red-300: 252 165 165;
  --c-red-400: 248 113 113;
  --c-red-900: 127 29 29;
  --c-green-200: 187 247 208;
  --c-green-300: 134 239 172;
  --c-green-400: 74 222 128;
  --c-green-500: 34 197 94;
  --c-emerald-400: 52 211 153;
  --c-yellow-200: 254 240 138;
  --c-yellow-400: 250 204 21;
  --c-amber-100: 254 243 199;
  --c-amber-110: 254 240 199;
  --c-amber-200: 253 230 138;
  --c-amber-300: 252 211 77;
  --c-amber-400: 251 191 36;
  --c-orange-300: 253 186 116;
  --c-orange-400: 251 146 60;
  --c-indigo-300: 165 180 252;
  --c-indigo-400: 129 140 248;
  --c-violet-300: 196 181 253;
  --c-purple-200: 233 213 255;
  --c-purple-500: 168 85 247;
  --c-cyan-700: 14 116 144;
}

/* Dim: same dark design, softer — lifted grays, less contrast. */
html[data-theme='dim'] {
  color-scheme: dark;
  --c-slate-950: 24 32 48;
  --c-slate-900: 36 47 67;
  --c-slate-800: 55 68 90;
  --c-slate-700: 75 89 112;
  --c-navy-900: 38 49 70;
  --c-navy-950: 33 44 72;
  --c-slate-50: 241 245 249;
  --c-slate-200: 222 228 236;
}

/* Light: white cards on a soft gray page. */
html[data-theme='light'] {
  color-scheme: light;
  --c-slate-50: 15 23 42;
  --c-slate-100: 30 41 59;
  --c-slate-200: 30 41 59;
  --c-slate-300: 51 65 85;
  --c-slate-400: 71 85 105;
  --c-slate-500: 100 116 139;
  --c-slate-700: 203 213 225;
  --c-slate-800: 226 232 240;
  --c-slate-900: 255 255 255;
  --c-slate-950: 241 245 249;
  --c-navy-900: 255 255 255;
  --c-navy-950: 236 241 248;
  --c-sky-100: 12 74 110;
  --c-sky-200: 7 89 133;
  --c-sky-300: 3 105 161;
  --c-sky-400: 14 165 233;
  --c-sky-500: 2 132 199;
  --c-sky-600: 3 105 161;
  --c-blue-200: 30 64 175;
  --c-red-100: 127 29 29;
  --c-red-200: 153 27 27;
  --c-red-250: 185 28 28;
  --c-red-300: 185 28 28;
  --c-red-400: 220 38 38;
  --c-red-900: 254 226 226;
  --c-green-200: 22 101 52;
  --c-green-300: 21 128 61;
  --c-green-400: 21 128 61;
  --c-green-500: 22 163 74;
  --c-emerald-400: 4 120 87;
  --c-yellow-200: 133 77 14;
  --c-yellow-400: 161 98 7;
  --c-amber-100: 120 53 15;
  --c-amber-110: 120 53 15;
  --c-amber-200: 146 64 14;
  --c-amber-300: 180 83 9;
  --c-amber-400: 180 83 9;
  --c-orange-300: 194 65 12;
  --c-orange-400: 234 88 12;
  --c-indigo-300: 67 56 202;
  --c-indigo-400: 79 70 229;
  --c-violet-300: 109 40 217;
  --c-purple-200: 107 33 168;
}

/* Sand: warm light — cream cards on a sand page, warm gray text. */
html[data-theme='sand'] {
  color-scheme: light;
  --c-slate-50: 41 37 36;
  --c-slate-100: 54 49 46;
  --c-slate-200: 54 49 46;
  --c-slate-300: 74 68 63;
  --c-slate-400: 105 98 92;
  --c-slate-500: 120 113 108;
  --c-slate-700: 214 206 192;
  --c-slate-800: 232 225 213;
  --c-slate-900: 255 252 246;
  --c-slate-950: 243 238 228;
  --c-navy-900: 255 252 246;
  --c-navy-950: 238 232 220;
  --c-sky-100: 12 74 110;
  --c-sky-200: 7 89 133;
  --c-sky-300: 3 105 161;
  --c-sky-400: 14 165 233;
  --c-sky-500: 2 132 199;
  --c-sky-600: 3 105 161;
  --c-blue-200: 30 64 175;
  --c-red-100: 127 29 29;
  --c-red-200: 153 27 27;
  --c-red-250: 185 28 28;
  --c-red-300: 185 28 28;
  --c-red-400: 220 38 38;
  --c-red-900: 254 226 226;
  --c-green-200: 22 101 52;
  --c-green-300: 21 128 61;
  --c-green-400: 21 128 61;
  --c-green-500: 22 163 74;
  --c-emerald-400: 4 120 87;
  --c-yellow-200: 133 77 14;
  --c-yellow-400: 161 98 7;
  --c-amber-100: 120 53 15;
  --c-amber-110: 120 53 15;
  --c-amber-200: 146 64 14;
  --c-amber-300: 180 83 9;
  --c-amber-400: 180 83 9;
  --c-orange-300: 194 65 12;
  --c-orange-400: 234 88 12;
  --c-indigo-300: 67 56 202;
  --c-indigo-400: 79 70 229;
  --c-violet-300: 109 40 217;
  --c-purple-200: 107 33 168;
}

/* Light themes: soften the heavy dark-mode shadows. */
html[data-theme='light'] .panel,
html[data-theme='light'] .card,
html[data-theme='sand'] .panel,
html[data-theme='sand'] .card {
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08), 0 8px 24px -16px rgb(15 23 42 / 0.18) !important;
}

/* ---- theme picker (header) ---- */
.theme-picker { position: relative; }
.theme-button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgb(var(--c-slate-900) / 0.7); color: rgb(var(--c-slate-200) / 0.9);
  border: 1px solid rgb(var(--c-sky-400) / 0.35); border-radius: 999px;
  padding: 0.5rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  width: 2.35rem; height: 2.35rem; justify-content: center;
}
.theme-button:hover { border-color: rgb(var(--c-sky-400) / 0.6); }
.theme-button svg { width: 1rem; height: 1rem; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 50; min-width: 15rem;
  background: rgb(var(--c-slate-900)); border: 1px solid rgb(var(--c-slate-700)); border-radius: 0.9rem;
  padding: 0.4rem; display: none; box-shadow: 0 18px 40px -18px rgb(2 6 23 / 0.6);
}
.theme-picker[data-open='true'] .theme-menu { display: grid; gap: 0.15rem; }
.theme-option {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  background: none; border: none; border-radius: 0.6rem; padding: 0.5rem 0.6rem; cursor: pointer;
  color: rgb(var(--c-slate-100)); font: inherit; font-size: 0.88rem;
}
.theme-option:hover, .theme-option:focus-visible { background: rgb(var(--c-slate-800)); outline: none; }
.theme-option[aria-checked='true'] { background: rgb(var(--c-sky-400) / 0.16); }
.theme-option small { display: block; color: rgb(var(--c-slate-400)); font-size: 0.76rem; }
.theme-swatch {
  width: 2rem; height: 1.4rem; border-radius: 0.4rem; flex: none; border: 1px solid rgb(var(--c-slate-700));
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
.theme-swatch span:first-child { grid-column: 1 / -1; }