/* ==================== DARK THEME STYLES (WCAG AAA COMPLIANT) ==================== */

:root {
    /* Light Theme Colors */
    --light-bg: #f9fafb;
    --light-text: #1f2937;
    --light-text-secondary: #6b7280;
    --light-border: #e5e7eb;
    --light-card-bg: #ffffff;
    --light-surface: #ffffff;
    
    /* Dark Theme Colors - Enhanced Palette */
    --dark-bg: #0a0f1e;
    --dark-text: #f8fafc;
    --dark-text-secondary: #cbd5e1;
    --dark-border: #334155;
    --dark-card-bg: #1e293b;
    --dark-surface: #0f172a;
    --dark-surface-alt: #1e293b;
    --dark-surface-elevated: #334155;
    
    /* Semantic Colors for Dark Mode */
    --dark-success: #10b981;
    --dark-warning: #f59e0b;
    --dark-error: #f87171;
    --dark-info: #60a5fa;
    --dark-accent: #8b5cf6;
    
    /* Glow Effects */
    --glow-blue: 0 0 20px rgba(96, 165, 250, 0.3);
    --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
    
    /* Shadow for Dark Mode */
    --dark-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    --dark-shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.6);
    --dark-shadow-lg: 0 10px 20px -1px rgba(0, 0, 0, 0.7);
    --dark-shadow-hover: 0 12px 28px -1px rgba(0, 0, 0, 0.8);
    
    /* Transition Variables */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== SMOOTH THEME TRANSITIONS ==================== */
body.theme-transitioning,
body.theme-transitioning *,
html.theme-transitioning,
html.theme-transitioning * {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base) !important;
}

/* Light Theme (Default) */
body.light-theme,
body:not(.dark-theme) {
    background-color: var(--light-bg);
    color: var(--light-text);
}

/* Dark Theme */
body.dark-theme,
html.dark-theme {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

html.dark-theme body {
    background: linear-gradient(180deg, var(--dark-bg) 0%, #0f172a 100%);
    color: var(--dark-text);
}

/* Dark Theme Header - High Contrast */
html.dark-theme .header,
body.dark-theme .header {
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(96, 165, 250, 0.1);
    border-bottom: 1px solid rgba(96, 165, 250, 0.2);
}

html.dark-theme .header.scrolled,
body.dark-theme .header.scrolled {
    background: rgba(10, 15, 30, 0.98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), var(--glow-blue);
}

/* Dark Theme Navigation Links - Enhanced Contrast */
html.dark-theme .nav-links li a,
body.dark-theme .nav-links li a {
    color: #e2e8f0;
}

html.dark-theme .nav-links li a:hover,
body.dark-theme .nav-links li a:hover {
    color: white;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3), 0 0 40px rgba(139, 92, 246, 0.2);
    transform: translateY(-2px);
}

html.dark-theme .nav-links li a::before,
body.dark-theme .nav-links li a::before {
    background: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 50%, #ec4899 100%);
}

/* Active nav link */
html.dark-theme .nav-link.active,
body.dark-theme .nav-link.active {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.25);
}

/* Dark Theme Hero Section */
html.dark-theme .hero,
body.dark-theme .hero {
    background: linear-gradient(135deg, var(--dark-surface) 0%, #0f172a 100%);
}

html.dark-theme .hero h1,
body.dark-theme .hero h1 {
    color: var(--dark-text);
}

html.dark-theme .hero p,
body.dark-theme .hero p {
    color: var(--dark-text-secondary);
}

/* Dark Theme Featured Courses */
html.dark-theme .featured-courses,
body.dark-theme .featured-courses {
    background: var(--dark-bg);
}

html.dark-theme .featured-courses h2,
body.dark-theme .featured-courses h2 {
    color: var(--dark-text);
}

/* Dark Theme Cards - High Contrast Borders */
html.dark-theme .course-card,
body.dark-theme .course-card,
html.dark-theme .card,
body.dark-theme .card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    color: var(--dark-text);
    box-shadow: var(--dark-shadow-lg), 0 0 1px rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    transition: all var(--transition-base);
}

html.dark-theme .course-card::before,
body.dark-theme .course-card::before {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

html.dark-theme .course-card:hover,
body.dark-theme .course-card:hover,
html.dark-theme .card:hover,
body.dark-theme .card:hover {
    box-shadow: var(--dark-shadow-hover), 0 0 30px rgba(96, 165, 250, 0.3), 0 0 60px rgba(139, 92, 246, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
    transform: translateY(-10px) scale(1.02);
}
body.dark-theme .card:hover {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: var(--glow-blue), var(--dark-shadow-hover);
    transform: translateY(-4px);
}

html.dark-theme .feature-item,
body.dark-theme .feature-item {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    color: var(--dark-text);
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: var(--dark-shadow-lg);
}

html.dark-theme .feature-item::before {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}

html.dark-theme .feature-item:hover,
body.dark-theme .feature-item:hover {
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.4), 
                0 0 60px rgba(139, 92, 246, 0.3),
                var(--dark-shadow-hover);
    border-color: rgba(96, 165, 250, 0.5);
}

html.dark-theme .feature-item i {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark-theme .feature-item h3,
body.dark-theme .feature-item h3 {
    color: #e2e8f0;
}

html.dark-theme .feature-item p,
body.dark-theme .feature-item p {
    color: var(--dark-text-secondary);
}

/* Dark Theme Why Choose Us */
html.dark-theme .why-choose-us,
body.dark-theme .why-choose-us {
    background: var(--dark-bg);
}

html.dark-theme .why-choose-us h2,
body.dark-theme .why-choose-us h2 {
    color: var(--dark-text);
}

/* Dark Theme Testimonials */
html.dark-theme .testimonials,
body.dark-theme .testimonials {
    background: var(--dark-bg);
}

html.dark-theme .testimonial-item,
body.dark-theme .testimonial-item {
    background: var(--dark-surface-alt);
    border-color: rgba(96, 165, 250, 0.3);
}

html.dark-theme .testimonial-item p,
body.dark-theme .testimonial-item p {
    color: var(--dark-text);
}

html.dark-theme .testimonial-item cite,
body.dark-theme .testimonial-item cite {
    color: var(--dark-text-secondary);
}

/* Dark Theme CTA */
html.dark-theme .cta,
body.dark-theme .cta {
    background: linear-gradient(135deg, var(--dark-surface) 0%, #0f172a 100%);
}

html.dark-theme .cta h2,
body.dark-theme .cta h2 {
    color: var(--dark-text);
}

html.dark-theme .cta p,
body.dark-theme .cta p {
    color: var(--dark-text-secondary);
}

/* Dark Theme Footer */
html.dark-theme .footer,
body.dark-theme .footer {
    background: var(--dark-surface);
    border-top: 1px solid var(--dark-border);
}

html.dark-theme .footer h3,
body.dark-theme .footer h3 {
    color: var(--dark-text);
}

html.dark-theme .footer p,
body.dark-theme .footer p {
    color: var(--dark-text-secondary);
}

html.dark-theme .footer a,
body.dark-theme .footer a {
    color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .footer a:hover,
body.dark-theme .footer a:hover {
    color: #60a5fa;
}

html.dark-theme .social-link,
body.dark-theme .social-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

html.dark-theme .social-link:hover,
body.dark-theme .social-link:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Dark Theme Form Elements - High Contrast */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select,
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background-color: var(--dark-surface-alt);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder,
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.7;
}

html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus,
body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background-color: var(--dark-surface-alt);
    color: var(--dark-text);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    outline: none;
}

/* Dark Theme Buttons - Vibrant & Glowing */
html.dark-theme .btn-primary,
body.dark-theme .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), 0 0 20px rgba(139, 92, 246, 0.3);
    color: #ffffff;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

html.dark-theme .btn-primary:hover,
body.dark-theme .btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6), 
                0 0 40px rgba(139, 92, 246, 0.5),
                0 0 60px rgba(236, 72, 153, 0.3);
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
}

html.dark-theme .btn-secondary,
body.dark-theme .btn-secondary {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

html.dark-theme .btn-secondary:hover,
body.dark-theme .btn-secondary:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.6), 0 0 40px rgba(236, 72, 153, 0.4);
    transform: translateY(-3px) scale(1.02);
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.5);
    color: #60a5fa;
    box-shadow: var(--glow-blue);
}

/* Dark Theme Text - Enhanced Contrast */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: var(--dark-text);
}

/* Dark Theme Scrollbar - Visible */
html.dark-theme ::-webkit-scrollbar,
body.dark-theme ::-webkit-scrollbar {
    width: 12px;
}

html.dark-theme ::-webkit-scrollbar-track,
body.dark-theme ::-webkit-scrollbar-track {
    background: var(--dark-surface);
}

html.dark-theme ::-webkit-scrollbar-thumb,
body.dark-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    border-radius: 6px;
    border: 2px solid var(--dark-surface);
}

html.dark-theme ::-webkit-scrollbar-thumb:hover,
body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

/* Dark Theme Selection */
html.dark-theme ::selection,
body.dark-theme ::selection {
    background: rgba(96, 165, 250, 0.3);
    color: var(--dark-text);
}

html.dark-theme ::-moz-selection,
body.dark-theme ::-moz-selection {
    background: rgba(96, 165, 250, 0.3);
    color: var(--dark-text);
}

/* Dark Theme Smooth Transitions */
html.light-theme,
html.dark-theme,
body.light-theme,
body.dark-theme {
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Dark Theme Language Select */
html.dark-theme #language-select,
body.dark-theme #language-select {
    background-color: var(--dark-surface-alt) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-theme #language-select option,
body.dark-theme #language-select option {
    background-color: var(--dark-surface-alt);
    color: var(--dark-text);
}

/* Dark Theme Theme Toggle */
html.dark-theme #theme-toggle,
body.dark-theme #theme-toggle {
    background: var(--dark-surface-alt);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark-theme #theme-toggle:hover,
body.dark-theme #theme-toggle:hover {
    background: var(--dark-border);
}

/* Dark Theme Code Blocks */
html.dark-theme code,
html.dark-theme pre,
body.dark-theme code,
body.dark-theme pre {
    background: var(--dark-surface);
    color: #60a5fa;
    border: 1px solid var(--dark-border);
}

/* Dark Theme Badges */
html.dark-theme .badge,
body.dark-theme .badge {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

/* Dark Theme Links - High Contrast */
html.dark-theme a,
body.dark-theme a {
    color: #60a5fa;
}

html.dark-theme a:hover,
body.dark-theme a:hover {
    color: #3498db;
}

/* Dark Theme Specific Overrides */
html.dark-theme {
    color-scheme: dark;
}

/* ==================== ENHANCED DARK MODE FEATURES ==================== */

/* Dark Mode Images - Slight brightness reduction for comfort */
html.dark-theme img:not([class*="logo"]),
body.dark-theme img:not([class*="logo"]) {
    opacity: 0.9;
    transition: opacity var(--transition-base);
}

html.dark-theme img:not([class*="logo"]):hover,
body.dark-theme img:not([class*="logo"]):hover {
    opacity: 1;
}

/* Dark Mode Input Enhancements */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select,
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(96, 165, 250, 0.2);
}

html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus,
body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background: rgba(30, 41, 59, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), var(--glow-blue);
}

/* Dark Mode Tooltips */
html.dark-theme [title]:hover::after,
body.dark-theme [title]:hover::after {
    background: var(--dark-surface-elevated);
    color: var(--dark-text);
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: var(--dark-shadow-lg);
}

/* Dark Mode Loading States */
html.dark-theme .loading,
body.dark-theme .loading {
    background: linear-gradient(90deg, var(--dark-surface-alt) 25%, var(--dark-surface-elevated) 50%, var(--dark-surface-alt) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark Mode Focus Indicators - Enhanced */
html.dark-theme *:focus-visible,
body.dark-theme *:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}

/* Dark Mode Scroll to Top Button */
html.dark-theme .scroll-to-top,
body.dark-theme .scroll-to-top {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: var(--glow-blue), var(--dark-shadow-md);
    border: 2px solid rgba(96, 165, 250, 0.3);
}

html.dark-theme .scroll-to-top:hover,
body.dark-theme .scroll-to-top:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: var(--glow-blue), var(--dark-shadow-hover);
}

/* Dark Mode Dividers */
html.dark-theme hr,
body.dark-theme hr {
    border-color: rgba(96, 165, 250, 0.2);
    box-shadow: 0 1px 2px rgba(96, 165, 250, 0.1);
}

/* Responsive for Dark Theme */
@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        background-color: var(--dark-bg);
        color: var(--dark-text);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    html.dark-theme,
    body.dark-theme {
        --dark-text: #ffffff;
        --dark-border: #60a5fa;
    }
}

/* ===== ADDITIONAL DARK MODE ENHANCEMENTS ===== */

/* Course Pricing - Dark Mode */
html.dark-theme .course-price,
body.dark-theme .course-price {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Course Card Title - Dark Mode */
html.dark-theme .course-card h3,
body.dark-theme .course-card h3 {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Course Card Content - Dark Mode */
html.dark-theme .course-card p,
body.dark-theme .course-card p {
    color: var(--dark-text-secondary);
}

/* Course Meta - Dark Mode */
html.dark-theme .course-meta,
body.dark-theme .course-meta {
    border-top-color: rgba(96, 165, 250, 0.2);
}

/* Hero Section Titles - Dark Mode */
html.dark-theme .hero h1,
body.dark-theme .hero h1 {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(96, 165, 250, 0.3);
}

/* Logo - Dark Mode */
html.dark-theme .logo h1,
body.dark-theme .logo h1 {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark-theme .logo h1::after,
body.dark-theme .logo h1::after {
    background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

/* Testimonials - Dark Mode */
html.dark-theme .testimonials,
body.dark-theme .testimonials {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* CTA Section - Dark Mode */
html.dark-theme .cta,
body.dark-theme .cta {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-top: 1px solid rgba(96, 165, 250, 0.2);
    border-bottom: 1px solid rgba(96, 165, 250, 0.2);
}

html.dark-theme .cta h2,
body.dark-theme .cta h2 {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Backgrounds - Dark Mode */
html.dark-theme section,
body.dark-theme section {
    background: transparent;
}

/* Enhanced Glow Effects for Interactive Elements */
html.dark-theme .btn:hover,
body.dark-theme .btn:hover {
    filter: brightness(1.1);
}

html.dark-theme .course-card:hover,
body.dark-theme .course-card:hover {
    filter: brightness(1.05);
}

html.dark-theme .feature-item:hover,
body.dark-theme .feature-item:hover {
    filter: brightness(1.05);
}