/* theme.css - Global theme variables */

/* ===== LIGHT THEME (DEFAULT) ===== */
:root {
  /* Math Literacy Colors */
  --math-primary: #1976d2;
  --math-secondary: #0288d1;
  --math-accent: #ff9800;
  --math-success: #4caf50;
  --math-warning: #ff5722;
  --math-success-bg: #4caf50;
  --math-warning-bg: #ff5722;
  --math-info: #00acc1;
  --math-purple: #9c27b0;
  --math-teal: #009688;
  --math-background: #eaeaeb;
  --math-card-bg: #ffffff;
  --math-card-alt: #f8faff;
  --math-text: #263238;
  --math-text-light: #546e7a;
  --math-border: #cfd8dc;
  --math-highlight: #e3f2fd;
  --math-gradient-1: linear-gradient(135deg, #1976d2, #0288d1);
  --math-gradient-2: linear-gradient(135deg, #ff9800, #ff5722);
  --math-gradient-3: linear-gradient(135deg, #4caf50, #009688);
  --math-gradient-4: linear-gradient(135deg, #9c27b0, #673ab7);
  --math-gradient-5: linear-gradient(135deg, #00acc1, #1976d2);
  
  /* Header/Footer colors (SA theme) */
  --header-bg: #0b1a2e;
  --header-text: #ffffff;
  --header-accent: #FCB514;
  --header-hover: #E03C31;
  
  /* Component specific colors */
  --hero-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1976d2 100%);
  --hero-icon: #ffd54f;
  --note-bg: linear-gradient(135deg, #fff8e7, #ffecb3);
  --note-text: #5d4037;
  --concept-bg: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  --concept-border: #a5d6a7;
  --concept-heading: #2e7d32;
  --concept-text: #1b5e20;
  --formula-bg: linear-gradient(145deg, #ffffff, #f0f7ff);
  --formula-border: #bbdefb;
  --formula-display: linear-gradient(145deg, #e3f2fd, #bbdefb);
  --formula-text: #1565c0;
  --components-bg: linear-gradient(145deg, #e8eaf6, #c5cae9);
  --component-name: #283593;
  --step-bg: linear-gradient(145deg, #ffffff, #f5f9ff);
  --step-number: linear-gradient(135deg, #ff9800, #ff5722);
  --calc-box: linear-gradient(145deg, #fff3e0, #ffe0b2);
  --calc-text: #bf360c;
  --scenario-bg: linear-gradient(145deg, #ffffff, #e8f0fe);
  --scenario-desc: linear-gradient(145deg, #e1f5fe, #b3e5fc);
  --data-card: linear-gradient(145deg, #ffffff, #f3e5f5);
  --data-border: #ce93d8;
  --data-heading: #6a1b9a;
  --data-text: #4a148c;
  --framework-bg: linear-gradient(145deg, #ffffff, #e0f2f1);
  --framework-border: #80cbc4;
  --framework-heading: #00796b;
  --framework-text: #004d40;
  --prep-card: linear-gradient(145deg, #ffffff, #fff3e0);
  --prep-border: #ffcc80;
  --prep-heading: #e65100;
  --prep-text: #bf360c;
  --caps-bg: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  --resource-card: linear-gradient(145deg, #ffffff, #e0f7fa);
  --resource-border: #80deea;
  --resource-heading: #006064;
  --resource-text: #00838f;
  --game-bg: linear-gradient(145deg, #ffffff, #f8f9fa);
  --game-option: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --reset-game: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --selector-bg: #ffffff;
  --tooltip-bg: #333333;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --math-primary: #64b5f6;
  --math-secondary: #42a5f5;
  --math-accent: #ffb74d;
  --math-success: #81c784;
  --math-warning: #ff8a65;
  --math-success-bg: #81c784;
  --math-warning-bg: #ff8a65;
  --math-info: #4dd0e1;
  --math-purple: #ba68c8;
  --math-teal: #4db6ac;
  --math-background: #0f1a2b;
  --math-card-bg: #1a2a40;
  --math-card-alt: #1f3450;
  --math-text: #e8edf5;
  --math-text-light: #b0c4de;
  --math-border: #2a405c;
  --math-highlight: #1e3a5f;
  --math-gradient-1: linear-gradient(135deg, #64b5f6, #42a5f5);
  --math-gradient-2: linear-gradient(135deg, #ffb74d, #ff8a65);
  --math-gradient-3: linear-gradient(135deg, #81c784, #4db6ac);
  --math-gradient-4: linear-gradient(135deg, #ba68c8, #9575cd);
  --math-gradient-5: linear-gradient(135deg, #4dd0e1, #64b5f6);
  
  /* Header/Footer stay the same */
  --header-bg: #0b1a2e;
  --header-text: #ffffff;
  --header-accent: #FCB514;
  --header-hover: #E03C31;
  
  /* Component specific colors - dark theme */
  --hero-gradient: linear-gradient(135deg, #1a2a40, #1f3450, #2a405c);
  --hero-icon: #ffb74d;
  --note-bg: linear-gradient(135deg, #1f3450, #1a2a40);
  --note-text: #e8edf5;
  --concept-bg: linear-gradient(135deg, #1a2c42, #1f3450);
  --concept-border: #2e7d32;
  --concept-heading: #81c784;
  --concept-text: #c8e6c9;
  --formula-bg: linear-gradient(145deg, #1a2a40, #1f3450);
  --formula-border: #2a405c;
  --formula-display: linear-gradient(145deg, #1f3450, #1a2a40);
  --formula-text: #64b5f6;
  --components-bg: linear-gradient(145deg, #1f3450, #1a2a40);
  --component-name: #ba68c8;
  --step-bg: linear-gradient(145deg, #1a2a40, #1f3450);
  --step-number: linear-gradient(135deg, #ffb74d, #ff8a65);
  --calc-box: linear-gradient(145deg, #1f3450, #1a2a40);
  --calc-text: #ffb74d;
  --scenario-bg: linear-gradient(145deg, #1a2a40, #1f3450);
  --scenario-desc: linear-gradient(145deg, #1f3450, #1a2a40);
  --data-card: linear-gradient(145deg, #1a2a40, #1f3450);
  --data-border: #5a2a7c;
  --data-heading: #ba68c8;
  --data-text: #e9d2ff;
  --framework-bg: linear-gradient(145deg, #1a2a40, #1f3450);
  --framework-border: #2a5c5c;
  --framework-heading: #4db6ac;
  --framework-text: #c1f2f5;
  --prep-card: linear-gradient(145deg, #1a2a40, #1f3450);
  --prep-border: #5c4a2a;
  --prep-heading: #ffb74d;
  --prep-text: #ffe6cc;
  --caps-bg: linear-gradient(135deg, #1a2c42, #1f3450);
  --resource-card: linear-gradient(145deg, #1a2a40, #1f3450);
  --resource-border: #2a5c5c;
  --resource-heading: #4dd0e1;
  --resource-text: #b3e5fc;
  --game-bg: linear-gradient(145deg, #1a2a40, #1f3450);
  --game-option: linear-gradient(135deg, #64b5f6, #ba68c8);
  --reset-game: linear-gradient(135deg, #ffb74d, #ff8a65);
  --selector-bg: #1f3450;
  --tooltip-bg: #1f3450;
}

/* Theme toggle button with icons */
.theme-toggle {
  background: transparent;
  border: 2px solid var(--header-accent);
  color: var(--header-text);
  width: 56px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1001;
}

.theme-toggle:hover {
  background: var(--header-accent);
  color: var(--header-bg);
  transform: rotate(15deg) scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.9);
}

/* Icon styling */
.theme-toggle i {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  transition: all 0.3s ease;
}

/* Light theme (shows moon icon to switch to dark) */
[data-theme="light"] .theme-toggle .light-icon {
  display: block;
}

[data-theme="light"] .theme-toggle .dark-icon {
  display: none;
}

/* Dark theme (shows sun icon to switch to light) */
[data-theme="dark"] .theme-toggle .light-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .dark-icon {
  display: block;
}

/* Pulse animation */
.theme-toggle.pulse {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

body {
    background: var(--math-background) !important;
    color: var(--math-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== HERO SECTION - FIXED GREEN GRADIENT ===== */
.subject-hero {
    background: linear-gradient(135deg, #18c7c7, #33cc04e1, #0c0f0d);
    color: white;
    padding: 3rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.subject-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
    transform: rotate(30deg);
    pointer-events: none;
}

.subject-hero h1 {
    color: white;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.hero-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-icon i {
    width: 30px;
    height: 30px;
    color: white;
}

.curriculum-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: inline-block;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
    color: white;
}

/* Mobile responsive for hero */
@media (max-width: 768px) {
    .subject-hero {
        padding: 2rem 1rem;
    }
    
    .subject-hero h1 {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }
    
    .hero-icon i {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .subject-hero h1 {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
}