/* public/css/theme.css
 *
 * Phase 14 — surface stylesheet.
 *
 * Themes set the --theme-* CSS variables on <html>; this stylesheet
 * binds them to the surfaces that should change colour. We use
 * :where() everywhere so specificity stays at 0 — that way page-local
 * CSS (rarity tints, .danger-box, .success-box, hljs colours, etc)
 * still wins, only the global page chrome shifts.
 *
 * If a page has not loaded this stylesheet, nothing changes. If it has
 * loaded it but no theme is equipped, --theme-* vars are set to the
 * platform default and the page looks identical to pre-Phase-14.
 */

/* ---- Page background --------------------------------------------- */
/* Specificity (0,0,2) on purpose — every student page declares its own
   `body { background: #0A0C1A; }` in a <style> block (specificity (0,0,1)).
   Without the extra `html` qualifier, our :where(body) lost the cascade. */
html body {
  background: var(--theme-bg, #0A0C1A);
}

/* The ambient-bg div on most pages uses two radial gradients. We
   re-paint them via the theme vars; if a page doesn't have this div,
   the rule has no effect. */
html .ambient-bg {
  background:
    radial-gradient(circle 650px at 50% 12%, var(--theme-bg-glow-1, rgba(120,50,220,0.13)) 0%, transparent 60%),
    radial-gradient(circle 500px at 18% 88%, var(--theme-bg-glow-2, rgba(80,40,180,0.09)) 0%, transparent 55%);
}

/* ---- Glass-card surface ------------------------------------------ */
html .glass-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-surface, rgba(30,33,70,0.55)) 100%, transparent) 0%,
    color-mix(in srgb, var(--theme-surface, rgba(15,17,42,0.6))    92%, transparent) 100%);
  border-color: var(--theme-surface-edge, rgba(139,92,246,0.15));
}

/* ---- Primary button ---------------------------------------------- */
html .btn-primary {
  background: linear-gradient(135deg, var(--theme-primary, #7C3AED), var(--theme-primary-deep, #6D28D9));
  color: var(--theme-on-primary, #fff);
}
html .btn-primary:hover {
  box-shadow: 0 8px 22px var(--theme-primary-glow, rgba(124,58,237,0.45));
}

/* Secondary button uses a tinted version of primary. */
html .btn-secondary {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 10%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 25%, transparent);
}
html .btn-secondary:hover,
html .btn-secondary.active {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 22%, transparent);
}

/* ---- Sidebar shell and nav state --------------------------------- */
html .sidebar {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html .sidebar .brand-name .text-primary-light {
  color: var(--theme-primary, #8B5CF6);
}
html .sidebar .nav-item.active,
html .nav-item.active {
  background: linear-gradient(135deg, var(--theme-primary, #7C3AED), var(--theme-primary-deep, #6D28D9));
  box-shadow: 0 0 18px var(--theme-primary-glow, rgba(139,92,246,0.50));
}
html .sidebar .nav-item.active {
  color: var(--theme-on-primary, #fff);
}
html .sidebar .nav-item:hover,
html .nav-item:hover {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 9%, transparent);
}
html .sidebar .nav-item.intensive-nav-item::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-primary, #7C3AED) 42%, transparent), transparent);
}
html .sidebar-toggle {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 10%, transparent);
  color: var(--theme-chip-fg, #C4B5FD);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 18%, transparent);
}
html .sidebar-toggle:hover {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 20%, transparent);
  color: var(--theme-on-primary, #fff);
}

/* ---- Progress bar ------------------------------------------------ */
html .progress-fill {
  background: linear-gradient(90deg, var(--theme-progress-1, #7C3AED), var(--theme-progress-2, #8B5CF6));
  box-shadow: 0 0 12px var(--theme-primary-glow, rgba(139,92,246,0.45));
}

/* ---- Generic chip (chips on shop, profile, knowledge base, …) --- */
html .chip:not(.success):not(.warn):not(.cyan):not(.muted):not(.danger):not(.rare):not(.epic):not(.legendary):not(.mythic):not(.secret) {
  background: var(--theme-chip, rgba(139,92,246,0.12));
  color: var(--theme-chip-fg, #C4B5FD);
}
html .metric-chip:not(.text-warn):not(.text-success):not(.text-danger):not(.text-primary-light) {
  background: var(--theme-chip, rgba(139,92,246,0.08));
  color: var(--theme-chip-fg, #C4B5FD);
}

/* ---- Stat tiles (profile page) ----------------------------------- */
html .stat-tile {
  background: color-mix(in srgb, var(--theme-primary, #7C3AED) 8%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary, #7C3AED) 18%, transparent);
}

/* ---- Sidebar / topbar shells (where they reference primary glow) - */
html .glass-card.no-hover {
  border-color: var(--theme-surface-edge, rgba(139,92,246,0.15));
}

/* =============================================================
   Mythic RGB-theme animation. Enabled when [data-theme="rgb-theme"]
   is on <html>. Cycles the primary accent through the spectrum so
   the chrome literally pulses. Keep duration long (10s) so it's
   ambient rather than seizure-inducing.
   ============================================================= */
@keyframes rgbThemeShift {
  0%   { --theme-primary: #A855F7; --theme-primary-deep: #7E22CE; }
  20%  { --theme-primary: #22D3EE; --theme-primary-deep: #0E7490; }
  40%  { --theme-primary: #22C55E; --theme-primary-deep: #15803D; }
  60%  { --theme-primary: #F59E0B; --theme-primary-deep: #B45309; }
  80%  { --theme-primary: #EC4899; --theme-primary-deep: #BE185D; }
  100% { --theme-primary: #A855F7; --theme-primary-deep: #7E22CE; }
}
/* @property declarations make CSS-variable animation actually interpolate
   in browsers that support them. Without these, the animation is a hard
   step. Safe fallback when @property isn't supported (Safari < 16.4): the
   step-wise transition still cycles correctly. */
@property --theme-primary {
  syntax: '<color>'; inherits: true; initial-value: #7C3AED;
}
@property --theme-primary-deep {
  syntax: '<color>'; inherits: true; initial-value: #6D28D9;
}
:where(html[data-theme="rgb-theme"]) {
  animation: rgbThemeShift 10s linear infinite;
}

/* =============================================================
   Reduced-motion respect: kill the RGB animation for users who
   asked the OS to dial down motion.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme="rgb-theme"]) {
    animation: none;
  }
}
