/* One local preference for the app and the standalone courses. No color inversion. */
:root {
  color-scheme: light;
  --ty-page: #f7f8fc;
  --ty-surface: #ffffff;
  --ty-soft: #eef2f8;
  --ty-text: #172033;
  --ty-muted: #667085;
  --ty-line: #dfe5ef;
  --ty-focus: #4f46e5;
}
html { background: var(--ty-page); }
body, html[data-theme] body { color: var(--ty-text); background-color: var(--ty-page); }
.theme-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 56px;
  padding: 6px max(16px, calc((100% - 1280px) / 2));
  border-bottom: 1px solid var(--ty-line);
  background: var(--ty-surface);
  color: var(--ty-text);
  font: 600 13px/1.4 Inter, system-ui, sans-serif;
}
.theme-switcher { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.theme-switcher-label { color: var(--ty-muted); }
.theme-switcher-select {
  min-height: 44px;
  max-width: 100%;
  width: 184px;
  padding: 8px 12px;
  border: 1px solid var(--ty-line);
  border-radius: 12px;
  background: var(--ty-surface);
  color: var(--ty-text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.theme-switcher-select:focus-visible { outline: 3px solid var(--ty-focus); outline-offset: 2px; }
@media (max-width: 359px) {
  .theme-toolbar { padding-inline: 12px; }
  .theme-switcher-label { max-width: 90px; }
  .theme-switcher-select { flex-shrink: 0; }
}
.theme-loading { min-height: 100dvh; background: var(--ty-page); color: var(--ty-text); }
/* Full-page sign-in backgrounds follow the selected mode; branded hero panels keep their colors. */
html[data-theme='light'] :is(main.bg-slate-950, .min-h-screen.bg-slate-950) { background-color: var(--ty-page); color: var(--ty-text); }
html[data-theme='light'] .min-h-screen.bg-slate-950 > .text-white { color: var(--ty-text); }
html[data-theme='light'] .min-h-screen.bg-slate-950 a.text-white { color: var(--ty-text); }
html[data-theme='light'] .min-h-screen.bg-slate-950 a.text-white > .bg-gradient-to-br { color: #fff; }
html[data-theme='light'] .min-h-screen.bg-slate-950 a.text-white .text-slate-400 { color: var(--ty-muted); }
html[data-theme='light'] :is(.bg-slate-900, .bg-slate-900\/90) :is(.text-slate-400, .text-slate-500) { color: #c3cddd; }

@media screen {
  html[data-theme='dark'] {
    color-scheme: dark;
    --ty-page: #0f1422;
    --ty-surface: #192235;
    --ty-soft: #243149;
    --ty-text: #edf2fa;
    --ty-muted: #bbc7d9;
    --ty-line: #3a4a62;
    --ty-focus: #a5b4fc;
  }
  html[data-theme='dark'] :is(.bg-white, .focus\:bg-white:focus, .hover\:bg-white:hover) { background-color: var(--ty-surface); }
  html[data-theme='dark'] :is(.bg-white\/80, .bg-white\/90, .bg-white\/95) { background-color: rgb(25 34 53 / .95); }
  html[data-theme='dark'] :is(.bg-slate-50, .bg-slate-950) { background-color: var(--ty-page); }
  html[data-theme='dark'] .bg-slate-950\/60 { background-color: rgb(15 20 34 / .6); }
  html[data-theme='dark'] :is(.bg-slate-100, .bg-slate-200, .bg-slate-900, .bg-slate-900\/90) { background-color: var(--ty-soft); }
  html[data-theme='dark'] :is(.hover\:bg-slate-50:hover, .hover\:bg-slate-50\/70:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover) { background-color: #2e3e57; }
  html[data-theme='dark'] :is(.text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900, .text-slate-950, .text-gray-900, .text-black) { color: var(--ty-text); }
  html[data-theme='dark'] :is(.text-slate-400, .text-slate-500, .text-gray-400, .text-gray-600) { color: var(--ty-muted); }
  html[data-theme='dark'] .hover\:text-slate-700:hover { color: var(--ty-text); }
  html[data-theme='dark'] :is(input, textarea, select) { color: var(--ty-text); background-color: var(--ty-surface); accent-color: #a5b4fc; }
  html[data-theme='dark'] :is(input, textarea)::placeholder { color: var(--ty-muted); opacity: 1; }
  html[data-theme='dark'] :is(.border, .border-b, .border-t, .border-2, .border-slate-100, .border-slate-200, .border-slate-300) { border-color: var(--ty-line); }
  html[data-theme='dark'] :is(.hover\:border-slate-200:hover, .hover\:border-slate-300:hover) { border-color: #8194b2; }
  html[data-theme='dark'] :is(.bg-indigo-50, .bg-indigo-50\/60, .bg-indigo-50\/70, .bg-indigo-100, .bg-violet-50, .bg-violet-100) { background-color: #282d50; }
  html[data-theme='dark'] :is(.hover\:bg-indigo-50:hover, .hover\:bg-indigo-100:hover, .hover\:bg-violet-100:hover) { background-color: #363e69; }
  html[data-theme='dark'] :is(.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-indigo-950, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-950, .text-blue-600) { color: #c0c4ff; }
  html[data-theme='dark'] .hover\:text-indigo-700:hover { color: #d5d8ff; }
  html[data-theme='dark'] .group:hover .group-hover\:text-blue-700 { color: #b7d5ff; }
  html[data-theme='dark'] :is(.border-indigo-100, .border-indigo-200, .border-indigo-300, .border-violet-100, .border-violet-200) { border-color: #575f92; }
  html[data-theme='dark'] :is(.bg-cyan-50, .bg-cyan-50\/60, .bg-cyan-100, .bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100) { background-color: #14394a; }
  html[data-theme='dark'] :is(.text-cyan-600, .text-cyan-700, .text-cyan-800, .text-cyan-900, .text-cyan-950) { color: #9ee9f3; }
  html[data-theme='dark'] :is(.border-cyan-100, .border-cyan-200, .border-cyan-300, .border-blue-100, .border-blue-200, .border-blue-300) { border-color: #387487; }
  html[data-theme='dark'] :is(.bg-emerald-50, .bg-emerald-100) { background-color: #133e34; }
  html[data-theme='dark'] .hover\:bg-emerald-100:hover { background-color: #1f5546; }
  html[data-theme='dark'] :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900, .text-emerald-950, .hover\:text-emerald-950:hover) { color: #a0edd0; }
  html[data-theme='dark'] :is(.border-emerald-100, .border-emerald-200, .border-emerald-300) { border-color: #438673; }
  html[data-theme='dark'] :is(.bg-amber-50, .bg-amber-100) { background-color: #46331c; }
  html[data-theme='dark'] :is(.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-amber-950) { color: #fbd590; }
  html[data-theme='dark'] :is(.border-amber-100, .border-amber-200, .border-amber-300) { border-color: #a07639; }
  html[data-theme='dark'] :is(.bg-rose-50, .bg-rose-50\/60, .bg-rose-100) { background-color: #482836; }
  html[data-theme='dark'] .hover\:bg-rose-50:hover { background-color: #5b3244; }
  html[data-theme='dark'] :is(.text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900, .hover\:text-rose-700:hover) { color: #ffb4cb; }
  html[data-theme='dark'] :is(.border-rose-100, .border-rose-200, .border-rose-300) { border-color: #a1647e; }
  html[data-theme='dark'] :is(.border-indigo-600, .border-indigo-700) { border-color: #a5b4fc; }
  html[data-theme='dark'] :is(.border-emerald-500, .border-emerald-600) { border-color: #6ee7b7; }
  html[data-theme='dark'] .border-violet-500 { border-color: #c4b5fd; }
  html[data-theme='dark'] .border-cyan-500 { border-color: #67e8f9; }
  html[data-theme='dark'] .border-rose-500\/30 { border-color: #a1647e; }
  /* Subject palettes come from constants.tsx: foreground and background change together. */
  html[data-theme='dark'] :is(.bg-red-100, .bg-fuchsia-100) { background-color: #482836; }
  html[data-theme='dark'] :is(.text-red-600, .text-fuchsia-600) { color: #ffb4cb; }
  html[data-theme='dark'] :is(.border-red-200, .border-fuchsia-200) { border-color: #a1647e; }
  html[data-theme='dark'] :is(.bg-green-100, .bg-lime-100, .bg-teal-100) { background-color: #133e34; }
  html[data-theme='dark'] :is(.text-green-600, .text-lime-600, .text-teal-600) { color: #a0edd0; }
  html[data-theme='dark'] :is(.border-green-200, .border-lime-200, .border-teal-200) { border-color: #438673; }
  html[data-theme='dark'] :is(.bg-orange-100, .bg-yellow-100) { background-color: #46331c; }
  html[data-theme='dark'] :is(.text-orange-600, .text-yellow-600) { color: #fbd590; }
  html[data-theme='dark'] :is(.border-orange-200, .border-yellow-200) { border-color: #a07639; }
  html[data-theme='dark'] .bg-purple-100 { background-color: #282d50; }
  html[data-theme='dark'] :is(.text-purple-600, .text-purple-700) { color: #c0c4ff; }
  html[data-theme='dark'] .border-purple-200 { border-color: #575f92; }
  html[data-theme='dark'] .bg-stone-100 { background-color: var(--ty-soft); }
  html[data-theme='dark'] .text-stone-600 { color: var(--ty-text); }
  html[data-theme='dark'] .border-stone-200 { border-color: var(--ty-line); }
  /* Text on bright solid action buttons must stay dark. */
  html[data-theme='dark'] :is(.bg-cyan-400, .hover\:bg-cyan-300:hover, .bg-amber-400, .bg-amber-500, .hover\:bg-amber-400:hover).text-slate-950 { color: #0f1422; }
  html[data-theme='dark'] .from-amber-50 { --tw-gradient-from: #46331c var(--tw-gradient-from-position); --tw-gradient-to: rgb(70 51 28 / 0) var(--tw-gradient-to-position); }
  html[data-theme='dark'] .from-violet-100 { --tw-gradient-from: #282d50 var(--tw-gradient-from-position); --tw-gradient-to: rgb(40 45 80 / 0) var(--tw-gradient-to-position); }
  html[data-theme='dark'] :is(.via-indigo-50, .via-violet-50) { --tw-gradient-stops: var(--tw-gradient-from), #282d50 var(--tw-gradient-via-position), var(--tw-gradient-to); }
  html[data-theme='dark'] .to-cyan-100 { --tw-gradient-to: #14394a var(--tw-gradient-to-position); }
  html[data-theme='dark'] :is(.ring-indigo-50, .focus\:ring-indigo-50:focus, .focus\:ring-indigo-100:focus) { --tw-ring-color: #575f92; }
  html[data-theme='dark'] ::selection { color: #edf2fa; background: #46577b; }
  html[data-theme='dark'] ::-webkit-scrollbar-track { background: var(--ty-page); }
  html[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #536785; }
  /* School diagrams remain a light sheet, preserving mathematical colors and axes. */
  html[data-theme='dark'] svg[role='img'],
  html[data-theme='dark'] svg[role='img'].bg-white { background-color: #ffffff; color: #172033; border-radius: 8px; }
  html[data-theme='dark'] svg[role='img'] text:not([fill]) { fill: #172033; }
}
@media print {
  html, body { color-scheme: light !important; background: #ffffff !important; color: #172033 !important; }
  .theme-toolbar { display: none !important; }
  body * { color: #172033 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; }
  svg[role='img'] { background: #ffffff !important; }
  svg[role='img'] text { fill: #172033 !important; }
}