/* BEYBLADE X Viewer - Arena Neon Dark Theme */
/* Design: Competitive arena atmosphere with high-tech neon aesthetics */


@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        /* Core palette - Deep purple base with electric cyan accent */
        --viewer-bg: linear-gradient(180deg, #0a0a1a 0%, #12101f 50%, #0d0b18 100%);
        --viewer-text: #f0f4ff;
        --viewer-text-muted: #8b9cc7;
        --viewer-text-soft: #6b7aa0;

        /* Title gradient - Electric energy feel */
        --viewer-heading-gradient: linear-gradient(135deg, #00e5ff 0%, #00d4ff 25%, #64ffda 50%, #00e5ff 75%, #00bcd4 100%);

        /* Controls area - Glassmorphism with subtle glow */
        --viewer-controls-bg:
            linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(10, 10, 25, 0.98) 100%);
        --viewer-controls-border: rgba(0, 212, 255, 0.25);

        /* Inputs - Frosted glass effect */
        --viewer-input-bg: rgba(20, 25, 50, 0.8);
        --viewer-input-bg-hover: rgba(25, 30, 60, 0.9);
        --viewer-input-border: rgba(100, 120, 180, 0.2);
        --viewer-input-border-hover: rgba(0, 212, 255, 0.5);
        --viewer-input-text: #e8f0ff;
        --viewer-input-focus: #00e5ff;
        --viewer-input-focus-shadow: rgba(0, 229, 255, 0.3);
        --viewer-option-bg: #15152a;
        --viewer-option-text: #e8f0ff;

        /* Stats bar */
        --viewer-stats-bg: rgba(15, 18, 35, 0.8);

        /* Toast notifications */
        --viewer-toast-bg: rgba(10, 12, 25, 0.98);
        --viewer-toast-border: rgba(0, 229, 255, 0.5);
        --viewer-toast-text: #e5faff;
        --viewer-toast-error-border: rgba(255, 82, 82, 0.7);
        --viewer-toast-error-text: #ffcdd2;

        /* Footer */
        --viewer-footer-bg: rgba(8, 10, 20, 0.85);
        --viewer-footer-border: rgba(100, 120, 180, 0.15);
        --viewer-footer-text: #7888b0;

        /* Dialogs - Floating panels */
        --viewer-backdrop-bg: rgba(5, 5, 15, 0.85);
        --viewer-dialog-bg: rgba(12, 15, 30, 0.98);
        --viewer-dialog-border: rgba(0, 212, 255, 0.3);
        --viewer-dialog-shadow:
            0 25px 60px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(0, 212, 255, 0.1);
        --viewer-dialog-text: #e8f4ff;
        --viewer-dialog-btn-bg: rgba(30, 40, 80, 0.6);
        --viewer-dialog-btn-text: #c8d8ff;
        --viewer-dialog-confirm-bg: linear-gradient(135deg, #00d4ff 0%, #00bcd4 100%);
        --viewer-dialog-confirm-text: #051820;
        --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        --viewer-dialog-cancel-text: #fff5f5;
        --viewer-dialog-btn-border: rgba(0, 212, 255, 0.4);
        --viewer-dialog-cancel-border: rgba(255, 100, 100, 0.6);
        --viewer-dialog-muted: #6b7aa0;

        /* Cards */
        --viewer-card-bg: rgba(18, 22, 40, 0.95);
        --viewer-card-border: rgba(60, 80, 140, 0.2);

        /* Accent colors - Electric cyan spectrum */
        --viewer-accent: #00e5ff;
        --viewer-accent-strong: #00ffff;
        --viewer-accent-contrast: #051015;
        --viewer-accent-tint: rgba(0, 229, 255, 0.12);
        --viewer-accent-soft: rgba(0, 229, 255, 0.25);
        --viewer-accent-border: rgba(0, 229, 255, 0.4);
        --viewer-accent-text: #e0faff;

        /* Modal overlay */
        --viewer-modal-overlay: rgba(5, 8, 18, 0.92);

        /* Product displays */
        --viewer-product-bg: rgba(10, 12, 25, 0.98);
        --viewer-product-border: rgba(0, 200, 255, 0.25);
        --viewer-product-surface: rgba(25, 30, 55, 0.5);
        --viewer-product-surface-border: rgba(0, 200, 255, 0.15);
        --viewer-product-desc-bg: rgba(20, 25, 45, 0.6);
        --viewer-product-desc-text: #b8c8e8;
        --viewer-product-price: #64ffda;
        --viewer-product-release: #8898c8;
        --viewer-thumb-scrollbar: rgba(0, 212, 255, 0.5);

        /* Tabs */
        --viewer-tabs-bg: rgba(8, 10, 22, 0.6);
        --viewer-tab-border: rgba(80, 100, 160, 0.25);
        --viewer-tab-active-text: #051015;

        /* View toggles */
        --viewer-toggle-bg: rgba(25, 30, 55, 0.5);
        --viewer-toggle-hover-bg: rgba(35, 45, 75, 0.6);

        /* Spec view */
        --viewer-spec-index-bg:
            linear-gradient(135deg, rgba(15, 18, 35, 0.95) 0%, rgba(20, 25, 45, 0.9) 100%);
        --viewer-spec-target-bg: rgba(255, 200, 50, 0.08);
        --viewer-spec-target-border: #ffc832;
        --viewer-spec-target-shadow: 0 0 30px rgba(255, 200, 50, 0.25);
        --viewer-spec-target-header-bg: linear-gradient(135deg, #3d3520, #4a4025);
        --viewer-spec-item-bg: rgba(25, 30, 55, 0.6);
        --viewer-spec-item-hover-bg: rgba(35, 45, 75, 0.7);

        /* Misc */
        --viewer-part-thumb-bg: rgba(15, 18, 35, 0.8);
        --viewer-stats-item-bg: rgba(25, 35, 65, 0.5);
        --viewer-modal-mobile-bg: rgba(8, 10, 20, 0.99);
        --viewer-modal-mobile-close-bg: rgba(0, 0, 0, 0.6);
        --viewer-divider: rgba(80, 100, 160, 0.2);
        --viewer-warning: #ffd54f;
        --viewer-warning-ink: #1a1a2e;
        --viewer-header-bg: rgba(8, 10, 22, 0.9);

        /* Stat colors - Vibrant and readable */
        --viewer-stat-attack: #ff6b6b;
        --viewer-stat-defense: #4ecdc4;
        --viewer-stat-stamina: #ffe66d;
        --viewer-stat-height: #a8e6cf;
        --viewer-stat-dash: #ffd93d;
        --viewer-stat-burst: #c9b1ff;

        /* Custom properties for enhanced effects */
        --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.4);
        --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
        --scanline-opacity: 0.03;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Core palette */
    --viewer-bg:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #0a0a1a 0%, #12101f 50%, #0d0b18 100%);
    --viewer-text: #f0f4ff;
    --viewer-text-muted: #8b9cc7;
    --viewer-text-soft: #6b7aa0;
    --viewer-heading-gradient: linear-gradient(135deg, #00e5ff 0%, #00d4ff 25%, #64ffda 50%, #00e5ff 75%, #00bcd4 100%);
    --viewer-controls-bg: linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(10, 10, 25, 0.98) 100%);
    --viewer-controls-border: rgba(0, 212, 255, 0.25);
    --viewer-input-bg: rgba(20, 25, 50, 0.8);
    --viewer-input-bg-hover: rgba(25, 30, 60, 0.9);
    --viewer-input-border: rgba(100, 120, 180, 0.2);
    --viewer-input-border-hover: rgba(0, 212, 255, 0.5);
    --viewer-input-text: #e8f0ff;
    --viewer-input-focus: #00e5ff;
    --viewer-input-focus-shadow: rgba(0, 229, 255, 0.3);
    --viewer-option-bg: #15152a;
    --viewer-option-text: #e8f0ff;
    --viewer-stats-bg: rgba(15, 18, 35, 0.8);
    --viewer-toast-bg: rgba(10, 12, 25, 0.98);
    --viewer-toast-border: rgba(0, 229, 255, 0.5);
    --viewer-toast-text: #e5faff;
    --viewer-toast-error-border: rgba(255, 82, 82, 0.7);
    --viewer-toast-error-text: #ffcdd2;
    --viewer-footer-bg: rgba(8, 10, 20, 0.85);
    --viewer-footer-border: rgba(100, 120, 180, 0.15);
    --viewer-footer-text: #7888b0;
    --viewer-backdrop-bg: rgba(5, 5, 15, 0.85);
    --viewer-dialog-bg: rgba(12, 15, 30, 0.98);
    --viewer-dialog-border: rgba(0, 212, 255, 0.3);
    --viewer-dialog-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 212, 255, 0.1);
    --viewer-dialog-text: #e8f4ff;
    --viewer-dialog-btn-bg: rgba(30, 40, 80, 0.6);
    --viewer-dialog-btn-text: #c8d8ff;
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #00d4ff 0%, #00bcd4 100%);
    --viewer-dialog-confirm-text: #051820;
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: #fff5f5;
    --viewer-dialog-btn-border: rgba(0, 212, 255, 0.4);
    --viewer-dialog-cancel-border: rgba(255, 100, 100, 0.6);
    --viewer-dialog-muted: #6b7aa0;
    --viewer-card-bg: rgba(18, 22, 40, 0.95);
    --viewer-card-border: rgba(60, 80, 140, 0.2);
    --viewer-accent: #00e5ff;
    --viewer-accent-strong: #00ffff;
    --viewer-accent-contrast: #051015;
    --viewer-accent-tint: rgba(0, 229, 255, 0.12);
    --viewer-accent-soft: rgba(0, 229, 255, 0.25);
    --viewer-accent-border: rgba(0, 229, 255, 0.4);
    --viewer-accent-text: #e0faff;
    --viewer-modal-overlay: rgba(5, 8, 18, 0.92);
    --viewer-product-bg: rgba(10, 12, 25, 0.98);
    --viewer-product-border: rgba(0, 200, 255, 0.25);
    --viewer-product-surface: rgba(25, 30, 55, 0.5);
    --viewer-product-surface-border: rgba(0, 200, 255, 0.15);
    --viewer-product-desc-bg: rgba(20, 25, 45, 0.6);
    --viewer-product-desc-text: #b8c8e8;
    --viewer-product-price: #64ffda;
    --viewer-product-release: #8898c8;
    --viewer-thumb-scrollbar: rgba(0, 212, 255, 0.5);
    --viewer-tabs-bg: rgba(8, 10, 22, 0.6);
    --viewer-tab-border: rgba(80, 100, 160, 0.25);
    --viewer-tab-active-text: #051015;
    --viewer-toggle-bg: rgba(25, 30, 55, 0.5);
    --viewer-toggle-hover-bg: rgba(35, 45, 75, 0.6);
    --viewer-spec-index-bg: linear-gradient(135deg, rgba(15, 18, 35, 0.95) 0%, rgba(20, 25, 45, 0.9) 100%);
    --viewer-spec-target-bg: rgba(255, 200, 50, 0.08);
    --viewer-spec-target-border: #ffc832;
    --viewer-spec-target-shadow: 0 0 30px rgba(255, 200, 50, 0.25);
    --viewer-spec-target-header-bg: linear-gradient(135deg, #3d3520, #4a4025);
    --viewer-spec-item-bg: rgba(25, 30, 55, 0.6);
    --viewer-spec-item-hover-bg: rgba(35, 45, 75, 0.7);
    --viewer-part-thumb-bg: rgba(15, 18, 35, 0.8);
    --viewer-stats-item-bg: rgba(25, 35, 65, 0.5);
    --viewer-modal-mobile-bg: rgba(8, 10, 20, 0.99);
    --viewer-modal-mobile-close-bg: rgba(0, 0, 0, 0.6);
    --viewer-divider: rgba(80, 100, 160, 0.2);
    --viewer-warning: #ffd54f;
    --viewer-warning-ink: #1a1a2e;
    --viewer-header-bg: rgba(8, 10, 22, 0.9);
    --viewer-stat-attack: #ff6b6b;
    --viewer-stat-defense: #4ecdc4;
    --viewer-stat-stamina: #ffe66d;
    --viewer-stat-height: #a8e6cf;
    --viewer-stat-dash: #ffd93d;
    --viewer-stat-burst: #c9b1ff;
    --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.4);
    --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
    --scanline-opacity: 0.03;
}