:root {
  /* Vibrant, Child-Friendly Palette */
  --primary-color: #FF6B6B;      /* Coral Red */
  --secondary-color: #4ECDC4;    /* Teal/Aqua */
  --tertiary-color: #FFD93D;     /* Sunny Yellow */
  --accent-color: #6C5CE7;       /* Purple */

  /* Subject Colors */
  --subject-science: #4ECDC4;
  --subject-math: #FF6B6B;
  --subject-english: #6C5CE7;

  /* State Colors */
  --success-color: #2ECC71;
  --warning-color: #F39C12;
  --error-color: #E74C3C;
  --info-color: #3498DB;

  /* Neutrals & Backgrounds (Light Mode) */
  --bg-color: #F4F7F6;
  --surface-color: #FFFFFF;
  --text-primary: #2C3E50;
  --text-secondary: #7F8C8D;
  --border-color: #E0E6ED;

  /* Typography */
  --font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Sizing & Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.1);
  --shadow-primary: 0 8px 16px rgba(255, 107, 107, 0.3);

  /* Touch Targets */
  --touch-target: 48px;
  
  /* Z-index */
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

[data-theme="dark"] {
  /* Dark Mode Palette */
  --bg-color: #121212;
  --surface-color: #1E1E1E;
  --text-primary: #F8F9FA;
  --text-secondary: #B0BEC5;
  --border-color: #333333;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.5);
}