/* ===== CSS Variables - Matching Main Site Theme ===== */
:root {
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    
    /* Dark Theme (Default) - Matching main site */
    --bg-primary: #0a0a0c;
    --bg-secondary: #111114;
    --bg-tertiary: #18181c;
    --bg-card: #141418;
    --bg-card-hover: #1a1a1f;
    
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --border-color: #27272a;
    --border-subtle: #1f1f23;
    
    --accent: #a78bfa;
    --accent-glow: rgba(167, 139, 250, 0.15);
    --accent-secondary: #c4b5fd;
    --accent-teal: #a78bfa;
    --accent-teal-glow: rgba(167, 139, 250, 0.3);
    --accent-purple: #a78bfa;
    --accent-purple-glow: rgba(167, 139, 250, 0.3);
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-orange: #f97316;
    --accent-yellow: #eab308;
    --accent-pink: #f472b6;
    
    --gradient-start: #a78bfa;
    --gradient-end: #f472b6;
    
    --border-glow: rgba(167, 139, 250, 0.4);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--accent-glow);
    
    --grain-opacity: 0.03;
}

/* ===== Light Mode ===== */
body.light-mode {
    --bg-primary: #fafafa;
    --bg-secondary: #f4f4f5;
    --bg-tertiary: #e4e4e7;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f8fa;
    
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;
    
    --border-color: #e4e4e7;
    --border-subtle: #f0f0f2;
    
    --accent: #7c3aed;
    --accent-glow: rgba(124, 58, 237, 0.1);
    --accent-secondary: #8b5cf6;
    --accent-teal: #7c3aed;
    --accent-teal-glow: rgba(124, 58, 237, 0.2);
    --accent-purple: #7c3aed;
    --accent-purple-glow: rgba(124, 58, 237, 0.2);
    --accent-green: #16a34a;
    --accent-red: #dc2626;
    --accent-orange: #ea580c;
    
    --gradient-start: #7c3aed;
    --gradient-end: #db2777;
    
    --border-glow: rgba(124, 58, 237, 0.4);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px var(--accent-glow);
    
    --grain-opacity: 0.02;
}

/* Light mode component adjustments */
body.light-mode .bg-animation .dna-strand {
    opacity: 0.08;
}

body.light-mode .bg-animation .cell {
    opacity: 0.15;
}

body.light-mode .header {
    box-shadow: var(--shadow-sm);
}

body.light-mode .quiz-card {
    box-shadow: var(--shadow-sm);
}

body.light-mode .quiz-card:hover {
    box-shadow: var(--shadow-md);
}

body.light-mode .option-btn {
    border-width: 1px;
}

body.light-mode .score-circle::before {
    background: var(--bg-secondary);
}

body.light-mode .theme-toggle {
    background: var(--bg-secondary);
}

body.light-mode .theme-toggle:hover {
    border-color: var(--accent);
}

body.light-mode .theme-toggle .sun-icon {
    display: none;
}

body.light-mode .theme-toggle .moon-icon {
    display: block;
}