/* ═══════════════════════════════════════════════════════════════════════
   KHL-GALILEO — THEME TOKENS (single source of truth for colour)

   Light  = Theme 1 · Ocean Blue (professional & academic)
   Dark   = Theme 5 · Charcoal & Electric Blue (advanced technology)
   System = follows the operating system (resolved to light/dark before first paint
            by the inline script at the top of every page; see js/theme-toggle.js)

   Rules use html[data-theme="…"] (higher specificity than :root / [data-theme]),
   so these tokens win over the older per-page variables without editing every page.
   Pages and components should use the --color-* tokens; the legacy names at the
   bottom of each block (--ink, --gold, --text, …) are kept only as aliases.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  color-scheme: light;
  /* surfaces */
  --color-background: #F5F8FC;
  --color-nav: #FFFFFF;
  --color-sidebar: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-well: #F8FAFC;              /* recessed area inside a card */
  --color-overlay: rgba(15, 23, 42, .45);
  /* brand & actions */
  --color-primary: #123B66;
  --color-primary-hover: #0F3154;
  --color-on-primary: #FFFFFF;
  --color-accent: #2563EB;            /* secondary blue */
  --color-accent-text: #1D4ED8;
  --color-emphasis: #123B66;          /* highlighted words in headings, key figures */
  --color-violet: #6D28D9;            /* category colour (physics etc.) */
  /* text */
  --color-heading: #123B66;
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-link: #1D4ED8;
  /* lines & inputs */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-input: #FFFFFF;
  --color-input-border: #CBD5E1;
  /* states */
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-error: #B91C1C;
  --color-info: #1D4ED8;
  --color-hover: #EFF6FF;
  --color-selected: #DBEAFE;
  --color-focus: #2563EB;
  /* translucent overlays: mixed with this colour, so they read on white cards */
  --color-tint: #0F172A;
  /* "raised" layers (were faint white overlays in the old dark design): white cards in light mode */
  --color-raise-1: #FFFFFF;
  --color-raise-2: #FFFFFF;
  --color-raise-3: #EFF6FF;
  --color-shadow: rgba(15, 23, 42, .28);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-pop: 0 10px 30px rgba(15, 23, 42, .14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #111827;
  --color-nav: #111827;
  --color-sidebar: #111827;
  --color-surface: #1F2937;
  --color-surface-elevated: #273449;
  --color-well: #111827;
  --color-overlay: rgba(3, 7, 18, .7);
  --color-primary: #3B82F6;
  --color-primary-hover: #60A5FA;
  --color-on-primary: #0B1220;        /* dark text on electric blue: 4.6:1 (white would be 3.7:1) */
  --color-accent: #06B6D4;            /* restrained cyan */
  --color-accent-text: #22D3EE;
  --color-emphasis: #93C5FD;
  --color-violet: #A78BFA;
  --color-heading: #F9FAFB;
  --color-text: #F3F4F6;
  --color-text-secondary: #D1D5DB;
  --color-text-muted: #9CA3AF;
  --color-link: #93C5FD;
  --color-border: #374151;
  --color-border-strong: #4B5563;
  --color-input: #111827;
  --color-input-border: #4B5563;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #60A5FA;
  --color-hover: #273449;
  --color-selected: #1E3A5F;
  --color-focus: #60A5FA;
  --color-tint: #FFFFFF;
  --color-raise-1: rgba(255, 255, 255, .04);
  --color-raise-2: rgba(255, 255, 255, .07);
  --color-raise-3: rgba(255, 255, 255, .11);
  --color-shadow: rgba(0, 0, 0, .75);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45);
}

/* ── Legacy variable names used across the existing pages → new tokens ── */
html[data-theme] {
  --ink: var(--color-background);
  --deep: var(--color-surface);
  --navy: var(--color-well);
  --panel: var(--color-surface);
  --card: var(--color-surface);
  --card-hi: var(--color-surface-elevated);
  --glass: var(--color-surface);
  --glass-hi: var(--color-surface-elevated);
  --blue: var(--color-hover);
  --mid: var(--color-input-border);
  --gold: var(--color-primary);
  --amber: var(--color-emphasis);
  --glow: var(--color-accent);
  --teal: var(--color-accent);
  --cyan: var(--color-accent);
  --accent: var(--color-accent);
  --accent2: var(--color-accent);
  --violet: var(--color-violet);
  --green: var(--color-success);
  --red: var(--color-error);
  --orange: var(--color-warning);
  --rose: var(--color-error);
  --white: var(--color-text);
  --off-white: var(--color-text-secondary);
  --silver: var(--color-text-secondary);
  --dim: var(--color-text-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-muted);
  --border: var(--color-border);
  --border-hi: var(--color-border-strong);
  --border-tl: var(--color-border-strong);
  --border-vl: var(--color-border-strong);
  --grad-gold: var(--color-primary);
  --grad-teal: var(--color-accent);
  --grad-violet: var(--color-violet);
  --grad-red: var(--color-error);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-pop);
  --shadow-lg: var(--shadow-pop);
  --shadow-xl: var(--shadow-pop);
  --glow-gold: none;
  --glow-teal: none;
  --glow-cyan: none;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html[data-theme] body {
  background-color: var(--color-background) !important;
  background-image: none !important;          /* no decorative nebula gradients */
  color: var(--color-text);
}
/* Zero specificity: only for headings/links that a page hasn't styled itself (buttons are <a> too) */
:where(html[data-theme]) :where(h1, h2, h3) { color: var(--color-heading); }
:where(html[data-theme]) :where(a:not([class])) { color: var(--color-link); }

/* Buttons: readable text on the primary and accent colours in both themes */
html[data-theme] .btn-primary { background: var(--color-primary) !important; color: var(--color-on-primary) !important; border-color: transparent; }
html[data-theme] .btn-primary:hover { background: var(--color-primary-hover) !important; }
html[data-theme] .btn-teal { background: var(--color-accent) !important; color: var(--color-on-primary) !important; }
html[data-theme="light"] .btn-teal { color: #FFFFFF !important; }
html[data-theme] .btn-ghost, html[data-theme] .btn-outline { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); }
html[data-theme] :is(.btn-ghost, .btn-outline):hover { background: var(--color-hover); color: var(--color-primary); border-color: var(--color-primary); }
html[data-theme] :is(.btn, button):disabled { opacity: .55; cursor: not-allowed; }
html[data-theme] ::selection { background: var(--color-selected); color: var(--color-text); }

/* Decorative starfield canvases: off in light mode, faint in dark mode */
html[data-theme="light"] :is(#cosmos, #cosmos-bg, canvas.cosmos) { display: none !important; }
html[data-theme="dark"] :is(#cosmos, #cosmos-bg, canvas.cosmos) { opacity: .28 !important; }

/* Form fields: one consistent look everywhere (overrides inline styles on purpose) */
html[data-theme] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) {
  background-color: var(--color-input) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text) !important;
}
html[data-theme] :is(input, textarea)::placeholder { color: var(--color-text-muted) !important; opacity: 1; }
html[data-theme] select option { background: var(--color-surface-elevated); color: var(--color-text); }
html[data-theme] :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
html[data-theme] :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--color-primary); }

/* Visible keyboard focus everywhere (WCAG 2.2 focus visible) */
html[data-theme] :focus-visible {
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}
html[data-theme] :is(input, select, textarea):focus-visible { outline-offset: 0 !important; }

/* Selected / active navigation */
html[data-theme] :is(.nav-item.active, .sb-link.active, .lib-tab.active, .ap-tab.active, .tab.active, .filter-btn.active, .filter-chip.active, .nav-link.active, .inc-tab.active) {
  background: var(--color-selected) !important;
  color: var(--color-text) !important;
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}
html[data-theme] :is(.nav-item, .sb-link):hover:not(.active) { background: var(--color-hover); }

/* Scrollbars */
html[data-theme] ::-webkit-scrollbar-track { background: var(--color-background); }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
html[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Reduced motion: keep the interface calm for people who ask for it */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── Appearance switcher (js/theme-toggle.js) ─────────────────────────── */
#theme-toggle {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 9990;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-elevated); color: var(--color-text);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-pop);
  cursor: pointer; padding: 0;
}
#theme-toggle:hover { background: var(--color-hover); }
#theme-toggle svg, #theme-menu svg { width: 20px; height: 20px; flex-shrink: 0; }
#theme-menu {
  position: fixed; bottom: calc(5rem + 52px); right: 1.5rem; z-index: 9991;
  min-width: 190px; padding: 6px; border-radius: 12px;
  background: var(--color-surface-elevated); color: var(--color-text);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-pop);
  font-family: 'Outfit', system-ui, sans-serif; font-size: .88rem;
}
#theme-menu[hidden] { display: none; }
#theme-menu .tm-title { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 6px 10px 4px; }
#theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--color-text); font: inherit; cursor: pointer; text-align: left;
}
#theme-menu button:hover { background: var(--color-hover); }
#theme-menu button[aria-checked="true"] { background: var(--color-selected); font-weight: 600; }
#theme-menu button .tm-check { margin-left: auto; color: var(--color-primary); visibility: hidden; }
#theme-menu button[aria-checked="true"] .tm-check { visibility: visible; }
@media (max-width: 600px) {
  #theme-toggle { bottom: 4.5rem; right: 1rem; width: 40px; height: 40px; }
  #theme-menu { right: 1rem; bottom: calc(4.5rem + 48px); }
}
@media print { #theme-toggle, #theme-menu { display: none !important; } }