/**
 * Gooner Training Academy - Unified Color System
 * Central color palette for visual consistency across all pages
 */

:root {
    /* ===== PRIMARY BRAND COLORS ===== */
    --color-primary: #00d4ff;                    /* Neon Cyan - Main brand color */
    --color-primary-dark: #00a3cc;               /* Darker cyan */
    --color-primary-light: #33ddff;              /* Lighter cyan */
    
    --color-secondary: #9b59b6;                  /* Purple - Secondary accent */
    --color-secondary-dark: #8e44ad;             /* Darker purple */
    --color-secondary-light: #c29bd6;            /* Lighter purple */
    
    /* ===== ACCENT COLORS ===== */
    --color-accent-pink: #ff006e;                /* Hot pink */
    --color-accent-red: #e74c3c;                 /* Red for warnings/danger */
    --color-accent-red-dark: #c0392b;            /* Darker red */
    --color-accent-green: #00ff88;               /* Success green */
    --color-accent-blue: #3498db;                /* Info blue */
    --color-accent-gold: #ffd700;                /* Gold accent */
    
    /* Semantic aliases for common uses */
    --color-warning: #f39c12;                    /* Orange-gold warning color */
    --color-success: var(--color-accent-green);  /* Success state */
    --color-success-light: var(--bg-secondary-overlay-20);  /* Light success (theme-aware) */
    --color-error: var(--color-accent-red);      /* Error state */
    --color-info: var(--color-accent-blue);      /* Info state */
    --color-danger: var(--color-accent-red);     /* Danger/critical (uses accent red) */
    --color-gold: var(--color-accent-gold);      /* Gold (alias) */
    --color-orange: var(--color-warning);        /* Orange (uses warning color) */
    --color-pink: var(--color-accent-pink);      /* Deep pink (alias) */
    --color-purple: var(--color-secondary);      /* Purple (uses theme secondary) */
    --color-accent: var(--color-primary);        /* Blue accent (uses theme primary) */
    
    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #0a0a0a;                       /* Nearly black */
    --bg-secondary: #1a1a1a;                     /* Dark gray */
    --bg-tertiary: #2d1b3d;                      /* Dark purple tint */
    --bg-card: #1e1e2e;                          /* Card background */
    --bg-black: var(--bg-primary);               /* Pure black (uses bg-primary) */
    
    /* Background overlays with opacity */
    --bg-overlay-light: rgba(0, 0, 0, 0.7);
    --bg-overlay-medium: rgba(0, 0, 0, 0.8);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.9);
    --bg-overlay-glass: rgba(0, 0, 0, 0.5);
    
    /* Colored overlays */
    --bg-primary-overlay-10: rgba(0, 212, 255, 0.1);
    --bg-primary-overlay-20: rgba(0, 212, 255, 0.2);
    --bg-secondary-overlay-10: rgba(155, 89, 182, 0.1);
    --bg-secondary-overlay-20: rgba(155, 89, 182, 0.2);
    --bg-secondary-overlay-30: rgba(155, 89, 182, 0.3);
    --bg-secondary-overlay-90: var(--bg-overlay-heavy); /* Dark overlay (uses overlay-heavy) */
    
    /* ===== TEXT COLORS ===== */
    --text-primary: #ffffff;                     /* Pure white */
    --text-secondary: #e8e8e8;                   /* Light gray */
    --text-muted: #bdc3c7;                       /* Muted gray */
    --text-dim: #7f8c8d;                         /* Dim gray */
    --text-white: #fff;                          /* Pure white (alias) */
    --text-dark: #2c3e50;                        /* Dark text for light backgrounds */
    
    /* ===== BORDER COLORS ===== */
    --border-primary: var(--color-primary);
    --border-secondary: var(--color-secondary);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.3);
    
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-red: linear-gradient(135deg, var(--color-accent-red), var(--color-accent-red-dark));
    --gradient-dark: linear-gradient(135deg, #2c3e50, #34495e);
    
    /* Page background gradient */
    --color-background-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
    
    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.5);
    
    /* Glow shadows */
    --shadow-glow-primary: 0 0 15px rgba(0, 212, 255, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(155, 89, 182, 0.5);
    --shadow-glow-red: 0 4px 15px rgba(231, 76, 60, 0.3);
    
    /* ===== SEMANTIC COLORS ===== */
    /* Buttons */
    --btn-primary-bg: var(--bg-primary-overlay-20);
    --btn-primary-border: var(--color-primary);
    --btn-primary-text: var(--text-primary);
    --btn-primary-hover-bg: var(--bg-primary-overlay-20);
    --btn-primary-hover-border: var(--color-primary-light);
    
    --btn-secondary-bg: rgba(255, 255, 255, 0.1);
    --btn-secondary-border: rgba(255, 255, 255, 0.2);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover-bg: rgba(255, 255, 255, 0.15);
    --btn-secondary-hover-border: rgba(255, 255, 255, 0.3);
    
    --btn-danger-bg: rgba(231, 76, 60, 0.3);
    --btn-danger-border: var(--color-accent-red);
    --btn-danger-text: var(--text-primary);
    --btn-danger-hover-bg: rgba(231, 76, 60, 0.4);
    --btn-danger-hover-border: #ec7063;
    
    /* Headers */
    --header-bg: var(--bg-overlay-heavy);
    --header-border: var(--border-primary);
    --header-title-color: var(--color-primary);
    --header-subtitle-color: var(--text-secondary);
    
    /* Cards */
    --card-bg: rgba(20, 20, 20, 0.95);
    --card-border: var(--border-secondary);
    --card-hover-border: var(--color-primary);
    --card-shadow: var(--shadow-lg);
    
    /* Status colors */
    --status-success: var(--color-accent-green);
    --status-warning: #f39c12;
    --status-error: var(--color-accent-red);
    --status-info: var(--color-accent-blue);
    
    /* ===== SPACING & SIZING ===== */
    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
    --border-radius-xl: 20px;
    
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ===== THEME SELECTOR UI STYLES ===== */
.theme-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-selector label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.theme-select {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.theme-select:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}

.theme-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* Theme toggle buttons (compact version) */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--border-radius-sm);
    padding: 0.2rem 0.4rem;
}

.theme-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.theme-btn:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

.theme-label {
    font-size: 1.2rem;
    padding: 0 0.2rem;
    user-select: none;
}

/* Dark mode variant (reserved for future light mode support) */

/* ===== THEME VARIANTS ===== */

/* Electric Violet Theme */
[data-theme="electric-violet"] {
    --color-primary: #8386f5;
    --color-primary-dark: #3d43b4;
    --color-primary-light: #a5a8f7;
    --color-secondary: #1afe49;
    --color-secondary-dark: #083e12;
    --color-secondary-light: #4ffe75;
    --bg-primary: #041348;
    --bg-secondary: #041348;
    --bg-tertiary: #083e12;
    --header-title-color: #8386f5;
    --header-border: #8386f5;
    --border-primary: #8386f5;
    --btn-primary-border: #8386f5;
    --shadow-glow-primary: 0 0 15px rgba(131, 134, 245, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(26, 254, 73, 0.5);
    --bg-primary-overlay-10: rgba(131, 134, 245, 0.1);
    --bg-primary-overlay-20: rgba(131, 134, 245, 0.2);
    --bg-secondary-overlay-10: rgba(26, 254, 73, 0.1);
    --bg-secondary-overlay-20: rgba(26, 254, 73, 0.2);
    --color-success: #1afe49;
    --status-success: #1afe49;
    --color-background-gradient: linear-gradient(135deg, #041348 0%, #083e12 50%, #041348 100%);
}

/* Magenta Dream Theme */
[data-theme="magenta-dream"] {
    --color-primary: #f887ff;
    --color-primary-dark: #de004e;
    --color-primary-light: #faa8ff;
    --color-secondary: #de004e;
    --color-secondary-dark: #860029;
    --color-secondary-light: #ff3378;
    --bg-primary: #29132e;
    --bg-secondary: #321450;
    --bg-tertiary: #29132e;
    --header-title-color: #f887ff;
    --header-border: #f887ff;
    --border-primary: #f887ff;
    --btn-primary-border: #f887ff;
    --shadow-glow-primary: 0 0 15px rgba(248, 135, 255, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(222, 0, 78, 0.5);
    --bg-primary-overlay-10: rgba(248, 135, 255, 0.1);
    --bg-primary-overlay-20: rgba(248, 135, 255, 0.2);
    --bg-secondary-overlay-10: rgba(222, 0, 78, 0.1);
    --bg-secondary-overlay-20: rgba(222, 0, 78, 0.2);
    --color-error: #860029;
    --color-accent-red: #860029;
    --status-error: #860029;
    --color-background-gradient: linear-gradient(135deg, #29132e 0%, #321450 50%, #29132e 100%);
}

/* Hot Pink Fury Theme */
[data-theme="hot-pink-fury"] {
    --color-primary: #ff124f;
    --color-primary-dark: #ff00a0;
    --color-primary-light: #ff4575;
    --color-secondary: #7a04eb;
    --color-secondary-dark: #120458;
    --color-secondary-light: #a136ff;
    --bg-primary: #120458;
    --bg-secondary: #120458;
    --bg-tertiary: #7a04eb;
    --header-title-color: #ff124f;
    --header-border: #ff124f;
    --border-primary: #ff124f;
    --btn-primary-border: #ff124f;
    --shadow-glow-primary: 0 0 15px rgba(255, 18, 79, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(122, 4, 235, 0.5);
    --bg-primary-overlay-10: rgba(255, 18, 79, 0.1);
    --bg-primary-overlay-20: rgba(255, 18, 79, 0.2);
    --bg-secondary-overlay-10: rgba(122, 4, 235, 0.1);
    --bg-secondary-overlay-20: rgba(122, 4, 235, 0.2);
    --bg-secondary-overlay-30: rgba(122, 4, 235, 0.3);
    --color-accent-pink: #fe75fe;
    --color-background-gradient: linear-gradient(135deg, #120458 0%, #7a04eb 50%, #120458 100%);
}

/* Purple Neon Dream Theme */
[data-theme="purple-neon-dream"] {
    --color-primary: #fe00fe;
    --color-primary-dark: #7700a6;
    --color-primary-light: #ff4dff;
    --color-secondary: #defe47;
    --color-secondary-dark: #00b3fe;
    --color-secondary-light: #f4ff85;
    --bg-primary: #0016ee;
    --bg-secondary: #7700a6;
    --bg-tertiary: #0016ee;
    --header-title-color: #fe00fe;
    --header-border: #fe00fe;
    --border-primary: #fe00fe;
    --btn-primary-border: #fe00fe;
    --shadow-glow-primary: 0 0 15px rgba(254, 0, 254, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(222, 254, 71, 0.5);
    --bg-primary-overlay-10: rgba(254, 0, 254, 0.1);
    --bg-primary-overlay-20: rgba(254, 0, 254, 0.2);
    --bg-secondary-overlay-10: rgba(222, 254, 71, 0.1);
    --bg-secondary-overlay-20: rgba(222, 254, 71, 0.2);
    --color-accent-blue: #00b3fe;
    --color-background-gradient: linear-gradient(135deg, #0016ee 0%, #7700a6 50%, #0016ee 100%);
}

/* Crimson Passion Theme */
[data-theme="crimson-passion"] {
    --color-primary: #ff2a6d;
    --color-primary-dark: #f70e0e;
    --color-primary-light: #ff5c8a;
    --color-secondary: #aa477e;
    --color-secondary-dark: #005678;
    --color-secondary-light: #c96b9d;
    --bg-primary: #01012b;
    --bg-secondary: #005678;
    --bg-tertiary: #aa477e;
    --header-title-color: #ff2a6d;
    --header-border: #ff2a6d;
    --border-primary: #ff2a6d;
    --btn-primary-border: #ff2a6d;
    --shadow-glow-primary: 0 0 15px rgba(255, 42, 109, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(170, 71, 126, 0.5);
    --bg-primary-overlay-10: rgba(255, 42, 109, 0.1);
    --bg-primary-overlay-20: rgba(255, 42, 109, 0.2);
    --bg-secondary-overlay-10: rgba(170, 71, 126, 0.1);
    --bg-secondary-overlay-20: rgba(170, 71, 126, 0.2);
    --color-accent-red: #f70e0e;
    --color-background-gradient: linear-gradient(135deg, #01012b 0%, #005678 50%, #01012b 100%);
}

/* Golden Ember Theme */
[data-theme="golden-ember"] {
    --color-primary: #fdd870;
    --color-primary-dark: #d0902f;
    --color-primary-light: #fff69f;
    --color-secondary: #a15501;
    --color-secondary-dark: #351409;
    --color-secondary-light: #c97503;
    --bg-primary: #351409;
    --bg-secondary: #351409;
    --bg-tertiary: #a15501;
    --header-title-color: #fdd870;
    --header-border: #fdd870;
    --border-primary: #fdd870;
    --btn-primary-border: #fdd870;
    --shadow-glow-primary: 0 0 15px rgba(253, 216, 112, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(161, 85, 1, 0.5);
    --bg-primary-overlay-10: rgba(253, 216, 112, 0.1);
    --bg-primary-overlay-20: rgba(253, 216, 112, 0.2);
    --bg-secondary-overlay-10: rgba(161, 85, 1, 0.1);
    --bg-secondary-overlay-20: rgba(161, 85, 1, 0.2);
    --color-accent-gold: #fff69f;
    --color-warning: #d0902f;
    --color-background-gradient: linear-gradient(135deg, #351409 0%, #a15501 50%, #351409 100%);
}

/* Aqua Mist Theme */
[data-theme="aqua-mist"] {
    --color-primary: #85ebd9;
    --color-primary-dark: #3d898d;
    --color-primary-light: #a8f0e2;
    --color-secondary: #e2dddf;
    --color-secondary-dark: #b0acb0;
    --color-secondary-light: #f0ebed;
    --bg-primary: #2f404d;
    --bg-secondary: #3d898d;
    --bg-tertiary: #2f404d;
    --header-title-color: #85ebd9;
    --header-border: #85ebd9;
    --border-primary: #85ebd9;
    --btn-primary-border: #85ebd9;
    --shadow-glow-primary: 0 0 15px rgba(133, 235, 217, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(61, 137, 141, 0.5);
    --bg-primary-overlay-10: rgba(133, 235, 217, 0.1);
    --bg-primary-overlay-20: rgba(133, 235, 217, 0.2);
    --bg-secondary-overlay-10: rgba(226, 221, 223, 0.1);
    --bg-secondary-overlay-20: rgba(226, 221, 223, 0.2);
    --text-muted: #b0acb0;
    --color-background-gradient: linear-gradient(135deg, #2f404d 0%, #3d898d 50%, #2f404d 100%);
}

/* Coral Blaze Theme */
[data-theme="coral-blaze"] {
    --color-primary: #ff184c;
    --color-primary-dark: #003062;
    --color-primary-light: #ff577d;
    --color-secondary: #0a9cf5;
    --color-secondary-dark: #003062;
    --color-secondary-light: #5cb8f7;
    --bg-primary: #003062;
    --bg-secondary: #003062;
    --bg-tertiary: #0a9cf5;
    --header-title-color: #ff184c;
    --header-border: #ff184c;
    --border-primary: #ff184c;
    --btn-primary-border: #ff184c;
    --shadow-glow-primary: 0 0 15px rgba(255, 24, 76, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(10, 156, 245, 0.5);
    --bg-primary-overlay-10: rgba(255, 24, 76, 0.1);
    --bg-primary-overlay-20: rgba(255, 24, 76, 0.2);
    --bg-secondary-overlay-10: rgba(10, 156, 245, 0.1);
    --bg-secondary-overlay-20: rgba(10, 156, 245, 0.2);
    --color-accent-pink: #ffccdc;
    --color-accent-blue: #0a9cf5;
    --color-background-gradient: linear-gradient(135deg, #003062 0%, #0a9cf5 50%, #003062 100%);
}