/* Add to existing variables.css */

/* Blue & White Theme (Default) */
[data-theme="blue"] {
    /* Primary Colors */
    --primary-bg: #F8FAFC;
    --secondary-bg: #FFFFFF;
    --card-bg: rgba(255, 255, 255, 0.9);
    --text-primary: #111827;
    --text-secondary: #374151;
    
    /* Blue Accents */
    --accent-primary: #2563EB;
    --accent-secondary: #3B82F6;
    --accent-glow: rgba(37, 99, 235, 0.1);
    --border-color: rgba(209, 213, 219, 0.5);
    
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(209, 213, 219, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --gradient-secondary: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
}

/* Dark Blue Theme */
[data-theme="dark-blue"] {
    --primary-bg: #111827;
    --secondary-bg: #1F2937;
    --card-bg: rgba(31, 41, 55, 0.8);
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --accent-primary: #60A5FA;
    --accent-secondary: #3B82F6;
    --accent-glow: rgba(96, 165, 250, 0.2);
    --border-color: rgba(75, 85, 99, 0.5);
    --glass-bg: rgba(31, 41, 55, 0.8);
    --glass-border: rgba(75, 85, 99, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    --gradient-secondary: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
}

/* ==========================================
   LIGHT THEME
   ========================================== */
[data-theme="light"] {
    --primary-bg: #f8f9fa;
    --secondary-bg: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --accent-primary: #284b63;
    --accent-secondary: #3c6e71;
    --accent-glow: rgba(40, 75, 99, 0.1);
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --gradient-primary: linear-gradient(135deg, #284b63 0%, #3c6e71 100%);
    --gradient-secondary: linear-gradient(135deg, #1a365d 0%, #284b63 100%);
}

/* ==========================================
   MIDNIGHT THEME
   ========================================== */
[data-theme="midnight"] {
    --primary-bg: #0c0c14;
    --secondary-bg: #151522;
    --card-bg: rgba(30, 30, 46, 0.7);
    --text-primary: #e0e0ff;
    --text-secondary: #a0a0cc;
    --accent-primary: #6e71c4;
    --accent-secondary: #4b63d4;
    --accent-glow: rgba(110, 113, 196, 0.3);
    --border-color: rgba(224, 224, 255, 0.1);
    --glass-bg: rgba(224, 224, 255, 0.05);
    --glass-border: rgba(224, 224, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --gradient-primary: linear-gradient(135deg, #6e71c4 0%, #4b63d4 100%);
    --gradient-secondary: linear-gradient(135deg, #4b63d4 0%, #3d5aa8 100%);
}

/* ==========================================
   EMERALD THEME
   ========================================== */
[data-theme="emerald"] {
    --primary-bg: #0c140f;
    --secondary-bg: #152218;
    --card-bg: rgba(30, 46, 34, 0.7);
    --text-primary: #e0ffe0;
    --text-secondary: #a0cca0;
    --accent-primary: #3c9e71;
    --accent-secondary: #2d7d5a;
    --accent-glow: rgba(60, 158, 113, 0.3);
    --border-color: rgba(224, 255, 224, 0.1);
    --glass-bg: rgba(224, 255, 224, 0.05);
    --glass-border: rgba(224, 255, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #3c9e71 0%, #2d7d5a 100%);
    --gradient-secondary: linear-gradient(135deg, #2d7d5a 0%, #1f5a3f 100%);
}

/* ==========================================
   RUBY THEME
   ========================================== */
[data-theme="ruby"] {
    --primary-bg: #140c0c;
    --secondary-bg: #221515;
    --card-bg: rgba(46, 30, 30, 0.7);
    --text-primary: #ffe0e0;
    --text-secondary: #cca0a0;
    --accent-primary: #c43c6e;
    --accent-secondary: #a32d57;
    --accent-glow: rgba(196, 60, 110, 0.3);
    --border-color: rgba(255, 224, 224, 0.1);
    --glass-bg: rgba(255, 224, 224, 0.05);
    --glass-border: rgba(255, 224, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #c43c6e 0%, #a32d57 100%);
    --gradient-secondary: linear-gradient(135deg, #a32d57 0%, #7d1f42 100%);
}

/* ==========================================
   SAPPHIRE THEME
   ========================================== */
[data-theme="sapphire"] {
    --primary-bg: #0c0f14;
    --secondary-bg: #151a22;
    --card-bg: rgba(30, 36, 46, 0.7);
    --text-primary: #e0e8ff;
    --text-secondary: #a0accc;
    --accent-primary: #3c6ec4;
    --accent-secondary: #2d5aa3;
    --accent-glow: rgba(60, 110, 196, 0.3);
    --border-color: rgba(224, 232, 255, 0.1);
    --glass-bg: rgba(224, 232, 255, 0.05);
    --glass-border: rgba(224, 232, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #3c6ec4 0%, #2d5aa3 100%);
    --gradient-secondary: linear-gradient(135deg, #2d5aa3 0%, #1f4080 100%);
}

/* ==========================================
   AMBER THEME
   ========================================== */
[data-theme="amber"] {
    --primary-bg: #14100c;
    --secondary-bg: #221b15;
    --card-bg: rgba(46, 38, 30, 0.7);
    --text-primary: #fff4e0;
    --text-secondary: #ccb8a0;
    --accent-primary: #c49e3c;
    --accent-secondary: #a37d2d;
    --accent-glow: rgba(196, 158, 60, 0.3);
    --border-color: rgba(255, 244, 224, 0.1);
    --glass-bg: rgba(255, 244, 224, 0.05);
    --glass-border: rgba(255, 244, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #c49e3c 0%, #a37d2d 100%);
    --gradient-secondary: linear-gradient(135deg, #a37d2d 0%, #825d1f 100%);
}

/* ==========================================
   SYSTEM PREFERENCE FALLBACK
   ========================================== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --primary-bg: #f8f9fa;
        --secondary-bg: #ffffff;
        --card-bg: rgba(255, 255, 255, 0.8);
        --text-primary: #1a1a2e;
        --text-secondary: #4a4a6a;
        --accent-primary: #284b63;
        --accent-secondary: #3c6e71;
        --accent-glow: rgba(40, 75, 99, 0.1);
        --border-color: rgba(0, 0, 0, 0.1);
        --glass-bg: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(0, 0, 0, 0.1);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
}

/* ==========================================
   SMOOTH TRANSITIONS
   ========================================== */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal), 
                box-shadow var(--transition-normal);
}