/* ============================================
   Gaming PC Builder - Tokyo Mode Theme
   (Cyberpunk Cyan/Purple/Pink - Balanced)
   ============================================ */

/* Tokyo Mode Color Variables */
[data-theme="tokyo"] {
    /* Colors - Tokyo Mode (Balanced Cyberpunk) */
    --color-primary: #00D9FF;
    --color-primary-dark: #00B8D4;
    --color-primary-light: #5BE7FF;
    --color-secondary: #9D4EDD;
    --color-accent: #FF6B9D;

    --color-bg: #0D0D1E;
    --color-bg-secondary: #1A1A2E;
    --color-bg-tertiary: #2D1B4E;

    --color-text: #E8F4F8;
    --color-text-secondary: #B8D4E0;
    --color-text-tertiary: #8BA8B8;

    --color-border: #2D1B4E;
    --color-border-light: #1A1A2E;

    --color-success: #00FFA3;
    --color-warning: #FFB84D;
    --color-error: #FF5370;

    /* Tokyo Mode Gradients */
    --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #9D4EDD 50%, #FF6B9D 100%);
    --gradient-secondary: linear-gradient(135deg, #9D4EDD 0%, #00D9FF 100%);
    --gradient-hero: linear-gradient(180deg, #1A1A2E 0%, #0D0D1E 100%);

    /* Tokyo Mode Shadows - Enhanced with cyan/purple glow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 217, 255, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 217, 255, 0.3), 0 2px 4px -1px rgba(157, 78, 221, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 217, 255, 0.4), 0 4px 6px -2px rgba(157, 78, 221, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 217, 255, 0.5), 0 10px 10px -5px rgba(157, 78, 221, 0.4);
}

/* Header Tokyo Mode */
[data-theme="tokyo"] .main-header {
    background-color: rgba(13, 13, 30, 0.95);
    border-bottom: 1px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 217, 255, 0.2),
                0 0 30px rgba(157, 78, 221, 0.1);
}

/* Logo Tokyo Mode - Cyan Neon Effect */
[data-theme="tokyo"] .logo-image {
    filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.8))
            drop-shadow(0 0 20px rgba(157, 78, 221, 0.4));
}

/* Navigation Tokyo Mode */
[data-theme="tokyo"] .nav-menu a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.8);
}

/* Buttons Tokyo Mode - Cyan/Purple Glow */
[data-theme="tokyo"] .btn-primary {
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.4),
                0 0 20px rgba(157, 78, 221, 0.3);
}

[data-theme="tokyo"] .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 217, 255, 0.6),
                0 0 30px rgba(157, 78, 221, 0.5);
}

[data-theme="tokyo"] .login-btn {
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.4),
                0 0 20px rgba(157, 78, 221, 0.3);
}

[data-theme="tokyo"] .login-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 217, 255, 0.6),
                0 0 25px rgba(157, 78, 221, 0.4);
}

/* Hero Section Tokyo Mode */
[data-theme="tokyo"] .hero-badge {
    background-color: var(--color-bg-tertiary);
    color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
}

[data-theme="tokyo"] .gradient-text {
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.5),
                 0 0 40px rgba(157, 78, 221, 0.3);
}

/* Floating Cards Tokyo Mode - Balanced Borders */
[data-theme="tokyo"] .floating-card {
    background-color: var(--color-bg-secondary);
    border: 2px solid rgba(0, 217, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3),
                0 0 20px rgba(157, 78, 221, 0.2);
}

[data-theme="tokyo"] .card-icon {
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.7))
            drop-shadow(0 0 15px rgba(157, 78, 221, 0.4));
}

/* Hero Gradient Tokyo Mode */
[data-theme="tokyo"] .hero-gradient {
    background: radial-gradient(circle,
                rgba(0, 217, 255, 0.3) 0%,
                rgba(157, 78, 221, 0.3) 40%,
                rgba(255, 107, 157, 0.2) 70%,
                transparent 100%);
    filter: blur(100px);
    opacity: 0.5;
}

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

/* Section Badge Tokyo Mode */
[data-theme="tokyo"] .section-badge {
    background-color: var(--color-bg-tertiary);
    color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
}

/* Feature Cards Tokyo Mode */
[data-theme="tokyo"] .feature-card {
    background-color: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

[data-theme="tokyo"] .feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 217, 255, 0.4),
                0 0 30px rgba(157, 78, 221, 0.3);
    transform: translateY(-8px);
}

[data-theme="tokyo"] .feature-icon {
    box-shadow: 0 4px 20px rgba(0, 217, 255, 0.4),
                0 0 15px rgba(157, 78, 221, 0.3);
}

/* App Cards Tokyo Mode */
[data-theme="tokyo"] .app-card {
    background-color: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
}

[data-theme="tokyo"] .app-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 217, 255, 0.4),
                0 0 30px rgba(157, 78, 221, 0.3);
}

[data-theme="tokyo"] .app-icon {
    box-shadow: 0 4px 20px rgba(0, 217, 255, 0.4),
                0 0 15px rgba(157, 78, 221, 0.3);
}

[data-theme="tokyo"] .app-link {
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}

/* CTA Section Tokyo Mode */
[data-theme="tokyo"] .cta-section {
    background: var(--gradient-primary);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

[data-theme="tokyo"] .cta-title {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

[data-theme="tokyo"] .cta-bg-gradient {
    background: radial-gradient(circle,
                rgba(157, 78, 221, 0.2) 0%,
                transparent 70%);
}

/* Footer Tokyo Mode */
[data-theme="tokyo"] .main-footer {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .footer-top {
    border-bottom: 1px solid rgba(0, 217, 255, 0.2);
}

[data-theme="tokyo"] .footer-newsletter {
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}

[data-theme="tokyo"] .social-link {
    background-color: var(--color-bg-tertiary);
    border: 1px solid rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .social-link:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.7);
}

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

[data-theme="tokyo"] .newsletter-form input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

/* Theme Controls Tokyo Mode */
[data-theme="tokyo"] .theme-btn,
[data-theme="tokyo"] .lang-btn {
    background-color: var(--color-bg-tertiary);
    border: 1px solid rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .theme-btn:hover,
[data-theme="tokyo"] .lang-btn:hover {
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .theme-dropdown {
    background-color: var(--color-bg-secondary);
    border: 2px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 10px 40px rgba(0, 217, 255, 0.4),
                0 0 30px rgba(157, 78, 221, 0.2);
}

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

/* Mobile Menu Tokyo Mode */
[data-theme="tokyo"] .mobile-menu {
    background-color: var(--color-bg);
    border-top: 1px solid rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .mobile-nav a {
    border-bottom: 1px solid rgba(0, 217, 255, 0.2);
}

[data-theme="tokyo"] .mobile-theme-option {
    background-color: var(--color-bg-tertiary);
    border: 1px solid rgba(0, 217, 255, 0.3);
}

[data-theme="tokyo"] .mobile-theme-option:hover {
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

/* Scrollbar Tokyo Mode */
[data-theme="tokyo"]::-webkit-scrollbar {
    width: 12px;
}

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

[data-theme="tokyo"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

[data-theme="tokyo"]::-webkit-scrollbar-thumb:hover {
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
}

/* Additional Neon Effects for Tokyo Mode */
[data-theme="tokyo"] .stat-number {
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
}

[data-theme="tokyo"] .footer-title {
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
}

/* Balanced Neon Pulse Animation */
@keyframes tokyo-neon-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 217, 255, 0.4),
                    0 0 40px rgba(157, 78, 221, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 217, 255, 0.6),
                    0 0 60px rgba(157, 78, 221, 0.5);
    }
}

[data-theme="tokyo"] .feature-card:hover,
[data-theme="tokyo"] .app-card:hover {
    animation: tokyo-neon-pulse 2s ease-in-out infinite;
}