/* 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;

        /* ── Layer 1: Reference palette ──────────────────── */
        /* Deep backgrounds */
        --viewer-ref-deep-950: #051015;
        --viewer-ref-deep-900: #051820;
        --viewer-ref-deep-800: #15152a;
        /* Cyan accent */
        --viewer-ref-cyan-500:  #06b6d4;
        --viewer-ref-cyan-400:  #22d3ee;
        --viewer-ref-cyan-300:  #00e5ff;
        --viewer-ref-seafoam:   #64ffda;
        --viewer-ref-cyan-100:  #e0faff;
        --viewer-ref-cyan-50:   #e5faff;
        /* Light text */
        --viewer-ref-lavender-50: #f0f4ff;
        --viewer-ref-blue-100:    #e8f0ff;
        --viewer-ref-blue-200:    #c8d8ff;
        --viewer-ref-blue-300:    #b8c8e8;
        /* Muted */
        --viewer-ref-slate-400: #8b9cc7;
        --viewer-ref-slate-500: #6b7aa0;
        --viewer-ref-slate-450: #7888b0;
        --viewer-ref-slate-350: #8898c8;
        /* Utility */
        --viewer-ref-white:     #ffffff;
        --viewer-ref-navy-950:  #0a1228;
        --viewer-ref-ink-950:   #1a1a1a;
        --viewer-ref-ink-900:   #1a1a2e;
        --viewer-ref-gray-300:  #cccccc;
        --viewer-ref-close-red: #ff4d4f;
        /* Stats — dark uses custom neon-friendly palette, not Tailwind; red-200 = Material #ffcdd2 (vs light #fecaca) */
        --viewer-ref-red-50:     #fff5f5;
        --viewer-ref-red-200:    #ffcdd2;
        --viewer-ref-red-400:    #ff6b6b;
        --viewer-ref-teal-400:   #4ecdc4;
        --viewer-ref-yellow-300: #ffe66d;
        --viewer-ref-amber-400:  #ffc832;
        --viewer-ref-amber-300:  #ffd93d;
        --viewer-ref-amber-200:  #ffd54f;
        --viewer-ref-green-300:  #a8e6cf;
        --viewer-ref-purple-300: #c9b1ff;

        /* Core palette - Deep purple base with electric cyan accent */
        --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: var(--viewer-ref-lavender-50);
        --viewer-text-muted: var(--viewer-ref-slate-400);
        --viewer-text-soft: var(--viewer-ref-slate-500);

        /* 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: var(--viewer-ref-blue-100);
        --viewer-input-focus: var(--viewer-ref-cyan-300);
        --viewer-input-focus-shadow: rgba(0, 229, 255, 0.3);
        --viewer-option-bg: var(--viewer-ref-deep-800);
        --viewer-option-text: var(--viewer-ref-blue-100);

        /* 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: var(--viewer-ref-cyan-50);
        --viewer-toast-error-border: rgba(255, 82, 82, 0.7);
        --viewer-toast-error-text: var(--viewer-ref-red-200);

        /* Footer */
        --viewer-footer-bg: rgba(8, 10, 20, 0.85);
        --viewer-footer-border: rgba(100, 120, 180, 0.15);
        --viewer-footer-text: var(--viewer-ref-slate-450);

        /* Dialogs - Floating panels */
        --viewer-backdrop-bg: rgba(5, 5, 15, 0.85);
        --viewer-drawer-backdrop: rgba(7, 10, 18, 0.55);
        --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: var(--viewer-ref-blue-100);
        --viewer-dialog-btn-bg: rgba(30, 40, 80, 0.6);
        --viewer-dialog-btn-text: var(--viewer-ref-blue-200);
        --viewer-dialog-confirm-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        --viewer-dialog-confirm-text: var(--viewer-ref-deep-900);
        --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        --viewer-dialog-cancel-text: var(--viewer-ref-red-50);
        --viewer-dialog-btn-border: rgba(0, 212, 255, 0.4);
        --viewer-dialog-cancel-border: rgba(255, 100, 100, 0.6);
        --viewer-dialog-muted: var(--viewer-ref-slate-500);

        /* 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: var(--viewer-ref-cyan-500);
        --viewer-accent-strong: var(--viewer-ref-cyan-400);
        --viewer-accent-contrast: var(--viewer-ref-deep-950);
        --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: var(--viewer-ref-cyan-100);

        /* 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: var(--viewer-ref-blue-300);
        --viewer-product-price: var(--viewer-ref-seafoam);
        --viewer-product-release: var(--viewer-ref-slate-350);
        --viewer-thumb-scrollbar: rgba(0, 212, 255, 0.5);

        /* Gallery nav buttons (dark theme: light backdrop for contrast on dark images) */
        --viewer-nav-bg: rgba(240, 245, 255, 0.85);
        --viewer-nav-bg-hover: rgba(255, 255, 255, 0.98);
        --viewer-nav-fg: var(--viewer-ref-navy-950);
        --viewer-nav-ring: rgba(100, 220, 255, 0.85);

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

        /* View toggles */
        --viewer-toggle-bg: rgba(25, 30, 55, 0.5);
        --viewer-toggle-hover-bg: rgba(35, 45, 75, 0.6);
        --viewer-toggle-track-bg: var(--viewer-ref-gray-300);
        --viewer-toggle-knob-bg: var(--viewer-ref-white);

        /* 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: var(--viewer-ref-amber-400);
        --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: var(--viewer-ref-amber-200);
        --viewer-warning-ink: var(--viewer-ref-ink-900);
        --viewer-header-bg: rgba(8, 10, 22, 0.9);

        /* Stat colors - Vibrant and readable */
        --viewer-stat-attack: var(--viewer-ref-red-400);
        --viewer-stat-attack-border: rgba(255, 107, 107, 0.6);
        --viewer-stat-attack-tint: rgba(255, 107, 107, 0.15);
        --viewer-stat-defense: var(--viewer-ref-teal-400);
        --viewer-stat-stamina: var(--viewer-ref-yellow-300);
        --viewer-stat-height: var(--viewer-ref-green-300);
        --viewer-stat-dash: var(--viewer-ref-amber-300);
        --viewer-stat-burst: var(--viewer-ref-purple-300);

        /* Overlay close (lightbox / PDF viewer) — same value as light theme;
           designed against varying content backdrops, not theme. */
        --viewer-overlay-close-bg: rgba(0, 0, 0, 0.72);
        --viewer-overlay-close-bg-hover: rgba(0, 0, 0, 0.9);
        --viewer-overlay-close-border: rgba(255, 255, 255, 0.95);
        --viewer-overlay-close-fg: var(--viewer-ref-white);
        --viewer-overlay-close-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

        /* Content overlays — same across themes; designed against arbitrary content */
        --viewer-close-icon-color: var(--viewer-ref-close-red);
        --viewer-lightbox-bg: rgba(0, 0, 0, 0.92);
        --viewer-pdf-bg: var(--viewer-ref-ink-950);
        --viewer-spec-part-glow: drop-shadow(0 0 2px rgba(255, 200, 100, 0.5));

        /* 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;

    /* ── Layer 1: Reference palette ──────────────────── */
    /* Deep backgrounds */
    --viewer-ref-deep-950: #051015;
    --viewer-ref-deep-900: #051820;
    --viewer-ref-deep-800: #15152a;
    /* Cyan accent */
    --viewer-ref-cyan-500:  #06b6d4;
    --viewer-ref-cyan-400:  #22d3ee;
    --viewer-ref-cyan-300:  #00e5ff;
    --viewer-ref-seafoam:   #64ffda;
    --viewer-ref-cyan-100:  #e0faff;
    --viewer-ref-cyan-50:   #e5faff;
    /* Light text */
    --viewer-ref-lavender-50: #f0f4ff;
    --viewer-ref-blue-100:    #e8f0ff;
    --viewer-ref-blue-200:    #c8d8ff;
    --viewer-ref-blue-300:    #b8c8e8;
    /* Muted */
    --viewer-ref-slate-400: #8b9cc7;
    --viewer-ref-slate-500: #6b7aa0;
    --viewer-ref-slate-450: #7888b0;
    --viewer-ref-slate-350: #8898c8;
    /* Utility */
    --viewer-ref-white:     #ffffff;
    --viewer-ref-navy-950:  #0a1228;
    --viewer-ref-ink-950:   #1a1a1a;
    --viewer-ref-ink-900:   #1a1a2e;
    --viewer-ref-gray-300:  #cccccc;
    --viewer-ref-close-red: #ff4d4f;
    /* Stats — dark uses custom neon-friendly palette, not Tailwind; red-200 = Material #ffcdd2 (vs light #fecaca) */
    --viewer-ref-red-50:     #fff5f5;
    --viewer-ref-red-200:    #ffcdd2;
    --viewer-ref-red-400:    #ff6b6b;
    --viewer-ref-teal-400:   #4ecdc4;
    --viewer-ref-yellow-300: #ffe66d;
    --viewer-ref-amber-400:  #ffc832;
    --viewer-ref-amber-300:  #ffd93d;
    --viewer-ref-amber-200:  #ffd54f;
    --viewer-ref-green-300:  #a8e6cf;
    --viewer-ref-purple-300: #c9b1ff;

    /* 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: var(--viewer-ref-lavender-50);
    --viewer-text-muted: var(--viewer-ref-slate-400);
    --viewer-text-soft: var(--viewer-ref-slate-500);
    --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: var(--viewer-ref-blue-100);
    --viewer-input-focus: var(--viewer-ref-cyan-300);
    --viewer-input-focus-shadow: rgba(0, 229, 255, 0.3);
    --viewer-option-bg: var(--viewer-ref-deep-800);
    --viewer-option-text: var(--viewer-ref-blue-100);
    --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: var(--viewer-ref-cyan-50);
    --viewer-toast-error-border: rgba(255, 82, 82, 0.7);
    --viewer-toast-error-text: var(--viewer-ref-red-200);
    --viewer-footer-bg: rgba(8, 10, 20, 0.85);
    --viewer-footer-border: rgba(100, 120, 180, 0.15);
    --viewer-footer-text: var(--viewer-ref-slate-450);
    --viewer-backdrop-bg: rgba(5, 5, 15, 0.85);
    --viewer-drawer-backdrop: rgba(7, 10, 18, 0.55);
    --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: var(--viewer-ref-blue-100);
    --viewer-dialog-btn-bg: rgba(30, 40, 80, 0.6);
    --viewer-dialog-btn-text: var(--viewer-ref-blue-200);
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --viewer-dialog-confirm-text: var(--viewer-ref-deep-900);
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: var(--viewer-ref-red-50);
    --viewer-dialog-btn-border: rgba(0, 212, 255, 0.4);
    --viewer-dialog-cancel-border: rgba(255, 100, 100, 0.6);
    --viewer-dialog-muted: var(--viewer-ref-slate-500);
    --viewer-card-bg: rgba(18, 22, 40, 0.95);
    --viewer-card-border: rgba(60, 80, 140, 0.2);
    --viewer-accent: var(--viewer-ref-cyan-500);
    --viewer-accent-strong: var(--viewer-ref-cyan-400);
    --viewer-accent-contrast: var(--viewer-ref-deep-950);
    --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: var(--viewer-ref-cyan-100);
    --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: var(--viewer-ref-blue-300);
    --viewer-product-price: var(--viewer-ref-seafoam);
    --viewer-product-release: var(--viewer-ref-slate-350);
    --viewer-thumb-scrollbar: rgba(0, 212, 255, 0.5);
    --viewer-nav-bg: rgba(240, 245, 255, 0.85);
    --viewer-nav-bg-hover: rgba(255, 255, 255, 0.98);
    --viewer-nav-fg: var(--viewer-ref-navy-950);
    --viewer-nav-ring: rgba(100, 220, 255, 0.85);
    --viewer-tabs-bg: rgba(8, 10, 22, 0.6);
    --viewer-tab-border: rgba(80, 100, 160, 0.25);
    --viewer-toggle-bg: rgba(25, 30, 55, 0.5);
    --viewer-toggle-hover-bg: rgba(35, 45, 75, 0.6);
    --viewer-toggle-track-bg: var(--viewer-ref-gray-300);
    --viewer-toggle-knob-bg: var(--viewer-ref-white);
    --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: var(--viewer-ref-amber-400);
    --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: var(--viewer-ref-amber-200);
    --viewer-warning-ink: var(--viewer-ref-ink-900);
    --viewer-header-bg: rgba(8, 10, 22, 0.9);
    --viewer-stat-attack: var(--viewer-ref-red-400);
    --viewer-stat-attack-border: rgba(255, 107, 107, 0.6);
    --viewer-stat-attack-tint: rgba(255, 107, 107, 0.15);
    --viewer-stat-defense: var(--viewer-ref-teal-400);
    --viewer-stat-stamina: var(--viewer-ref-yellow-300);
    --viewer-stat-height: var(--viewer-ref-green-300);
    --viewer-stat-dash: var(--viewer-ref-amber-300);
    --viewer-stat-burst: var(--viewer-ref-purple-300);
    --viewer-overlay-close-bg: rgba(0, 0, 0, 0.72);
    --viewer-overlay-close-bg-hover: rgba(0, 0, 0, 0.9);
    --viewer-overlay-close-border: rgba(255, 255, 255, 0.95);
    --viewer-overlay-close-fg: var(--viewer-ref-white);
    --viewer-overlay-close-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --viewer-close-icon-color: var(--viewer-ref-close-red);
    --viewer-lightbox-bg: rgba(0, 0, 0, 0.92);
    --viewer-pdf-bg: var(--viewer-ref-ink-950);
    --viewer-spec-part-glow: drop-shadow(0 0 2px rgba(255, 200, 100, 0.5));
    --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;
}