/* css/theme.css — Khan Academy inspired light-first design system */
:root {
  /* Khan palette — light, friendly, high contrast for 7th graders */
  --bg-main: #F7F8FA;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F1F5;
  --bg-surface: #F5F7FA;
  --bg-input: #FFFFFF;
  --border-color: #D6D8DE;
  --border-focus: #1865F2;
  --text-primary: #21242C;
  --text-secondary: #5D5F66;
  --text-muted: #8A8D93;
  --accent-cyan: #1865F2;
  --accent-cyan-glow: rgba(24,101,242,0.15);
  --accent-gold: #FFA600;
  --accent-gold-glow: rgba(255,166,0,0.15);
  --accent-emerald: #1EB77A;
  --accent-emerald-glow: rgba(30,183,122,0.15);
  --accent-rose: #E54335;
  --accent-rose-glow: rgba(229,67,53,0.12);
  --accent-purple: #7C5CFF;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-glow-cyan: 0 0 0 4px rgba(24,101,242,0.12);
  --shadow-glow-gold: 0 0 0 4px rgba(255,166,0,0.12);
  --shadow-glow-emerald: 0 0 0 4px rgba(30,183,122,0.12);
  --khan-blue: #1865F2;
  --khan-blue-dark: #0D4FD8;
  --khan-green: #1EB77A;
  --khan-yellow: #FFBB00;
}
/* Keep dark as optional — default is now Khan light */
html[data-theme="dark"] {
  --bg-main: #0B132B;
  --bg-card: #16203B;
  --bg-card-hover: #1C274A;
  --bg-surface: #1C2541;
  --bg-input: #0E172F;
  --border-color: rgba(71,85,105,0.6);
  --border-focus: #1865F2;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent-cyan: #1865F2;
  --accent-emerald: #1EB77A;
  --accent-gold: #FFA600;
  --shadow-card: 0 10px 25px -5px rgba(0,0,0,0.4);
}
html[data-theme="light"] { /* alias to Khan light */ }
html[data-theme="oled"] {
  --bg-main: #000000; --bg-card: #0A0A0A; --bg-card-hover: #141414; --bg-surface: #121212; --bg-input: #050505;
  --border-color: #27272A; --border-focus: #1865F2; --text-primary: #FAFAFA; --text-secondary: #A1A1AA; --text-muted: #71717A;
  --accent-cyan: #1865F2; --accent-emerald: #1EB77A; --accent-gold: #FFA600;
}
html[data-theme="cyberpunk"] {
  --bg-main: #0D0221; --bg-card: #19053B; --bg-card-hover: #260A54; --bg-surface: #240046; --bg-input: #12012E;
  --border-color: #7B2CBF; --border-focus: #00F5D4; --text-primary: #FFFFFF; --text-secondary: #E0AAFF; --text-muted: #9D4EDD;
  --accent-cyan: #00F5D4; --accent-emerald: #70E000; --accent-gold: #FEE440;
}