/* BEYBLADE X Viewer - Arena Light Theme */
/* Design: Clean, energetic daytime arena feel with sharp contrasts */


.viewer-theme {
    color-scheme: light dark;
}

:root {
    color-scheme: light dark;

    /* ── Layer 1: Reference palette ──────────────────── */
    /* Blue */
    --viewer-ref-blue-600: #0077cc;
    --viewer-ref-blue-500: #0088ee;
    --viewer-ref-blue-400: #00aaff;
    --viewer-ref-blue-50:  #f0f9ff;
    /* Slate */
    --viewer-ref-slate-900: #0f172a;
    --viewer-ref-slate-800: #1e293b;
    --viewer-ref-slate-600: #475569;
    --viewer-ref-slate-500: #64748b;
    /* 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 */
    --viewer-ref-red-500:    #ef4444;
    --viewer-ref-red-200:    #fecaca;
    --viewer-ref-teal-500:   #14b8a6;
    --viewer-ref-yellow-500: #eab308;
    --viewer-ref-amber-500:  #f59e0b;
    --viewer-ref-green-500:  #22c55e;
    --viewer-ref-purple-500: #a855f7;

    /* Core palette - Crisp white with electric blue accent */
    --viewer-bg: linear-gradient(180deg, #f8faff 0%, #f0f4ff 50%, #e8f0ff 100%);
    --viewer-text: var(--viewer-ref-slate-900);
    --viewer-text-muted: var(--viewer-ref-slate-600);
    --viewer-text-soft: var(--viewer-ref-slate-500);

    /* Title gradient - Bold energy */
    --viewer-heading-gradient: linear-gradient(135deg, #0066cc 0%, #0088ee 25%, #00aaff 50%, #0077dd 75%, #0055bb 100%);

    /* Controls area */
    --viewer-controls-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
    --viewer-controls-border: rgba(0, 120, 200, 0.15);

    /* Inputs */
    --viewer-input-bg: rgba(255, 255, 255, 0.95);
    --viewer-input-bg-hover: rgba(248, 252, 255, 1);
    --viewer-input-border: rgba(15, 23, 42, 0.12);
    --viewer-input-border-hover: rgba(0, 136, 238, 0.5);
    --viewer-input-text: var(--viewer-ref-slate-900);
    --viewer-input-focus: var(--viewer-ref-blue-500);
    --viewer-input-focus-shadow: rgba(0, 136, 238, 0.25);
    --viewer-option-bg: var(--viewer-ref-white);
    --viewer-option-text: var(--viewer-ref-slate-900);

    /* Stats bar */
    --viewer-stats-bg: rgba(248, 250, 255, 0.9);

    /* Toast */
    --viewer-toast-bg: rgba(15, 23, 42, 0.95);
    --viewer-toast-border: rgba(0, 136, 238, 0.5);
    --viewer-toast-text: var(--viewer-ref-blue-50);
    --viewer-toast-error-border: rgba(220, 38, 38, 0.6);
    --viewer-toast-error-text: var(--viewer-ref-red-200);

    /* Footer */
    --viewer-footer-bg: rgba(255, 255, 255, 0.8);
    --viewer-footer-border: rgba(15, 23, 42, 0.08);
    --viewer-footer-text: var(--viewer-ref-slate-500);

    /* Dialogs */
    --viewer-backdrop-bg: rgba(15, 23, 42, 0.4);
    --viewer-drawer-backdrop: rgba(15, 23, 42, 0.4);
    --viewer-dialog-bg: rgba(255, 255, 255, 0.98);
    --viewer-dialog-border: rgba(0, 136, 238, 0.2);
    --viewer-dialog-shadow: 0 25px 60px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(0, 136, 238, 0.1);
    --viewer-dialog-text: var(--viewer-ref-slate-900);
    --viewer-dialog-btn-bg: rgba(0, 136, 238, 0.08);
    --viewer-dialog-btn-text: var(--viewer-ref-slate-800);
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #0088ee 0%, #0077dd 100%);
    --viewer-dialog-confirm-text: var(--viewer-ref-white);
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: var(--viewer-ref-white);
    --viewer-dialog-btn-border: rgba(0, 136, 238, 0.3);
    --viewer-dialog-cancel-border: rgba(220, 38, 38, 0.5);
    --viewer-dialog-muted: var(--viewer-ref-slate-500);

    /* Cards */
    --viewer-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
    --viewer-card-border: rgba(0, 100, 180, 0.12);

    /* Accent colors */
    --viewer-accent: var(--viewer-ref-blue-500);
    --viewer-accent-strong: var(--viewer-ref-blue-400);
    --viewer-accent-contrast: var(--viewer-ref-white);
    --viewer-accent-tint: rgba(0, 136, 238, 0.1);
    --viewer-accent-soft: rgba(0, 136, 238, 0.18);
    --viewer-accent-border: rgba(0, 136, 238, 0.35);
    --viewer-accent-text: var(--viewer-ref-slate-900);

    /* Modal */
    --viewer-modal-overlay: rgba(15, 23, 42, 0.7);

    /* Products */
    --viewer-product-bg: rgba(255, 255, 255, 0.98);
    --viewer-product-border: rgba(0, 136, 238, 0.15);
    --viewer-product-surface: rgba(248, 250, 255, 0.8);
    --viewer-product-surface-border: rgba(0, 136, 238, 0.1);
    --viewer-product-desc-bg: rgba(248, 250, 255, 0.9);
    --viewer-product-desc-text: var(--viewer-ref-slate-600);
    --viewer-product-price: var(--viewer-ref-blue-600);
    --viewer-product-release: var(--viewer-ref-slate-500);
    --viewer-thumb-scrollbar: rgba(0, 136, 238, 0.4);

    /* Tabs */
    --viewer-tabs-bg: rgba(248, 250, 255, 0.8);
    --viewer-tab-border: rgba(15, 23, 42, 0.12);

    /* Toggles */
    --viewer-toggle-bg: rgba(15, 23, 42, 0.05);
    --viewer-toggle-hover-bg: rgba(15, 23, 42, 0.1);
    --viewer-toggle-track-bg: var(--viewer-ref-gray-300);
    --viewer-toggle-knob-bg: var(--viewer-ref-white);

    /* Gallery nav buttons */
    --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(0, 136, 238, 0.4);

    /* Spec view */
    --viewer-spec-index-bg: linear-gradient(135deg, rgba(248, 250, 255, 0.95) 0%, rgba(240, 245, 255, 0.9) 100%);
    --viewer-spec-target-bg: rgba(255, 200, 50, 0.1);
    --viewer-spec-target-border: var(--viewer-ref-amber-500);
    --viewer-spec-target-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
    --viewer-spec-target-header-bg: linear-gradient(135deg, #fef3c7, #fde68a);
    --viewer-spec-item-bg: rgba(248, 250, 255, 0.9);
    --viewer-spec-item-hover-bg: rgba(240, 245, 255, 1);

    /* Misc */
    --viewer-part-thumb-bg: rgba(248, 250, 255, 0.9);
    --viewer-stats-item-bg: rgba(0, 136, 238, 0.06);
    --viewer-modal-mobile-bg: rgba(255, 255, 255, 0.99);
    --viewer-modal-mobile-close-bg: rgba(15, 23, 42, 0.1);
    --viewer-divider: rgba(15, 23, 42, 0.1);
    --viewer-warning: var(--viewer-ref-amber-500);
    --viewer-warning-ink: var(--viewer-ref-ink-900);
    --viewer-header-bg: rgba(255, 255, 255, 0.92);

    /* Stats colors */
    --viewer-stat-attack: var(--viewer-ref-red-500);
    --viewer-stat-attack-border: rgba(239, 68, 68, 0.6);
    --viewer-stat-attack-tint: rgba(239, 68, 68, 0.15);
    --viewer-stat-defense: var(--viewer-ref-teal-500);
    --viewer-stat-stamina: var(--viewer-ref-yellow-500);
    --viewer-stat-height: var(--viewer-ref-green-500);
    --viewer-stat-dash: var(--viewer-ref-amber-500);
    --viewer-stat-burst: var(--viewer-ref-purple-500);

    /* Overlay close (lightbox / PDF viewer) — designed against varying content
       (product images, PDFs), not theme. Same value across themes by intent;
       tokenized so viewer.css stays free of hex. */
    --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));

    /* Effects */
    --glow-cyan: 0 0 20px rgba(0, 136, 238, 0.3);
    --glow-purple: 0 0 20px rgba(99, 102, 241, 0.2);
    --scanline-opacity: 0.015;
}

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

    /* ── Layer 1: Reference palette ──────────────────── */
    /* Blue */
    --viewer-ref-blue-600: #0077cc;
    --viewer-ref-blue-500: #0088ee;
    --viewer-ref-blue-400: #00aaff;
    --viewer-ref-blue-50:  #f0f9ff;
    /* Slate */
    --viewer-ref-slate-900: #0f172a;
    --viewer-ref-slate-800: #1e293b;
    --viewer-ref-slate-600: #475569;
    --viewer-ref-slate-500: #64748b;
    /* 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 */
    --viewer-ref-red-500:    #ef4444;
    --viewer-ref-red-200:    #fecaca;
    --viewer-ref-teal-500:   #14b8a6;
    --viewer-ref-yellow-500: #eab308;
    --viewer-ref-amber-500:  #f59e0b;
    --viewer-ref-green-500:  #22c55e;
    --viewer-ref-purple-500: #a855f7;

    --viewer-bg: linear-gradient(180deg, #f8faff 0%, #f0f4ff 50%, #e8f0ff 100%);
    --viewer-text: var(--viewer-ref-slate-900);
    --viewer-text-muted: var(--viewer-ref-slate-600);
    --viewer-text-soft: var(--viewer-ref-slate-500);
    --viewer-heading-gradient: linear-gradient(135deg, #0066cc 0%, #0088ee 25%, #00aaff 50%, #0077dd 75%, #0055bb 100%);
    --viewer-controls-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
    --viewer-controls-border: rgba(0, 120, 200, 0.15);
    --viewer-input-bg: rgba(255, 255, 255, 0.95);
    --viewer-input-bg-hover: rgba(248, 252, 255, 1);
    --viewer-input-border: rgba(15, 23, 42, 0.12);
    --viewer-input-border-hover: rgba(0, 136, 238, 0.5);
    --viewer-input-text: var(--viewer-ref-slate-900);
    --viewer-input-focus: var(--viewer-ref-blue-500);
    --viewer-input-focus-shadow: rgba(0, 136, 238, 0.25);
    --viewer-option-bg: var(--viewer-ref-white);
    --viewer-option-text: var(--viewer-ref-slate-900);
    --viewer-stats-bg: rgba(248, 250, 255, 0.9);
    --viewer-toast-bg: rgba(15, 23, 42, 0.95);
    --viewer-toast-border: rgba(0, 136, 238, 0.5);
    --viewer-toast-text: var(--viewer-ref-blue-50);
    --viewer-toast-error-border: rgba(220, 38, 38, 0.6);
    --viewer-toast-error-text: var(--viewer-ref-red-200);
    --viewer-footer-bg: rgba(255, 255, 255, 0.8);
    --viewer-footer-border: rgba(15, 23, 42, 0.08);
    --viewer-footer-text: var(--viewer-ref-slate-500);
    --viewer-backdrop-bg: rgba(15, 23, 42, 0.4);
    --viewer-drawer-backdrop: rgba(15, 23, 42, 0.4);
    --viewer-dialog-bg: rgba(255, 255, 255, 0.98);
    --viewer-dialog-border: rgba(0, 136, 238, 0.2);
    --viewer-dialog-shadow: 0 25px 60px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(0, 136, 238, 0.1);
    --viewer-dialog-text: var(--viewer-ref-slate-900);
    --viewer-dialog-btn-bg: rgba(0, 136, 238, 0.08);
    --viewer-dialog-btn-text: var(--viewer-ref-slate-800);
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #0088ee 0%, #0077dd 100%);
    --viewer-dialog-confirm-text: var(--viewer-ref-white);
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: var(--viewer-ref-white);
    --viewer-dialog-btn-border: rgba(0, 136, 238, 0.3);
    --viewer-dialog-cancel-border: rgba(220, 38, 38, 0.5);
    --viewer-dialog-muted: var(--viewer-ref-slate-500);
    --viewer-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
    --viewer-card-border: rgba(0, 100, 180, 0.12);
    --viewer-accent: var(--viewer-ref-blue-500);
    --viewer-accent-strong: var(--viewer-ref-blue-400);
    --viewer-accent-contrast: var(--viewer-ref-white);
    --viewer-accent-tint: rgba(0, 136, 238, 0.1);
    --viewer-accent-soft: rgba(0, 136, 238, 0.18);
    --viewer-accent-border: rgba(0, 136, 238, 0.35);
    --viewer-accent-text: var(--viewer-ref-slate-900);
    --viewer-modal-overlay: rgba(15, 23, 42, 0.7);
    --viewer-product-bg: rgba(255, 255, 255, 0.98);
    --viewer-product-border: rgba(0, 136, 238, 0.15);
    --viewer-product-surface: rgba(248, 250, 255, 0.8);
    --viewer-product-surface-border: rgba(0, 136, 238, 0.1);
    --viewer-product-desc-bg: rgba(248, 250, 255, 0.9);
    --viewer-product-desc-text: var(--viewer-ref-slate-600);
    --viewer-product-price: var(--viewer-ref-blue-600);
    --viewer-product-release: var(--viewer-ref-slate-500);
    --viewer-thumb-scrollbar: rgba(0, 136, 238, 0.4);
    --viewer-tabs-bg: rgba(248, 250, 255, 0.8);
    --viewer-tab-border: rgba(15, 23, 42, 0.12);
    --viewer-toggle-bg: rgba(15, 23, 42, 0.05);
    --viewer-toggle-hover-bg: rgba(15, 23, 42, 0.1);
    --viewer-toggle-track-bg: var(--viewer-ref-gray-300);
    --viewer-toggle-knob-bg: var(--viewer-ref-white);
    --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(0, 136, 238, 0.4);
    --viewer-spec-index-bg: linear-gradient(135deg, rgba(248, 250, 255, 0.95) 0%, rgba(240, 245, 255, 0.9) 100%);
    --viewer-spec-target-bg: rgba(255, 200, 50, 0.1);
    --viewer-spec-target-border: var(--viewer-ref-amber-500);
    --viewer-spec-target-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
    --viewer-spec-target-header-bg: linear-gradient(135deg, #fef3c7, #fde68a);
    --viewer-spec-item-bg: rgba(248, 250, 255, 0.9);
    --viewer-spec-item-hover-bg: rgba(240, 245, 255, 1);
    --viewer-part-thumb-bg: rgba(248, 250, 255, 0.9);
    --viewer-stats-item-bg: rgba(0, 136, 238, 0.06);
    --viewer-modal-mobile-bg: rgba(255, 255, 255, 0.99);
    --viewer-modal-mobile-close-bg: rgba(15, 23, 42, 0.1);
    --viewer-divider: rgba(15, 23, 42, 0.1);
    --viewer-warning: var(--viewer-ref-amber-500);
    --viewer-warning-ink: var(--viewer-ref-ink-900);
    --viewer-header-bg: rgba(255, 255, 255, 0.92);
    --viewer-stat-attack: var(--viewer-ref-red-500);
    --viewer-stat-attack-border: rgba(239, 68, 68, 0.6);
    --viewer-stat-attack-tint: rgba(239, 68, 68, 0.15);
    --viewer-stat-defense: var(--viewer-ref-teal-500);
    --viewer-stat-stamina: var(--viewer-ref-yellow-500);
    --viewer-stat-height: var(--viewer-ref-green-500);
    --viewer-stat-dash: var(--viewer-ref-amber-500);
    --viewer-stat-burst: var(--viewer-ref-purple-500);
    --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, 136, 238, 0.3);
    --glow-purple: 0 0 20px rgba(99, 102, 241, 0.2);
    --scanline-opacity: 0.015;
}