/* Perfect Theme System */

/* ============================================
   BASE COLOR PALETTE
   ============================================ */
:root {
    /* Brand Colors - Never Change */
    --color-primary: #4B0082;
    --color-accent: #D4AF37;
    --color-rose: #FFB6C1;
    
    /* Neutral Colors */
    --color-dark-bg: #0A0A0A;
    --color-light-bg: #F5F5F5;
    --color-text-dark: #FFFFFF;
    --color-text-light: #0A0A0A;
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    
    /* Transitions */
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   DARK MODE (Default)
   ============================================ */
:root,
.dark-mode {
    /* Backgrounds */
    --bg-primary: #0A0A0A;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #252525;
    --bg-elevated: #2A2A2A;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-inverse: #0A0A0A;
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-hover: rgba(255, 255, 255, 0.2);
    --border-color-active: rgba(212, 175, 55, 0.5);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(75, 0, 130, 0.5);
    --shadow-glow-accent: 0 0 20px rgba(212, 175, 55, 0.3);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.6);
    
    /* Overlays */
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-medium: rgba(0, 0, 0, 0.6);
    --overlay-heavy: rgba(0, 0, 0, 0.8);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4B0082 0%, #0A0A0A 100%);
    --gradient-accent: linear-gradient(135deg, #D4AF37 0%, #FFB6C1 100%);
    --gradient-hero: linear-gradient(135deg, #0A0A0A 0%, #4B0082 100%);
}

/* ============================================
   LIGHT MODE
   ============================================ */
.light-mode {
    /* Backgrounds */
    --bg-primary: #F5F5F5;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F9F9F9;
    --bg-elevated: #FFFFFF;
    
    /* Text Colors */
    --text-primary: #0A0A0A;
    --text-secondary: rgba(10, 10, 10, 0.7);
    --text-tertiary: rgba(10, 10, 10, 0.5);
    --text-inverse: #FFFFFF;
    
    /* Borders */
    --border-color: rgba(10, 10, 10, 0.1);
    --border-color-hover: rgba(10, 10, 10, 0.2);
    --border-color-active: rgba(75, 0, 130, 0.3);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 30px rgba(75, 0, 130, 0.2);
    --shadow-glow-accent: 0 0 20px rgba(212, 175, 55, 0.2);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Overlays */
    --overlay-light: rgba(255, 255, 255, 0.4);
    --overlay-medium: rgba(255, 255, 255, 0.6);
    --overlay-heavy: rgba(255, 255, 255, 0.8);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4B0082 0%, #F5F5F5 100%);
    --gradient-accent: linear-gradient(135deg, #D4AF37 0%, #FFB6C1 100%);
    --gradient-hero: linear-gradient(135deg, #F5F5F5 0%, #4B0082 100%);
}

/* ============================================
   SYSTEM PREFERENCE DETECTION
   ============================================ */
@media (prefers-color-scheme: light) {
    :root:not(.dark-mode):not(.light-mode) {
        /* Light mode defaults if no class set */
        --bg-primary: #F5F5F5;
        --bg-secondary: #FFFFFF;
        --bg-tertiary: #F9F9F9;
        --bg-elevated: #FFFFFF;
        --text-primary: #0A0A0A;
        --text-secondary: rgba(10, 10, 10, 0.7);
        --text-tertiary: rgba(10, 10, 10, 0.5);
        --text-inverse: #FFFFFF;
        --border-color: rgba(10, 10, 10, 0.1);
        --border-color-hover: rgba(10, 10, 10, 0.2);
        --border-color-active: rgba(75, 0, 130, 0.3);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
        --shadow-glow: 0 0 30px rgba(75, 0, 130, 0.2);
        --shadow-glow-accent: 0 0 20px rgba(212, 175, 55, 0.2);
        --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.2);
        --overlay-light: rgba(255, 255, 255, 0.4);
        --overlay-medium: rgba(255, 255, 255, 0.6);
        --overlay-heavy: rgba(255, 255, 255, 0.8);
        --gradient-primary: linear-gradient(135deg, #4B0082 0%, #F5F5F5 100%);
        --gradient-accent: linear-gradient(135deg, #D4AF37 0%, #FFB6C1 100%);
        --gradient-hero: linear-gradient(135deg, #F5F5F5 0%, #4B0082 100%);
    }
}

/* ============================================
   THEME TRANSITIONS
   ============================================ */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Smooth theme transition class */
.theme-transitioning * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Exclude specific elements from theme transition */
img,
svg,
video,
iframe,
canvas,
::before,
::after {
    transition: none;
}

/* ============================================
   BODY THEME APPLICATION
   ============================================ */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-theme);
}

/* ============================================
   THEME-AWARE COMPONENTS
   ============================================ */

/* Cards */
.card,
.stat-card,
.service-card,
.leader-card,
.testimonial-card-minimal {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: var(--transition-theme);
}

.card:hover,
.stat-card:hover,
.service-card:hover,
.leader-card:hover,
.testimonial-card-minimal:hover {
    border-color: var(--border-color-hover);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
    box-shadow: var(--shadow-glow-accent);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-secondary:hover {
    background-color: var(--color-accent);
    color: var(--text-inverse);
}

/* Inputs */
input,
textarea,
select {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--shadow-glow-accent);
}

/* Headers */
.header {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header.scrolled {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

/* Links */
a {
    color: var(--color-accent);
    transition: var(--transition-theme);
}

a:hover {
    color: var(--color-rose);
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--border-color);
}

/* Shadows - Theme Aware */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(255, 255, 255, 0.3);
        --text-secondary: rgba(255, 255, 255, 0.9);
    }
    
    .light-mode {
        --border-color: rgba(10, 10, 10, 0.3);
        --text-secondary: rgba(10, 10, 10, 0.9);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: var(--transition-theme);
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color-hover);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--color-accent); }

.border-theme { border-color: var(--border-color); }