/* ============================================
   Gaming PC Builder - Dark Mode Theme
   ============================================ */

/* Dark Mode Color Variables */
[data-theme="dark"] {
    /* Colors - Dark Mode */
    --color-primary: #818CF8;
    --color-primary-dark: #6366F1;
    --color-primary-light: #A5B4FC;
    --color-secondary: #A78BFA;
    --color-accent: #F472B6;

    --color-bg: #0F172A;
    --color-bg-secondary: #1E293B;
    --color-bg-tertiary: #334155;

    --color-text: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-text-tertiary: #94A3B8;

    --color-border: #334155;
    --color-border-light: #1E293B;

    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-error: #F87171;

    /* Dark Mode Gradients */
    --gradient-primary: linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
    --gradient-secondary: linear-gradient(135deg, #F472B6 0%, #A78BFA 100%);
    --gradient-hero: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);

    /* Dark Mode Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Header Dark Mode Adjustments */
[data-theme="dark"] .main-header {
    background-color: rgba(15, 23, 42, 0.8);
    border-bottom-color: var(--color-border);
}

/* Floating Cards Dark Mode */
[data-theme="dark"] .floating-card {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

/* Feature Cards Dark Mode */
[data-theme="dark"] .feature-card {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 25px -5px rgba(129, 140, 248, 0.2), 0 10px 10px -5px rgba(129, 140, 248, 0.1);
}

/* App Cards Dark Mode */
[data-theme="dark"] .app-card {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .app-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 25px -5px rgba(129, 140, 248, 0.2), 0 10px 10px -5px rgba(129, 140, 248, 0.1);
}

/* Newsletter Form Dark Mode */
[data-theme="dark"] .newsletter-form input {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .newsletter-form input::placeholder {
    color: var(--color-text-tertiary);
}

/* Footer Dark Mode */
[data-theme="dark"] .main-footer {
    background-color: var(--color-bg-secondary);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .footer-top {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .footer-newsletter {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .social-link {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .social-link:hover {
    background-color: var(--color-primary);
}

[data-theme="dark"] .footer-lang-btn {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .theme-btn,
[data-theme="dark"] .lang-btn {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .lang-btn:hover {
    background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .theme-dropdown {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .theme-option:hover {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .mobile-theme-option {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .mobile-theme-option:hover {
    background-color: var(--color-bg-secondary);
}

/* Mobile Menu Dark Mode */
[data-theme="dark"] .mobile-menu {
    background-color: var(--color-bg);
}

[data-theme="dark"] .mobile-nav a {
    border-bottom-color: var(--color-border);
}

/* Hero Gradient Dark Mode - Enhanced */
[data-theme="dark"] .hero-gradient {
    opacity: 0.15;
}

[data-theme="dark"] .hero-bg-gradient {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
}

/* CTA Background Dark Mode */
[data-theme="dark"] .cta-bg-gradient {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

/* Additional Dark Mode Enhancements */
[data-theme="dark"] .btn-secondary {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-outline:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
}

/* Scrollbar Dark Mode (Webkit) */
[data-theme="dark"]::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"]::-webkit-scrollbar-track {
    background: var(--color-bg);
}

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

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