/* Theme Variables */
:root {
    /* Core Colors */
    --primary-bg: #0B1120;
    --card-bg: #0B1221;
    --border-color: #1a2942;

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);

    /* Brand Colors */
    --brand-blue: #1b98e0;
    --brand-green: #00ff8c;
    --brand-purple: #8B5CF6;
    --neon-sky-blue: #00f2ff;
    
    /* Blues */
    --dark-blue: #0A1525;
    --medium-blue: #0E1C2F;
    --light-blue: #162B45;
    --prussian-blue: #13293d;
    --lapis-lazuli: #006494;
    --cerulean: #247ba0;
    --celestial-blue: #1b98e0;
    --alice-blue: #e8f1f2;

    /* Greens */
    --neon-green: #39FF9B;
    --emerald-green: #2ECC71;
    --forest-green: #1B4D3E;
    --mint-green: #42FFA7;
    --sage-green: #1F3D2E;

    /* Accent Colors */
    --electric-green: #00ff8c;
    --neon-blue: #00d9ff;
    --success-green: #10B981;
    --warning-yellow: #F59E0B;
    --error-red: #EF4444;

    /* Glass Effects */
    --glass-bg: rgba(13, 25, 45, 0.5);
    --glass-border: rgba(30, 55, 90, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(10, 20, 35, 0.2);
    --blur-amount: 12px;
}

/* Page-Specific Themes */

/* Login/Auth Pages */
.auth-theme {
    --auth-bg: var(--dark-blue);
    --auth-card-bg: rgba(13, 25, 45, 0.7);
    --auth-border: rgba(30, 55, 90, 0.4);
    --auth-input-bg: rgba(13, 25, 45, 0.3);
    --auth-button-bg: var(--glass-bg);
    --auth-button-hover: var(--light-blue);
}

/* Dashboard */
.dashboard-theme {
    --dashboard-card-bg: rgba(13, 25, 45, 0.7);
    --dashboard-border: rgba(30, 55, 90, 0.4);
    --stat-card-bg: rgba(13, 25, 45, 0.5);
    --chart-grid-color: rgba(255, 255, 255, 0.1);
    --tooltip-bg: rgba(13, 25, 45, 0.9);
}

/* Assessment Pages */
.assessment-theme {
    --progress-bar-bg: rgba(255, 255, 255, 0.1);
    --progress-bar-fill: var(--electric-green);
    --question-card-bg: rgba(13, 25, 45, 0.7);
    --option-bg: rgba(13, 25, 45, 0.3);
    --option-border: rgba(30, 55, 90, 0.4);
    --option-hover: rgba(27, 152, 224, 0.2);
    --option-selected: rgba(27, 152, 224, 0.3);
}

/* Career Explorer */
.career-theme {
    --path-card-bg: rgba(13, 25, 45, 0.7);
    --path-card-border: rgba(30, 55, 90, 0.4);
    --skill-tag-bg: rgba(27, 152, 224, 0.2);
    --salary-text: var(--electric-green);
    --demand-high: var(--success-green);
    --demand-medium: var(--warning-yellow);
    --demand-low: var(--error-red);
}

/* Component Themes */

/* Buttons */
.button-theme {
    /* Glass Button */
    --btn-glass-bg: var(--glass-bg);
    --btn-glass-border: var(--glass-border);
    --btn-glass-hover: var(--light-blue);
    --btn-glass-active: var(--medium-blue);
    
    /* CTA Button */
    --btn-cta-bg: var(--glass-bg);
    --btn-cta-border: var(--glass-border);
    --btn-cta-hover: var(--light-blue);
    --btn-cta-active: var(--celestial-blue);

    /* Industry Button */
    --btn-industry-bg: rgba(13, 25, 45, 0.3);
    --btn-industry-border: var(--glass-border);
    --btn-industry-hover: rgba(27, 152, 224, 0.2);
    --btn-industry-active: rgba(27, 152, 224, 0.3);
}

/* Cards */
.card-theme {
    --card-glass-bg: rgba(13, 25, 45, 0.7);
    --card-glass-border: rgba(30, 55, 90, 0.4);
    --card-hover-shadow: 0 8px 32px rgba(27, 152, 224, 0.1);
    --card-active-border: var(--celestial-blue);
}

/* Forms */
.form-theme {
    --input-bg: rgba(13, 25, 45, 0.3);
    --input-border: rgba(30, 55, 90, 0.4);
    --input-focus-border: var(--celestial-blue);
    --input-placeholder: rgba(255, 255, 255, 0.4);
    --checkbox-bg: rgba(13, 25, 45, 0.3);
    --checkbox-checked: var(--celestial-blue);
}

/* Navigation */
.nav-theme {
    --nav-bg: rgba(13, 25, 45, 0.7);
    --nav-border: rgba(30, 55, 90, 0.4);
    --nav-link: var(--text-secondary);
    --nav-link-hover: var(--text-primary);
    --nav-link-active: var(--celestial-blue);
}

/* Charts and Data Visualization */
.chart-theme {
    --chart-bg: rgba(13, 25, 45, 0.3);
    --chart-grid: rgba(255, 255, 255, 0.1);
    --chart-line: var(--celestial-blue);
    --chart-bar: var(--electric-green);
    --chart-area: rgba(27, 152, 224, 0.2);
    --chart-tooltip: rgba(13, 25, 45, 0.9);
}

/* Animations */
.animation-theme {
    --transition-speed: 0.3s;
    --transition-timing: ease;
    --hover-transform: translateY(-1px);
    --active-transform: translateY(1px);
}

/* Status Colors */
.status-theme {
    --status-success: var(--success-green);
    --status-warning: var(--warning-yellow);
    --status-error: var(--error-red);
    --status-info: var(--celestial-blue);
}

/* Typography */
.typography-theme {
    --heading-color: var(--text-primary);
    --body-color: var(--text-secondary);
    --caption-color: var(--text-tertiary);
    --link-color: var(--celestial-blue);
    --link-hover: var(--electric-green);
}

/* Level Up/Donation Theme */
.level-up-theme {
    /* Text Styles */
    --level-up-heading: var(--neon-green);
    --level-up-text: var(--text-primary);
    
    /* Donation Cards */
    --donation-card-bg: var(--sage-green);
    --donation-card-border: var(--neon-green);
    --donation-card-glow: 0 0 20px rgba(57, 255, 155, 0.2);
    --donation-amount-color: var(--neon-green);
    
    /* Support Button */
    --support-btn-bg: var(--forest-green);
    --support-btn-border: var(--mint-green);
    --support-btn-text: var(--mint-green);
    --support-btn-glow: 0 0 30px rgba(66, 255, 167, 0.3);
    --support-btn-hover-bg: var(--sage-green);
    --support-btn-hover-glow: 0 0 40px rgba(66, 255, 167, 0.4);
}

/* Level Up Button Styles */
.level-up-button {
    background: var(--support-btn-bg);
    border: 1px solid var(--support-btn-border);
    color: var(--support-btn-text);
    box-shadow: var(--support-btn-glow);
    transition: all 0.3s ease;
}

.level-up-button:hover {
    background: var(--support-btn-hover-bg);
    box-shadow: var(--support-btn-hover-glow);
    transform: translateY(-2px);
}

.donation-card {
    background: var(--donation-card-bg);
    border: 1px solid var(--donation-card-border);
    box-shadow: var(--donation-card-glow);
    transition: all 0.3s ease;
}

.donation-card:hover {
    box-shadow: var(--support-btn-glow);
    transform: translateY(-2px);
}

.level-up-heading {
    color: var(--level-up-heading);
    text-shadow: 0 0 20px rgba(57, 255, 155, 0.3);
}

/* Glowing button effects */
.shadow-glow-green {
    box-shadow: 0 0 20px rgba(0, 245, 160, 0.2),
                0 0 40px rgba(0, 245, 160, 0.1);
}

.shadow-glow-blue {
    box-shadow: 0 0 20px rgba(0, 217, 245, 0.2),
                0 0 40px rgba(0, 217, 245, 0.1);
}

.text-electric-green {
    color: #00F5A0;
}

.text-electric-blue {
    color: #00D9F5;
}

/* Button hover states */
.glass:hover.shadow-glow-green {
    box-shadow: 0 0 30px rgba(0, 245, 160, 0.3),
                0 0 60px rgba(0, 245, 160, 0.2);
}

.glass:hover.shadow-glow-blue {
    box-shadow: 0 0 30px rgba(0, 217, 245, 0.3),
                0 0 60px rgba(0, 217, 245, 0.2);
}