/* Default Theme Variables - Modern Tech Blue (Fixed Theme) */
:root {
    --primary-color: #2271b3;
    --secondary-color: #1a5789;
    --accent-color: #f39c12;
    --light-color: #f4f9ff;
    --dark-color: #1d3557;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #2271b3 0%, #1d3557 100%);
    --accent-gradient: linear-gradient(45deg, #f39c12, #e67e22);
    --card-shadow: 0 10px 30px rgba(34, 113, 179, 0.1);
}

/* Theme 1: Modern Tech Blue (Enhanced Current) */
:root[data-theme="tech-blue"] {
    --primary-color: #2271b3;
    --secondary-color: #1a5789;
    --accent-color: #f39c12;
    --light-color: #f4f9ff;
    --dark-color: #1d3557;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #2271b3 0%, #1d3557 100%);
    --accent-gradient: linear-gradient(45deg, #f39c12, #e67e22);
    --card-shadow: 0 10px 30px rgba(34, 113, 179, 0.1);
}

/* Theme 2: Midnight Professional */
:root[data-theme="midnight-pro"] {
    --primary-color: #1e2a38;
    --secondary-color: #16202d;
    --accent-color: #ff6b6b;
    --light-color: #f8f9fa;
    --dark-color: #0d1117;
    --text-color: #2c3e50;
    --border-color: #e9ecef;
    --success-color: #28a745;
    --error-color: #dc3545;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #1e2a38 0%, #0d1117 100%);
    --accent-gradient: linear-gradient(45deg, #ff6b6b, #ee5a52);
    --card-shadow: 0 10px 30px rgba(30, 42, 56, 0.15);
}

/* Theme 3: Emerald Business */
:root[data-theme="emerald-business"] {
    --primary-color: #27ae60;
    --secondary-color: #1e8449;
    --accent-color: #f39c12;
    --light-color: #f8fff8;
    --dark-color: #2c3e50;
    --text-color: #2c3e50;
    --border-color: #d5f4e6;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    --accent-gradient: linear-gradient(45deg, #f39c12, #e67e22);
    --card-shadow: 0 10px 30px rgba(39, 174, 96, 0.12);
}

/* Theme 4: Royal Indigo */
:root[data-theme="royal-indigo"] {
    --primary-color: #4834d4;
    --secondary-color: #3c2aca;
    --accent-color: #ff9ff3;
    --light-color: #f8f7ff;
    --dark-color: #2c2c54;
    --text-color: #2c2c54;
    --border-color: #e6e5ff;
    --success-color: #26de81;
    --error-color: #fc5c65;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #4834d4 0%, #2c2c54 100%);
    --accent-gradient: linear-gradient(45deg, #ff9ff3, #f093fb);
    --card-shadow: 0 10px 30px rgba(72, 52, 212, 0.15);
}

/* Theme 5: Sunset Orange */
:root[data-theme="sunset-orange"] {
    --primary-color: #e55039;
    --secondary-color: #c44133;
    --accent-color: #ffa502;
    --light-color: #fff8f5;
    --dark-color: #2f1b14;
    --text-color: #2f1b14;
    --border-color: #ffeaa7;
    --success-color: #00b894;
    --error-color: #d63031;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #e55039 0%, #c44133 100%);
    --accent-gradient: linear-gradient(45deg, #ffa502, #ff7675);
    --card-shadow: 0 10px 30px rgba(229, 80, 57, 0.15);
}

/* Theme 6: Ocean Teal */
:root[data-theme="ocean-teal"] {
    --primary-color: #0abde3;
    --secondary-color: #006ba6;
    --accent-color: #ffc048;
    --light-color: #f0fbff;
    --dark-color: #1e3a8a;
    --text-color: #1e3a8a;
    --border-color: #bfdbfe;
    --success-color: #10b981;
    --error-color: #ef4444;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #0abde3 0%, #006ba6 100%);
    --accent-gradient: linear-gradient(45deg, #ffc048, #ffb347);
    --card-shadow: 0 10px 30px rgba(10, 189, 227, 0.15);
}

/* Theme 7: Luxury Gold */
:root[data-theme="luxury-gold"] {
    --primary-color: #2c3e50;
    --secondary-color: #1a252f;
    --accent-color: #f1c40f;
    --light-color: #fdfdf5;
    --dark-color: #34495e;
    --text-color: #2c3e50;
    --border-color: #f4f3e8;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --accent-gradient: linear-gradient(45deg, #f1c40f, #f39c12);
    --card-shadow: 0 10px 30px rgba(44, 62, 80, 0.15);
}

/* Theme 3: Corporate Green & Navy */
:root[data-theme="corporate-green"] {
    --primary-color: #0f4c75;
    --secondary-color: #0d3a5c;
    --accent-color: #16a085;
    --light-color: #f0f8ff;
    --dark-color: #2c3e50;
    --text-color: #2c3e50;
    --border-color: #bdc3c7;
    --success-color: #27ae60;
    --error-color: #c0392b;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #0f4c75 0%, #2c3e50 100%);
    --accent-gradient: linear-gradient(45deg, #16a085, #138d75);
    --card-shadow: 0 10px 30px rgba(15, 76, 117, 0.1);
}

/* Theme-specific customizations */

/* Midnight Professional theme styles */
:root[data-theme="midnight-pro"] .hero {
    background: linear-gradient(135deg, rgba(30, 42, 56, 0.95) 0%, rgba(13, 17, 23, 0.98) 100%);
}

:root[data-theme="midnight-pro"] .service-icon,
:root[data-theme="midnight-pro"] .approach-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Emerald Business theme styles */
:root[data-theme="emerald-business"] .hero {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.9) 0%, rgba(30, 132, 73, 0.95) 100%);
}

:root[data-theme="emerald-business"] .service-card:hover,
:root[data-theme="emerald-business"] .approach-card:hover {
    border-left: 4px solid var(--accent-color);
}

/* Royal Indigo theme styles */
:root[data-theme="royal-indigo"] .hero {
    background: linear-gradient(135deg, rgba(72, 52, 212, 0.9) 0%, rgba(44, 44, 84, 0.95) 100%);
}

:root[data-theme="royal-indigo"] .service-icon,
:root[data-theme="royal-indigo"] .approach-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sunset Orange theme styles */
:root[data-theme="sunset-orange"] .hero {
    background: linear-gradient(135deg, rgba(229, 80, 57, 0.9) 0%, rgba(196, 65, 51, 0.95) 100%);
}

:root[data-theme="sunset-orange"] .service-card,
:root[data-theme="sunset-orange"] .approach-card {
    border-top: 3px solid var(--accent-color);
}

/* Ocean Teal theme styles */
:root[data-theme="ocean-teal"] .hero {
    background: linear-gradient(135deg, rgba(10, 189, 227, 0.9) 0%, rgba(0, 107, 166, 0.95) 100%);
}

:root[data-theme="ocean-teal"] .service-icon,
:root[data-theme="ocean-teal"] .approach-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Luxury Gold theme styles */
:root[data-theme="luxury-gold"] .hero {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(52, 73, 94, 0.95) 100%);
}

:root[data-theme="luxury-gold"] .service-card:hover,
:root[data-theme="luxury-gold"] .approach-card:hover {
    box-shadow: 0 15px 40px rgba(241, 196, 15, 0.2);
    border: 1px solid var(--accent-color);
}

/* Corporate Green theme specific styles */
:root[data-theme="corporate-green"] .hero {
    background: linear-gradient(135deg, rgba(15, 76, 117, 0.9) 0%, rgba(44, 62, 80, 0.95) 100%);
}

:root[data-theme="corporate-green"] .service-card:hover,
:root[data-theme="corporate-green"] .approach-card:hover {
    border-left: 4px solid var(--accent-color);
}

/* Tech Blue theme (current) enhanced */
:root[data-theme="tech-blue"] .hero {
    background: linear-gradient(135deg, rgba(34, 113, 179, 0.8) 0%, rgba(29, 53, 87, 0.9) 100%);
}

/* Theme 9: Vintage Cream */
:root[data-theme="vintage-cream"] {
    --primary-color: #6d2323;
    --secondary-color: #a31d1d;
    --accent-color: #e5d0ac;
    --light-color: #fef9e1;
    --dark-color: #4a1818;
    --text-color: #3d1a1a;
    --border-color: #e5d0ac;
    --success-color: #8b7355;
    --error-color: #a31d1d;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #6d2323 0%, #a31d1d 100%);
    --accent-gradient: linear-gradient(45deg, #e5d0ac, #d4be94);
    --card-shadow: 0 10px 30px rgba(109, 35, 35, 0.1);
}

/* Theme 10: Warm Earth */
:root[data-theme="warm-earth"] {
    --primary-color: #2b2a4c;
    --secondary-color: #b31312;
    --accent-color: #ea906c;
    --light-color: #eee2de;
    --dark-color: #1e1d35;
    --text-color: #2b2a4c;
    --border-color: #d4c4be;
    --success-color: #8b6f47;
    --error-color: #b31312;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #2b2a4c 0%, #b31312 100%);
    --accent-gradient: linear-gradient(45deg, #ea906c, #d67e55);
    --card-shadow: 0 10px 30px rgba(43, 42, 76, 0.1);
}

/* Theme 11: Classic Burgundy */
:root[data-theme="classic-burgundy"] {
    --primary-color: #7d0a0a;
    --secondary-color: #bf3131;
    --accent-color: #ead196;
    --light-color: #f3edc8;
    --dark-color: #5c0808;
    --text-color: #4a0606;
    --border-color: #e0c583;
    --success-color: #9b7c3a;
    --error-color: #bf3131;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #7d0a0a 0%, #bf3131 100%);
    --accent-gradient: linear-gradient(45deg, #ead196, #d4c085);
    --card-shadow: 0 10px 30px rgba(125, 10, 10, 0.1);
}

/* Theme 12: Warm Coral */
:root[data-theme="warm-coral"] {
    --primary-color: #d84040;
    --secondary-color: #a31d1d;
    --accent-color: #ecdcbf;
    --light-color: #f8f2de;
    --dark-color: #962d2d;
    --text-color: #7a2222;
    --border-color: #e0d0ab;
    --success-color: #b8956f;
    --error-color: #d84040;
    
    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #d84040 0%, #a31d1d 100%);
    --accent-gradient: linear-gradient(45deg, #ecdcbf, #dcc8a8);
    --card-shadow: 0 10px 30px rgba(216, 64, 64, 0.1);
}

/* Universal theme switching styles */
.theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: white;
    border-radius: 50px;
    padding: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden - theme switcher disabled */
    gap: 6px;
    max-width: 300px;
    flex-wrap: wrap;
}

.theme-switcher button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0;
}

.theme-switcher button:hover {
    transform: scale(1.15);
    border-color: #333;
}

.theme-switcher button.active {
    border-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

.theme-blue { background: linear-gradient(45deg, #2271b3, #f39c12); }
.theme-midnight { background: linear-gradient(45deg, #1e2a38, #ff6b6b); }
.theme-emerald { background: linear-gradient(45deg, #27ae60, #f39c12); }
.theme-indigo { background: linear-gradient(45deg, #4834d4, #ff9ff3); }
.theme-sunset { background: linear-gradient(45deg, #e55039, #ffa502); }
.theme-ocean { background: linear-gradient(45deg, #0abde3, #ffc048); }
.theme-gold { background: linear-gradient(45deg, #2c3e50, #f1c40f); }
.theme-green { background: linear-gradient(45deg, #0f4c75, #16a085); }
.theme-vintage { background: linear-gradient(45deg, #6d2323, #e5d0ac); }
.theme-earth { background: linear-gradient(45deg, #2b2a4c, #ea906c); }
.theme-burgundy { background: linear-gradient(45deg, #7d0a0a, #ead196); }
.theme-coral { background: linear-gradient(45deg, #d84040, #ecdcbf); }

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero, .service-card, .approach-card, .expertise-card, 
.solution-card, .case-study-card, .blog-card {
    transition: all 0.3s ease;
}

/* Mobile responsive theme switcher */
@media (max-width: 768px) {
    .theme-switcher {
        top: 10px;
        right: 10px;
        padding: 6px;
        max-width: 250px;
    }
    
    .theme-switcher button {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 480px) {
    .theme-switcher {
        top: 5px;
        right: 5px;
        padding: 4px;
        gap: 4px;
        max-width: 180px;
    }
    
    .theme-switcher button {
        width: 22px;
        height: 22px;
    }
}