/* Global Theme System for Rendering Patterns */

/* CSS Variables for Comprehensive Theming */
:root {
    /* Light Theme Colors */
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f8f9fa;
    --bg-card-light: #ffffff;
    --bg-accent-light: #f0f9ff;
    --text-primary-light: #1f2937;
    --text-secondary-light: #6b7280;
    --text-accent-light: #374151;
    --border-light: #e5e7eb;
    --border-accent-light: #d1d5db;
    --shadow-light: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg-light: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* Dark Theme Colors - Improved */
    --bg-primary-dark: #0a0e1a;
    --bg-secondary-dark: #1a1f2e;
    --bg-card-dark: #252a3a;
    --bg-accent-dark: #2a2f3f;
    --text-primary-dark: #ffffff;
    --text-secondary-dark: #e2e8f0;
    --text-accent-dark: #cbd5e1;
    --border-dark: #3a3f4f;
    --border-accent-dark: #4a4f5f;
    --shadow-dark: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg-dark: 0 10px 15px -3px rgb(0 0 0 / 0.6);

    /* Accent Colors (vibrant and modern) */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-error: #ef4444;
    --accent-info: #06b6d4;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-cyan: #06b6d4;
    --accent-emerald: #10b981;

    /* Gradient Definitions - Modern & Vibrant */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-error: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --gradient-purple: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    --gradient-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-dark-bg: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%);

    /* Default to Dark Theme */
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-card: var(--bg-card-dark);
    --bg-accent: var(--bg-accent-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-accent: var(--text-accent-dark);
    --border-color: var(--border-dark);
    --border-accent: var(--border-accent-dark);
    --shadow: var(--shadow-dark);
    --shadow-lg: var(--shadow-lg-dark);
}

/* Light Theme Override */
body.light-theme {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-card: var(--bg-card-light);
    --bg-accent: var(--bg-accent-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-accent: var(--text-accent-light);
    --border-color: var(--border-light);
    --border-accent: var(--border-accent-light);
    --shadow: var(--shadow-light);
    --shadow-lg: var(--shadow-lg-light);
}

/* Global Theme Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
    background: var(--accent-primary);
    color: white;
}

/* Enhanced dark theme background with animated elements */
body:not(.light-theme) {
    position: relative;
}

body:not(.light-theme)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05) rotate(1deg);
    }
}

/* Dark Theme Specific Overrides */
body:not(.light-theme) {

    /* Modern code blocks in dark theme */
    .code-example,
    .method-example,
    .strategy-code,
    .solution-code,
    .practice-code,
    .setup-code,
    .technique-example,
    .pattern-code,
    .demo-code,
    .server-code,
    .js-code {
        background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%) !important;
        color: #e2e8f0 !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        position: relative;
    }

    .code-example::before,
    .method-example::before,
    .strategy-code::before,
    .solution-code::before,
    .practice-code::before,
    .setup-code::before,
    .technique-example::before,
    .pattern-code::before,
    .demo-code::before,
    .server-code::before,
    .js-code::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    }

    /* Console and terminal elements */
    .build-console,
    .console-output,
    .timeline-log {
        background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%) !important;
        color: #e2e8f0 !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    /* Demo elements */
    .demo-app,
    .spa-demo-container,
    .demo-container {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color);
    }

    .demo-nav {
        background: #0f172a !important;
        border-bottom: 1px solid var(--border-color);
    }

    /* Form elements */
    input,
    textarea,
    select {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border: 2px solid var(--border-color) !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--accent-primary) !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    }

    /* Button overrides for dark theme */
    .nav-btn:not(.active) {
        background: var(--bg-secondary) !important;
        color: var(--text-secondary) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Table elements */
    .comparison-table .table-row span {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .comparison-table .aspect {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }

    /* Metric and stat elements */
    .metric-item,
    .stat-item,
    .demo-stat {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Timeline and flow elements */
    .timeline-segment,
    .flow-step,
    .build-step {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Special accent backgrounds */
    .csr-bg {
        background: rgba(59, 130, 246, 0.2) !important;
        color: #93c5fd !important;
    }

    .ssr-bg {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #6ee7b7 !important;
    }

    .ssg-bg {
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }

    /* Performance indicators */
    .metric-excellent {
        background: rgba(34, 197, 94, 0.2) !important;
        color: #4ade80 !important;
    }

    .metric-good {
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }

    .metric-fair {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #f87171 !important;
    }

    .metric-poor {
        background: rgba(239, 68, 68, 0.3) !important;
        color: #fca5a5 !important;
    }
}

/* Light Theme Specific Overrides */
body.light-theme {

    /* Ensure proper contrast in light theme */
    .code-example,
    .method-example,
    .strategy-code,
    .solution-code,
    .practice-code,
    .setup-code,
    .technique-example,
    .pattern-code,
    .demo-code,
    .server-code,
    .js-code {
        background: #1f2937 !important;
        color: #e2e8f0 !important;
    }

    .build-console,
    .console-output {
        background: #1f2937 !important;
        color: #e2e8f0 !important;
    }

    .demo-nav {
        background: #1f2937 !important;
        color: white !important;
    }
}

/* Enhanced Visual Effects for Dark Theme */
body:not(.light-theme) .topic-card:hover,
body:not(.light-theme) .nav-card:hover,
body:not(.light-theme) .framework-card:hover,
body:not(.light-theme) .project-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
    transform: translateY(-8px) scale(1.02);
}

/* Neon glow effects for interactive elements */
body:not(.light-theme) .slide-nav button:hover {
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4), 0 0 20px rgba(99, 102, 241, 0.3);
}

body:not(.light-theme) .theme-toggle:hover {
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
}

/* Additional dark theme enhancements */
body:not(.light-theme) .csr-bg {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

body:not(.light-theme) .ssr-bg {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body:not(.light-theme) .ssg-bg {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Enhanced glassmorphism effect for dark theme */
body:not(.light-theme) .presentation-container {
    background: rgba(37, 42, 58, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(106, 111, 127, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Improved card styling for dark theme */
body:not(.light-theme) .topic-card,
body:not(.light-theme) .nav-card,
body:not(.light-theme) .framework-card,
body:not(.light-theme) .takeaway-card,
body:not(.light-theme) .decision-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Enhanced header styling */
body:not(.light-theme) .header {
    background: var(--gradient-hero);
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
}

body:not(.light-theme) .header {
    background: var(--gradient-primary);
    backdrop-filter: blur(10px);
}

/* Improved readability for dark theme */
body:not(.light-theme) .takeaway-item.pros {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

body:not(.light-theme) .takeaway-item.cons {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Enhanced scrollbar for dark theme */
body:not(.light-theme) ::-webkit-scrollbar {
    width: 8px;
}

body:not(.light-theme) ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body:not(.light-theme) ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

body:not(.light-theme) ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Selection highlighting for dark theme */
body:not(.light-theme) ::selection {
    background: rgba(102, 126, 234, 0.3);
    color: var(--text-primary);
}

/* Loading and transition states */
.theme-transition {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme glow effects */
body:not(.light-theme) .hero-buttons .btn:hover,
body:not(.light-theme) .next-topic-btn:hover,
body:not(.light-theme) .action-btn:hover {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Enhanced button styling for dark theme */
body:not(.light-theme) .slide-nav button {
    background: var(--gradient-primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

body:not(.light-theme) .slide-nav button:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

/* Modern card styling improvements */
body:not(.light-theme) .nav-card::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

body:not(.light-theme) .framework-card,
body:not(.light-theme) .method-card,
body:not(.light-theme) .strategy-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

body:not(.light-theme) .framework-card::before,
body:not(.light-theme) .method-card::before,
body:not(.light-theme) .strategy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
    pointer-events: none;
}

/* Progress indicators for dark theme */
body:not(.light-theme) .progress-dot {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
}

body:not(.light-theme) .progress-dot.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

/* Enhanced hover states for dark theme */
body:not(.light-theme) .characteristic-item:hover,
body:not(.light-theme) .advantage-item:hover,
body:not(.light-theme) .benefit-item:hover {
    background: var(--bg-accent);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

/* Dark theme specific gradients - More vibrant */
body:not(.light-theme) .csr-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
}

body:not(.light-theme) .ssr-header {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
}

body:not(.light-theme) .ssg-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3);
}

body:not(.light-theme) .api-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
}

/* Interactive element highlights for dark theme */
body:not(.light-theme) .interactive-element:hover,
body:not(.light-theme) .demo-button:hover,
body:not(.light-theme) .query-btn:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

/* Enhanced focus states for accessibility */
body:not(.light-theme) button:focus,
body:not(.light-theme) input:focus,
body:not(.light-theme) textarea:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

/* Modern accent borders and highlights */
body:not(.light-theme) .topic-card.csr-card {
    border-top: 4px solid #3b82f6;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.05) 100%);
}

body:not(.light-theme) .topic-card.ssr-card {
    border-top: 4px solid #10b981;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
}

body:not(.light-theme) .topic-card.ssg-card {
    border-top: 4px solid #f59e0b;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.05) 100%);
}

body:not(.light-theme) .topic-card.api-card {
    border-top: 4px solid #8b5cf6;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(139, 92, 246, 0.05) 100%);
}

/* Improved contrast for important elements */
body:not(.light-theme) .section-title::after {
    background: var(--gradient-primary);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

body:not(.light-theme) .slide h2::after {
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

/* Responsive theme adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    body:not(.light-theme) .presentation-container {
        background: rgba(15, 23, 42, 0.98);
    }
}

/* Print styles (force light theme for printing) */
@media print {
    body {
        --bg-primary: white;
        --bg-secondary: #f8f9fa;
        --bg-card: white;
        --text-primary: #1f2937;
        --text-secondary: #6b7280;
        --border-color: #e5e7eb;
        background: white !important;
        color: #1f2937 !important;
    }

    .theme-toggle {
        display: none;
    }

    .code-example,
    .method-example,
    .strategy-code {
        background: #f8f9fa !important;
        color: #1f2937 !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .theme-toggle:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-primary: #000000;
        --text-secondary: #333333;
    }

    body.light-theme {
        --border-color: #000000;
        --text-primary: #000000;
        --text-secondary: #333333;
    }

    body:not(.light-theme) {
        --border-color: #ffffff;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
    }
}