/* ===== THEME SYSTEM — Light & Dark ===== */

/* Light theme (default) */
[data-theme="light"] {
  --bg-primary: #f5f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edf0f7;
  --bg-card: #ffffff;
  --text-primary: #141726;
  --text-secondary: #4a5068;
  --text-muted: #8a90a8;
  --border-color: #e0e4ef;
  --border-hover: #c8cee0;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12);
  --accent-physics: #4f6ef7;
  --accent-biology: #22c55e;
  --accent-chemistry: #f97316;
  --accent-mathematics: #e040fb;
  --accent-primary: #4f6ef7;
  --accent-hover: #3b5ae0;
  --accent-subtle: rgba(79,110,247,0.08);
  --accent-glow: rgba(79,110,247,0.25);
  --canvas-bg: #f0f2f8;
  --navbar-bg: rgba(255,255,255,0.85);
  --overlay-bg: rgba(0,0,0,0.4);
  --hero-gradient: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 50%, #a855f7 100%);
  --code-bg: #eef1f6;
  --success: #22c55e;
  --success-soft: rgba(34,197,94,0.1);
  --warning: #eab308;
  --warning-soft: rgba(234,179,8,0.1);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,0.1);
  --info: #3b82f6;
  --info-soft: rgba(59,130,246,0.1);
  --input-bg: #ffffff;
  --slider-track: #dde1ec;
  --ring-1: rgba(79,110,247,0.15);
  --ring-2: rgba(79,110,247,0.08);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #0c0e1a;
  --bg-secondary: #151827;
  --bg-tertiary: #1e2236;
  --bg-card: #181c2e;
  --text-primary: #eceef5;
  --text-secondary: #a8adc4;
  --text-muted: #5c6280;
  --border-color: #262b40;
  --border-hover: #363c58;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.55);
  --accent-physics: #6b8cff;
  --accent-biology: #4ade80;
  --accent-chemistry: #fb923c;
  --accent-mathematics: #ce93d8;
  --accent-primary: #6b8cff;
  --accent-hover: #5a7df0;
  --accent-subtle: rgba(107,140,255,0.1);
  --accent-glow: rgba(107,140,255,0.2);
  --canvas-bg: #121522;
  --navbar-bg: rgba(12,14,26,0.9);
  --overlay-bg: rgba(0,0,0,0.65);
  --hero-gradient: linear-gradient(135deg, #3b4fc7 0%, #5b2da0 50%, #7c3aed 100%);
  --code-bg: #1e2236;
  --success: #4ade80;
  --success-soft: rgba(74,222,128,0.1);
  --warning: #facc15;
  --warning-soft: rgba(250,204,21,0.1);
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,0.1);
  --info: #60a5fa;
  --info-soft: rgba(96,165,250,0.1);
  --input-bg: #1a1e32;
  --slider-track: #2a2f48;
  --ring-1: rgba(107,140,255,0.15);
  --ring-2: rgba(107,140,255,0.08);
}

/* Smooth transitions on theme swap */
body,
.navbar,
.page-header,
.subject-card,
.sim-controls,
.info-box,
.quiz-container,
.dash-card,
.element-detail-panel,
.cell-info-panel,
.experiment-info,
.formula-box,
.btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}