/* 
 * Theme System for Tic Tac Toe Game
 * Default theme preserves the exact current design
 */

/* ===== DEFAULT THEME (Current Design) ===== */
:root {
    /* Background & Gradients */
    --theme-bg-primary: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
    --theme-bg-glass: rgba(255, 255, 255, 0.08);
    --theme-bg-glass-hover: rgba(255, 255, 255, 0.12);
    --theme-bg-glass-light: rgba(255, 255, 255, 0.05);
    --theme-bg-glass-medium: rgba(255, 255, 255, 0.1);
    --theme-bg-glass-strong: rgba(255, 255, 255, 0.15);
    
    /* Text Colors */
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.8);
    --theme-text-muted: rgba(255, 255, 255, 0.6);
    --theme-text-bright: rgba(255, 255, 255, 0.9);
    
    /* Accent Colors */
    --theme-accent-blue: #4f8ff7;
    --theme-accent-purple: #8b5cf6;
    --theme-accent-green: #10b981;
    --theme-accent-red: #ef4444;
    --theme-accent-orange: #f59e0b;
    
    /* Player Colors */
    --theme-player-x: #ef4444;
    --theme-player-o: #4f8ff7;
    
    /* Border & Stroke */
    --theme-border-light: rgba(255, 255, 255, 0.1);
    --theme-border-medium: rgba(255, 255, 255, 0.15);
    --theme-border-strong: rgba(255, 255, 255, 0.2);
    --theme-border-very-strong: rgba(255, 255, 255, 0.25);
    --theme-border-glass: rgba(255, 255, 255, 0.12);
    
    /* Shadows */
    --theme-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-shadow-hard: 0 20px 60px rgba(0, 0, 0, 0.4);
    --theme-shadow-button: 0 8px 25px;
    --theme-shadow-button-hover: 0 15px 35px;
    --theme-shadow-card: 0 10px 30px;
    --theme-shadow-modal: rgba(0, 0, 0, 0.8);
    
    /* Specific Component Colors */
    --theme-green-light: rgba(16, 185, 129, 0.1);
    --theme-green-medium: rgba(16, 185, 129, 0.2);
    --theme-green-strong: rgba(16, 185, 129, 0.3);
    --theme-green-stronger: rgba(16, 185, 129, 0.4);
    --theme-green-solid: #059669;
    
    --theme-blue-light: rgba(79, 143, 247, 0.1);
    --theme-blue-medium: rgba(79, 143, 247, 0.2);
    --theme-blue-strong: rgba(79, 143, 247, 0.3);
    --theme-blue-stronger: rgba(79, 143, 247, 0.4);
    
    --theme-orange-light: rgba(245, 158, 11, 0.4);
    --theme-orange-medium: rgba(245, 158, 11, 0.5);
    --theme-orange-bg: rgba(255, 193, 7, 0.2);
    
    --theme-red-light: rgba(239, 68, 68, 0.3);
    --theme-red-medium: rgba(239, 68, 68, 0.4);
    --theme-red-strong: rgba(239, 68, 68, 0.5);
    --theme-red-solid: #dc2626;
    
    --theme-gray-medium: #6b7280;
    --theme-gray-dark: #4b5563;
    --theme-gray-light: rgba(107, 114, 128, 0.3);
    --theme-gray-strong: rgba(107, 114, 128, 0.4);
    
    --theme-purple-light: rgba(147, 51, 234, 0.2);
    
    /* Text Shadow Colors */
    --theme-text-shadow-red: rgba(239, 68, 68, 0.5);
    --theme-text-shadow-blue: rgba(79, 143, 247, 0.5);
    --theme-text-shadow-blue-alt: rgba(59, 130, 246, 0.4);
    --theme-text-shadow-orange: rgba(245, 158, 11, 0.5);
    --theme-text-shadow-green: rgba(34, 197, 94, 0.5);
    --theme-text-shadow-red-medium: rgba(239, 68, 68, 0.4);
    
    /* Gradients */
    --theme-gradient-title: linear-gradient(135deg, #4f8ff7, #8b5cf6);
    --theme-gradient-blue-purple: linear-gradient(135deg, #4f8ff7, #8b5cf6);
    --theme-gradient-game-board: linear-gradient(45deg, #4f8ff7, #8b5cf6, #4f8ff7);
    --theme-gradient-button-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    --theme-gradient-card-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    --theme-gradient-cell-shine: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    --theme-gradient-divider: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    --theme-gradient-green-button: linear-gradient(135deg, #10b981, #059669);
    --theme-gradient-red-button: linear-gradient(135deg, #ef4444, #dc2626);
    --theme-gradient-gray-button: linear-gradient(135deg, #6b7280, #4b5563);
    
    /* Confetti Colors */
    --theme-confetti-1: #ff6b6b;
    --theme-confetti-2: #4ecdc4;
    --theme-confetti-3: #45b7d1;
    --theme-confetti-4: #f9ca24;
    --theme-confetti-5: #f0932b;
    --theme-confetti-6: #eb4d4b;
    --theme-confetti-7: #6c5ce7;
    --theme-confetti-8: #a29bfe;
    --theme-confetti-9: #fd79a8;
    --theme-confetti-10: #00b894;
    
    /* Effects */
    --theme-backdrop-blur: blur(20px);
    --theme-backdrop-blur-strong: blur(30px);
    --theme-backdrop-blur-light: blur(10px);
    
    /* Grid Background */
    --theme-grid-light: rgba(255, 255, 255, 0.03);
}

/* Theme transition for smooth changes */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}


/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    /* Backgrounds - Soft, easy on eyes */
    --theme-bg-primary: linear-gradient(135deg, #fafbfc 0%, #f1f3f5 100%);
    --theme-bg-glass: rgba(248, 250, 252, 0.75);
    --theme-bg-glass-hover: rgba(248, 250, 252, 0.85);
    --theme-bg-glass-light: rgba(248, 250, 252, 0.6);
    --theme-bg-glass-medium: rgba(248, 250, 252, 0.7);
    --theme-bg-glass-strong: rgba(248, 250, 252, 0.8);
    --theme-backdrop-blur: blur(15px);

    /* Text Colors - Softer but still AAA compliant */
    --theme-text-primary: #1e2832;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #718096;
    --theme-text-bright: #0d1117;

    /* Accent Colors - Muted but accessible */
    --theme-accent-blue: #2b6cb7;
    --theme-accent-purple: #805ad5;
    --theme-accent-green: #38a169;
    --theme-accent-red: #c53030;
    --theme-accent-orange: #dd6b20;

    /* Player Colors */
    --theme-player-x: #c53030;
    --theme-player-o: #2b6cb7;

    /* Borders - Softer */
    --theme-border-light: rgba(30, 40, 50, 0.12);
    --theme-border-medium: rgba(30, 40, 50, 0.18);
    --theme-border-strong: rgba(30, 40, 50, 0.22);
    --theme-border-very-strong: rgba(30, 40, 50, 0.26);
    --theme-border-glass: rgba(30, 40, 50, 0.12);

    /* Shadows - Gentler */
    --theme-shadow-soft: 0 8px 32px rgba(30, 40, 50, 0.08);
    --theme-shadow-hard: 0 20px 60px rgba(30, 40, 50, 0.12);
    --theme-shadow-button: 0 8px 25px;
    --theme-shadow-button-hover: 0 15px 35px;
    --theme-shadow-card: 0 10px 30px;
    --theme-shadow-modal: rgba(30, 40, 50, 0.5);

    /* Color Variations - Softer tones */
    --theme-green-light: rgba(56, 161, 105, 0.1);
    --theme-green-medium: rgba(56, 161, 105, 0.2);
    --theme-green-strong: rgba(56, 161, 105, 0.3);
    --theme-green-stronger: rgba(56, 161, 105, 0.4);
    --theme-green-solid: #38a169;

    --theme-blue-light: rgba(43, 108, 183, 0.1);
    --theme-blue-medium: rgba(43, 108, 183, 0.2);
    --theme-blue-strong: rgba(43, 108, 183, 0.3);
    --theme-blue-stronger: rgba(43, 108, 183, 0.4);

    --theme-orange-light: rgba(221, 107, 32, 0.4);
    --theme-orange-medium: rgba(221, 107, 32, 0.5);
    --theme-orange-bg: rgba(221, 107, 32, 0.15);

    --theme-red-light: rgba(197, 48, 48, 0.3);
    --theme-red-medium: rgba(197, 48, 48, 0.4);
    --theme-red-strong: rgba(197, 48, 48, 0.5);
    --theme-red-solid: #c53030;

    --theme-gray-medium: #718096;
    --theme-gray-dark: #4a5568;
    --theme-gray-light: rgba(113, 128, 150, 0.3);
    --theme-gray-strong: rgba(113, 128, 150, 0.4);

    --theme-purple-light: rgba(128, 90, 213, 0.2);

    /* Text Shadows - Softer */
    --theme-text-shadow-red: rgba(197, 48, 48, 0.5);
    --theme-text-shadow-blue: rgba(43, 108, 183, 0.5);
    --theme-text-shadow-blue-alt: rgba(43, 108, 183, 0.4);
    --theme-text-shadow-orange: rgba(221, 107, 32, 0.5);
    --theme-text-shadow-green: rgba(56, 161, 105, 0.5);
    --theme-text-shadow-red-medium: rgba(197, 48, 48, 0.4);

    /* Gradients - Muted but elegant */
    --theme-gradient-title: linear-gradient(135deg, #2b6cb7, #805ad5);
    --theme-gradient-blue-purple: linear-gradient(135deg, #2b6cb7, #805ad5);
    --theme-gradient-game-board: linear-gradient(45deg, #2b6cb7, #805ad5, #2b6cb7);
    --theme-gradient-button-shine: linear-gradient(90deg, transparent, rgba(30, 40, 50, 0.08), transparent);
    --theme-gradient-card-shine: linear-gradient(90deg, transparent, rgba(30, 40, 50, 0.04), transparent);
    --theme-gradient-cell-shine: linear-gradient(135deg, transparent, rgba(30, 40, 50, 0.06), transparent);
    --theme-gradient-divider: linear-gradient(90deg, transparent, rgba(30, 40, 50, 0.15), transparent);
    --theme-gradient-green-button: linear-gradient(135deg, #38a169, #2f855a);
    --theme-gradient-red-button: linear-gradient(135deg, #c53030, #9c2626);
    --theme-gradient-gray-button: linear-gradient(135deg, #718096, #4a5568);

    /* Confetti Colors - Harmonious with light theme */
    --theme-confetti-1: #c53030;
    --theme-confetti-2: #2b6cb7;
    --theme-confetti-3: #38a169;
    --theme-confetti-4: #dd6b20;
    --theme-confetti-5: #805ad5;
    --theme-confetti-6: #c53030;
    --theme-confetti-7: #805ad5;
    --theme-confetti-8: #d69e2e;
    --theme-confetti-9: #e53e3e;
    --theme-confetti-10: #38a169;

    /* Grid Background */
    --theme-grid-light: rgba(30, 40, 50, 0.04);
}

/* ===== NEON THEME ===== */
[data-theme="neon"] {
    /* Background & Gradients */
    --theme-bg-primary: linear-gradient(135deg, #0a0014 0%, #1a0033 100%);
    --theme-bg-glass: rgba(0, 255, 255, 0.1);
    --theme-bg-glass-hover: rgba(0, 255, 255, 0.2);
    --theme-bg-glass-light: rgba(0, 255, 255, 0.05);
    --theme-bg-glass-medium: rgba(0, 255, 255, 0.15);
    --theme-bg-glass-strong: rgba(0, 255, 255, 0.25);
    
    /* Text Colors */
    --theme-text-primary: #00ffff;
    --theme-text-secondary: rgba(0, 255, 255, 0.8);
    --theme-text-muted: rgba(0, 255, 255, 0.6);
    --theme-text-bright: rgba(0, 255, 255, 0.9);
    
    /* Accent Colors */
    --theme-accent-blue: #00bfff;
    --theme-accent-purple: #ff00ff;
    --theme-accent-green: #39ff14;
    --theme-accent-red: #ff073a;
    --theme-accent-orange: #ffff00;
    
    /* Player Colors */
    --theme-player-x: #ff1493;
    --theme-player-o: #00bfff;
    
    /* Border & Stroke */
    --theme-border-light: rgba(0, 255, 255, 0.2);
    --theme-border-medium: rgba(0, 255, 255, 0.3);
    --theme-border-strong: rgba(0, 255, 255, 0.4);
    --theme-border-very-strong: rgba(0, 255, 255, 0.5);
    --theme-border-glass: rgba(0, 255, 255, 0.3);
    
    /* Shadows */
    --theme-shadow-soft: 0 8px 32px rgba(0, 255, 255, 0.3);
    --theme-shadow-hard: 0 20px 60px rgba(255, 0, 255, 0.4);
    --theme-shadow-modal: rgba(0, 0, 0, 0.9);
    
    /* Special Neon Glows */
    --theme-glow-primary: 0 0 30px #00ffff, 0 0 60px #00ffff;
    --theme-glow-secondary: 0 0 30px #ff00ff, 0 0 60px #ff00ff;
    --theme-glow-success: 0 0 30px #39ff14, 0 0 60px #39ff14;
    
    /* Confetti Colors */
    --theme-confetti-1: #00ffff;
    --theme-confetti-2: #ff00ff;
    --theme-confetti-3: #39ff14;
    --theme-confetti-4: #ffff00;
    --theme-confetti-5: #ff073a;
    --theme-confetti-6: #00bfff;
    --theme-confetti-7: #ff1493;
    --theme-confetti-8: #9400d3;
    --theme-confetti-9: #00ff7f;
    --theme-confetti-10: #ffa500;
}

/* ===== RETRO THEME ===== */
[data-theme="retro"] {
    /* Backgrounds - Rich, warm retro vibes */
    --theme-bg-primary: linear-gradient(135deg, #2c1810 0%, #8b4513 100%);
    --theme-bg-glass: rgba(255, 228, 181, 0.15);
    --theme-bg-glass-hover: rgba(255, 228, 181, 0.25);
    --theme-bg-glass-light: rgba(255, 228, 181, 0.1);
    --theme-bg-glass-medium: rgba(255, 228, 181, 0.18);
    --theme-bg-glass-strong: rgba(255, 228, 181, 0.3);
    --theme-backdrop-blur: blur(15px);

    /* Text Colors - Warm, high contrast */
    --theme-text-primary: #fff8dc;
    --theme-text-secondary: #f5deb3;
    --theme-text-muted: #daa520;
    --theme-text-bright: #fffaf0;

    /* Accent Colors - Vibrant retro palette */
    --theme-accent-blue: #4169e1;
    --theme-accent-purple: #9370db;
    --theme-accent-green: #228b22;
    --theme-accent-red: #dc143c;
    --theme-accent-orange: #ff8c00;
    
    /* Player Colors - Vibrant retro */
    --theme-player-x: #dc143c;
    --theme-player-o: #4169e1;

    /* Borders - Rich wood tones */
    --theme-border-light: rgba(255, 228, 181, 0.2);
    --theme-border-medium: rgba(255, 228, 181, 0.3);
    --theme-border-strong: rgba(255, 228, 181, 0.4);
    --theme-border-very-strong: rgba(255, 228, 181, 0.5);
    --theme-border-glass: rgba(255, 228, 181, 0.25);

    /* Shadows - Warm, rich */
    --theme-shadow-soft: 0 8px 32px rgba(44, 24, 16, 0.6);
    --theme-shadow-hard: 0 20px 60px rgba(44, 24, 16, 0.8);
    --theme-shadow-button: 0 8px 25px;
    --theme-shadow-button-hover: 0 15px 35px;
    --theme-shadow-card: 0 10px 30px;
    --theme-shadow-modal: rgba(44, 24, 16, 0.8);
    
    /* Color Variations - Rich retro tones */
    --theme-green-light: rgba(34, 139, 34, 0.1);
    --theme-green-medium: rgba(34, 139, 34, 0.2);
    --theme-green-strong: rgba(34, 139, 34, 0.3);
    --theme-green-stronger: rgba(34, 139, 34, 0.4);
    --theme-green-solid: #228b22;

    --theme-blue-light: rgba(65, 105, 225, 0.1);
    --theme-blue-medium: rgba(65, 105, 225, 0.2);
    --theme-blue-strong: rgba(65, 105, 225, 0.3);
    --theme-blue-stronger: rgba(65, 105, 225, 0.4);

    --theme-orange-light: rgba(255, 140, 0, 0.4);
    --theme-orange-medium: rgba(255, 140, 0, 0.5);
    --theme-orange-bg: rgba(255, 140, 0, 0.15);

    --theme-red-light: rgba(220, 20, 60, 0.3);
    --theme-red-medium: rgba(220, 20, 60, 0.4);
    --theme-red-strong: rgba(220, 20, 60, 0.5);
    --theme-red-solid: #dc143c;

    --theme-gray-medium: #daa520;
    --theme-gray-dark: #cd853f;
    --theme-gray-light: rgba(218, 165, 32, 0.3);
    --theme-gray-strong: rgba(218, 165, 32, 0.4);

    --theme-purple-light: rgba(147, 112, 219, 0.2);

    /* Text Shadows - Warm retro glow */
    --theme-text-shadow-red: rgba(220, 20, 60, 0.5);
    --theme-text-shadow-blue: rgba(65, 105, 225, 0.5);
    --theme-text-shadow-blue-alt: rgba(65, 105, 225, 0.4);
    --theme-text-shadow-orange: rgba(255, 140, 0, 0.5);
    --theme-text-shadow-green: rgba(34, 139, 34, 0.5);
    --theme-text-shadow-red-medium: rgba(220, 20, 60, 0.4);

    /* Gradients - Rich wood and metal */
    --theme-gradient-title: linear-gradient(135deg, #ff8c00, #dc143c);
    --theme-gradient-blue-purple: linear-gradient(135deg, #4169e1, #9370db);
    --theme-gradient-game-board: linear-gradient(45deg, #daa520, #cd853f, #8b4513);
    --theme-gradient-button-shine: linear-gradient(90deg, transparent, rgba(255, 228, 181, 0.3), transparent);
    --theme-gradient-card-shine: linear-gradient(90deg, transparent, rgba(255, 228, 181, 0.2), transparent);
    --theme-gradient-cell-shine: linear-gradient(135deg, transparent, rgba(255, 228, 181, 0.25), transparent);
    --theme-gradient-divider: linear-gradient(90deg, transparent, rgba(255, 228, 181, 0.4), transparent);
    --theme-gradient-green-button: linear-gradient(135deg, #228b22, #006400);
    --theme-gradient-red-button: linear-gradient(135deg, #dc143c, #8b0000);
    --theme-gradient-gray-button: linear-gradient(135deg, #daa520, #b8860b);

    /* Confetti Colors - Vibrant retro palette */
    --theme-confetti-1: #dc143c;
    --theme-confetti-2: #4169e1;
    --theme-confetti-3: #ff8c00;
    --theme-confetti-4: #daa520;
    --theme-confetti-5: #228b22;
    --theme-confetti-6: #9370db;
    --theme-confetti-7: #ff6347;
    --theme-confetti-8: #ffd700;
    --theme-confetti-9: #32cd32;
    --theme-confetti-10: #4682b4;

    /* Grid Background */
    --theme-grid-light: rgba(255, 228, 181, 0.08);
}

/* ===== NATURE THEME ===== */
[data-theme="nature"] {
    /* Background & Gradients */
    --theme-bg-primary: linear-gradient(135deg, #31543c 0%, #4e784e 100%);
    --theme-bg-glass: rgba(143, 188, 143, 0.2);
    --theme-bg-glass-hover: rgba(143, 188, 143, 0.3);
    --theme-bg-glass-light: rgba(143, 188, 143, 0.15);
    --theme-bg-glass-medium: rgba(143, 188, 143, 0.25);
    --theme-bg-glass-strong: rgba(143, 188, 143, 0.35);
    
    /* Text Colors */
    --theme-text-primary: #f0fff0;
    --theme-text-secondary: rgba(240, 255, 240, 0.9);
    --theme-text-muted: rgba(240, 255, 240, 0.7);
    --theme-text-bright: rgba(240, 255, 240, 0.95);
    
    /* Accent Colors */
    --theme-accent-blue: #87ceeb;
    --theme-accent-purple: #9acd32;
    --theme-accent-green: #228b22;
    --theme-accent-red: #dc143c;
    --theme-accent-orange: #ffa500;
    
    /* Player Colors */
    --theme-player-x: #8fbc8f;
    --theme-player-o: #90ee90;
    
    /* Border & Stroke */
    --theme-border-light: rgba(143, 188, 143, 0.3);
    --theme-border-medium: rgba(143, 188, 143, 0.4);
    --theme-border-strong: rgba(143, 188, 143, 0.5);
    --theme-border-very-strong: rgba(143, 188, 143, 0.6);
    --theme-border-glass: rgba(143, 188, 143, 0.4);
    
    /* Shadows */
    --theme-shadow-soft: 0 8px 32px rgba(45, 90, 39, 0.3);
    --theme-shadow-hard: 0 20px 60px rgba(34, 139, 34, 0.4);
    --theme-shadow-modal: rgba(74, 124, 89, 0.8);
    
    /* Confetti Colors */
    --theme-confetti-1: #228b22;
    --theme-confetti-2: #9acd32;
    --theme-confetti-3: #00ff7f;
    --theme-confetti-4: #8fbc8f;
    --theme-confetti-5: #90ee90;
    --theme-confetti-6: #32cd32;
    --theme-confetti-7: #7cfc00;
    --theme-confetti-8: #adff2f;
    --theme-confetti-9: #98fb98;
    --theme-confetti-10: #00fa9a;
}