/* === DESIGN TOKENS === */
:root {
  /* --- Colors: Light Mode --- */
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-light: #ccfbf1;
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;
  --color-accent-light: #fef3c7;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f97316;
  --color-bg: #f8faf9;
  --color-surface: #ffffff;
  --color-text: #1a1a2e;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, #0d9488, #0891b2);
  --gradient-accent: linear-gradient(135deg, #f59e0b, #f97316);
  --gradient-hero: linear-gradient(135deg, #0d9488, #1e293b);

  /* --- Typography --- */
  --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- Spacing --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.08);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Topic Colors (keep existing) --- */
  --color-anatomy: #3b82f6;
  --color-pharmacology: #10b981;
  --color-pathology: #f59e0b;
  --color-physiology: #8b5cf6;
  --color-microbiology: #ef4444;
  --color-biochemistry: #06b6d4;
  --color-behavioral: #ec4899;
  --color-genetics: #84cc16;
  --color-immunology: #f97316;

  /* --- Score Colors --- */
  --color-score-good-bg: #d1fae5;
  --color-score-good-text: #059669;
  --color-score-ok-bg: #fef3c7;
  --color-score-ok-text: #d97706;
  --color-score-low-bg: #fee2e2;
  --color-score-low-text: #dc2626;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --color-primary: #2dd4bf;
  --color-primary-dark: #14b8a6;
  --color-primary-light: #1a3a38;
  --color-accent: #fbbf24;
  --color-accent-dark: #f59e0b;
  --color-accent-light: #3d2e0a;
  --color-success: #34d399;
  --color-danger: #f87171;
  --color-warning: #fb923c;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-elevated: #334155;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: #334155;

  --gradient-primary: linear-gradient(135deg, #2dd4bf, #22d3ee);
  --gradient-accent: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-hero: linear-gradient(135deg, #2dd4bf, #0f172a);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.3), 0 16px 48px rgba(0,0,0,0.25);

  --color-score-good-bg: #064e3b;
  --color-score-good-text: #6ee7b7;
  --color-score-ok-bg: #451a03;
  --color-score-ok-text: #fcd34d;
  --color-score-low-bg: #450a0a;
  --color-score-low-text: #fca5a5;
}