/* CSS Custom Properties for Theming */
:root {
    /* Primary Colors */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: rgba(99, 102, 241, 0.1);
    
    /* Secondary Colors */
    --secondary-color: #64748b;
    --accent-color: #f59e0b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --secondary-gradient: linear-gradient(135deg, #64748b 0%, #475569 100%);
    --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-vibrant: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
    --gradient-tech: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    --text-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* Light Theme (Default) */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-quaternary: #e2e8f0;
    
    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Light Theme Specific Colors */
    --accent-light: rgba(245, 158, 11, 0.1);
    --success-light: rgba(16, 185, 129, 0.1);
    --error-light: rgba(239, 68, 68, 0.1);
    --warning-light: rgba(245, 158, 11, 0.1);
    --info-light: rgba(59, 130, 246, 0.1);
    
    /* Card and Surface Colors */
    --card-bg: #ffffff;
    --surface-bg: #f8fafc;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Input Colors */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus: #6366f1;
    
    /* Code and Syntax Colors */
    --code-bg: #f3f4f6;
    --code-text: #374151;
    --pre-bg: #1f2937;
    --pre-text: #f9fafb;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-quaternary: #475569;
    
    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-inverse: #0f172a;
    
    /* Border Colors */
    --border-color: #334155;
    --border-light: #475569;
    --border-dark: #1e293b;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    
    /* Dark Theme Specific Colors */
    --accent-light: rgba(245, 158, 11, 0.2);
    --success-light: rgba(16, 185, 129, 0.2);
    --error-light: rgba(239, 68, 68, 0.2);
    --warning-light: rgba(245, 158, 11, 0.2);
    --info-light: rgba(59, 130, 246, 0.2);
    
    /* Card and Surface Colors */
    --card-bg: #1e293b;
    --surface-bg: #334155;
    --overlay-bg: rgba(0, 0, 0, 0.8);
    
    /* Input Colors */
    --input-bg: #334155;
    --input-border: #475569;
    --input-focus: #6366f1;
    
    /* Code and Syntax Colors */
    --code-bg: #374151;
    --code-text: #f3f4f6;
    --pre-bg: #111827;
    --pre-text: #f9fafb;
    
    /* Dark Theme Gradients */
    --hero-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --gradient-tech: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-secondary: #000000;
    }
    
    [data-theme="dark"] {
        --border-color: #ffffff;
        --text-secondary: #ffffff;
    }
}

/* 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;
    }
    
    .hero-icon {
        animation: none !important;
    }
    
    .fade-in,
    .slide-in-left,
    .slide-in-right {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Color Scheme Preference Detection */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        
        /* Auto Dark Theme Variables */
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --bg-quaternary: #475569;
        
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-tertiary: #94a3b8;
        --text-inverse: #0f172a;
        
        --border-color: #334155;
        --border-light: #475569;
        --border-dark: #1e293b;
        
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
        
        --accent-light: rgba(245, 158, 11, 0.2);
        --success-light: rgba(16, 185, 129, 0.2);
        --error-light: rgba(239, 68, 68, 0.2);
        --warning-light: rgba(245, 158, 11, 0.2);
        --info-light: rgba(59, 130, 246, 0.2);
        
        --card-bg: #1e293b;
        --surface-bg: #334155;
        --overlay-bg: rgba(0, 0, 0, 0.8);
        
        --input-bg: #334155;
        --input-border: #475569;
        --input-focus: #6366f1;
        
        --code-bg: #374151;
        --code-text: #f3f4f6;
        --pre-bg: #111827;
        --pre-text: #f9fafb;
        
        --hero-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        --gradient-tech: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }
}

/* Theme Toggle Button Styles */
.theme-toggle .theme-icon {
    transition: transform 0.3s ease;
}

[data-theme="light"] .theme-toggle .theme-icon {
    transform: rotate(0deg);
}

[data-theme="dark"] .theme-toggle .theme-icon {
    transform: rotate(180deg);
}

/* Custom Scrollbar for Light Theme */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Custom Scrollbar for Dark Theme */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Selection Colors */
[data-theme="light"] ::selection {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] ::selection {
    background-color: rgba(99, 102, 241, 0.4);
    color: var(--text-primary);
}

/* Focus Ring Colors */
[data-theme="light"] *:focus {
    outline-color: var(--primary-color);
}

[data-theme="dark"] *:focus {
    outline-color: var(--primary-color);
}

/* Print Styles for Both Themes */
@media print {
    [data-theme="light"],
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --bg-secondary: #ffffff;
        --bg-tertiary: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #cccccc;
        
        color-scheme: light;
    }
}

/* Theme-specific component adjustments */
[data-theme="dark"] .hero {
    background: var(--hero-gradient);
}

[data-theme="dark"] .hero::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

[data-theme="dark"] .comparison-table .featured-row {
    background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .deal-card.featured {
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .review-card.featured {
    background: rgba(99, 102, 241, 0.1);
}

/* High contrast adjustments for accessibility */
@media (prefers-contrast: high) {
    [data-theme="light"] {
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #666666;
    }
    
    [data-theme="dark"] {
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --border-color: #999999;
    }
}

/* Color blindness support */
@media (prefers-color-scheme: no-preference) {
    /* Enhanced color differentiation for better accessibility */
    :root {
        --success-color: #16a34a; /* More distinct green */
        --error-color: #dc2626; /* More distinct red */
        --warning-color: #ca8a04; /* More distinct yellow */
    }
}