:root {
  /* Brand (level/accent colours stay vibrant in both themes) */
  --color-primary: #8B1A4A;
  --color-primary-light: #B8336A;
  --color-primary-dark: #6D1039;

  /* Vibrant palette */
  --color-gold: #FFC800;
  --color-gold-dark: #E0B000;
  --color-coral: #FF9600;
  --color-coral-dark: #E08600;
  --color-green: #58CC02;
  --color-green-dark: #46A302;
  --color-red: #FF4B4B;
  --color-red-dark: #EA2B2B;
  --color-blue: #1CB0F6;
  --color-blue-dark: #1899D6;
  --color-purple: #CE82FF;
  --color-purple-dark: #A855CC;
  --color-amber: #FF9600;

  /* Semantic colour aliases */
  --color-surface: var(--bg-card);
  --color-surface-raised: var(--bg-card-hover);
  --color-border: var(--border-card);
  --color-border-depth: var(--border-card-bottom);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-on-dark: var(--text-on-dark);

  /* Mode gradients */
  --gradient-header: linear-gradient(135deg, #6D1039 0%, #8B1A4A 40%, #CE3264 100%);
  --gradient-exam:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(206, 130, 255, 0.24) 0%, transparent 42%),
    linear-gradient(135deg, #8B1A4A 0%, #A62561 48%, #6333A5 100%);
  --gradient-review:
    linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(139, 26, 74, 0.07)),
    var(--bg-card);
  --gradient-repair:
    linear-gradient(135deg, rgba(255, 150, 0, 0.12), rgba(139, 26, 74, 0.08)),
    var(--bg-card);
  --gradient-practice:
    linear-gradient(135deg, rgba(28, 176, 246, 0.10), rgba(124, 77, 255, 0.07)),
    var(--bg-card);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography scale */
  --type-h1: 28px;
  --type-h2: 22px;
  --type-section: 18px;
  --type-body: 16px;
  --type-body-sm: 14px;
  --type-caption: 12px;
  --type-micro: 10px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Icon scale */
  --icon-utility: 32px;
  --icon-avatar: 40px;
  --icon-summary: 56px;
  --icon-learn-mode: 64px;

  /* Difficulty */
  --level-elementary: #58CC02;
  --level-elementary-dark: #46A302;
  --level-basic: #1CB0F6;
  --level-basic-dark: #1899D6;
  --level-intermediate: #CE82FF;
  --level-intermediate-dark: #A855CC;
  --level-upper: #FF9600;
  --level-upper-dark: #E08600;
  --level-advanced: #FF4B4B;
  --level-advanced-dark: #EA2B2B;
  --level-logic: #00BCD4;
  --level-logic-dark: #0097A7;
  --level-linalg: #7C4DFF;
  --level-linalg-dark: #651FFF;
  --level-calc2: #FF6D00;
  --level-calc2-dark: #E65100;
  --level-discrete: #00C853;
  --level-discrete-dark: #009624;
  --level-probability: #2979FF;
  --level-probability-dark: #0D47A1;
  --level-diffeq: #D50000;
  --level-diffeq-dark: #B71C1C;
  --level-algorithms: #546E7A;
  --level-algorithms-dark: #37474F;

  /* Typography */
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-logo: 'Fredoka One', cursive;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-card: 16px;
  --radius-button: 14px;

  /* Touch */
  --touch-min: 44px;

  /* Animation */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 400ms ease;

  /* ===== LIGHT THEME TOKENS (default) ===== */
  --bg-main: #FFF0F5;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FDF2F7;
  --bg-surface: #F0E0EB;
  --bg-input: #FFFFFF;

  --text-primary: #3C3C3C;
  --text-secondary: #777777;
  --text-tertiary: #AFAFAF;
  --text-hint: #AFAFAF;
  --text-on-dark: #FFFFFF;

  --border-card: #E5E5E5;
  --border-card-bottom: #DCDCDC;
  --border-light: 2px solid #E5E5E5;
  --border-medium: 2px solid #D4A0B8;

  --shadow-card: 0 2px 0 #E5E5E5;
  --shadow-button: 0 4px 0 var(--color-primary-dark);

  /* Snake path section backgrounds */
  --bg-section-elementary: rgba(88, 204, 2, 0.08);
  --bg-section-basic: rgba(28, 176, 246, 0.08);
  --bg-section-intermediate: rgba(206, 130, 255, 0.08);
  --bg-section-upper: rgba(255, 150, 0, 0.08);
  --bg-section-advanced: rgba(255, 75, 75, 0.08);

  --bg-locked: #F0F0F0;
  --border-locked: #E5E5E5;
  --text-locked: #AFAFAF;

  --bg-katex: #FDFAFF;
  --border-katex: #EDE5F0;
  --bg-option: #FFFFFF;
  --border-option: #E5E5E5;

  --bg-hint: #FFF8E1;
  --border-hint: #FFD700;

  --bg-progress-track: #E5E5E5;

  --bg-navbar: #FFFFFF;
  --border-navbar: #F0F0F0;

  /* Neon game UI layer */
  --neo-bg: #070714;
  --neo-bg-2: #0E0A20;
  --neo-panel: rgba(24, 16, 48, 0.92);
  --neo-panel-2: rgba(35, 22, 65, 0.92);
  --neo-border: rgba(255, 75, 176, 0.24);
  --neo-border-strong: rgba(255, 75, 176, 0.52);
  --neo-pink: #FF2FA3;
  --neo-pink-2: #FF69C4;
  --neo-purple: #8D4DFF;
  --neo-purple-2: #C65BFF;
  --neo-gold: #FFC85B;
  --neo-green: #61E572;
  --neo-muted: #A99AC5;
  --neo-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --neo-glow-pink: 0 0 18px rgba(255, 47, 163, 0.34), 0 0 42px rgba(255, 47, 163, 0.16);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-main: #1A1A2E;
  --bg-card: #252540;
  --bg-card-hover: #2D2D4A;
  --bg-surface: #2D2D4A;
  --bg-input: #2D2D4A;

  --text-primary: #EAEAEA;
  --text-secondary: #A0A0B0;
  --text-tertiary: #666680;
  --text-hint: #666680;
  --text-on-dark: #EAEAEA;

  --border-card: #3A3A55;
  --border-card-bottom: #2A2A40;
  --border-light: 2px solid #3A3A55;
  --border-medium: 2px solid #4D4D6A;

  --shadow-card: 0 2px 0 #2A2A40;
  --shadow-button: 0 4px 0 var(--color-primary-dark);

  --bg-section-elementary: rgba(88, 204, 2, 0.06);
  --bg-section-basic: rgba(28, 176, 246, 0.06);
  --bg-section-intermediate: rgba(206, 130, 255, 0.06);
  --bg-section-upper: rgba(255, 150, 0, 0.06);
  --bg-section-advanced: rgba(255, 75, 75, 0.06);

  --bg-locked: #2A2A40;
  --border-locked: #3A3A55;
  --text-locked: #555570;

  --bg-katex: #2D2D4A;
  --border-katex: #3A3A55;
  --bg-option: #252540;
  --border-option: #3A3A55;

  --bg-hint: #3A3520;
  --border-hint: #B8960E;

  --bg-progress-track: #3A3A55;

  --bg-navbar: #1E1E35;
  --border-navbar: #2A2A45;

  --neo-bg: #070714;
  --neo-bg-2: #0E0A20;
  --neo-panel: rgba(24, 16, 48, 0.94);
  --neo-panel-2: rgba(35, 22, 65, 0.94);
  --neo-border: rgba(255, 75, 176, 0.24);
  --neo-border-strong: rgba(255, 75, 176, 0.52);
  --neo-pink: #FF2FA3;
  --neo-pink-2: #FF69C4;
  --neo-purple: #8D4DFF;
  --neo-purple-2: #C65BFF;
  --neo-gold: #FFC85B;
  --neo-green: #61E572;
  --neo-muted: #A99AC5;
  --neo-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --neo-glow-pink: 0 0 18px rgba(255, 47, 163, 0.34), 0 0 42px rgba(255, 47, 163, 0.16);
}

[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] .katex,
[data-theme="dark"] .katex * { color: var(--text-primary) !important; }