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

    /* Core palette - Crisp white with electric blue accent */
    --viewer-bg: linear-gradient(180deg, #f8faff 0%, #f0f4ff 50%, #e8f0ff 100%);
    --viewer-text: #0f172a;
    --viewer-text-muted: #475569;
    --viewer-text-soft: #64748b;

    /* 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: #0f172a;
    --viewer-input-focus: #0088ee;
    --viewer-input-focus-shadow: rgba(0, 136, 238, 0.25);
    --viewer-option-bg: #ffffff;
    --viewer-option-text: #0f172a;

    /* 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: #f0f9ff;
    --viewer-toast-error-border: rgba(220, 38, 38, 0.6);
    --viewer-toast-error-text: #fecaca;

    /* Footer */
    --viewer-footer-bg: rgba(255, 255, 255, 0.8);
    --viewer-footer-border: rgba(15, 23, 42, 0.08);
    --viewer-footer-text: #64748b;

    /* Dialogs */
    --viewer-backdrop-bg: 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: #0f172a;
    --viewer-dialog-btn-bg: rgba(0, 136, 238, 0.08);
    --viewer-dialog-btn-text: #1e293b;
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #0088ee 0%, #0077dd 100%);
    --viewer-dialog-confirm-text: #ffffff;
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: #ffffff;
    --viewer-dialog-btn-border: rgba(0, 136, 238, 0.3);
    --viewer-dialog-cancel-border: rgba(220, 38, 38, 0.5);
    --viewer-dialog-muted: #64748b;

    /* 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(15, 23, 42, 0.08);
    --viewer-card-border: rgba(0, 100, 180, 0.12);

    /* Accent colors */
    --viewer-accent: #0088ee;
    --viewer-accent-strong: #00aaff;
    --viewer-accent-contrast: #ffffff;
    --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: #0f172a;

    /* 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: #475569;
    --viewer-product-price: #0077cc;
    --viewer-product-release: #64748b;
    --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);
    --viewer-tab-active-text: #ffffff;

    /* Toggles */
    --viewer-toggle-bg: rgba(15, 23, 42, 0.05);
    --viewer-toggle-hover-bg: rgba(15, 23, 42, 0.1);

    /* 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: #f59e0b;
    --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: #f59e0b;
    --viewer-warning-ink: #1a1a2e;
    --viewer-header-bg: rgba(255, 255, 255, 0.92);

    /* Stats colors */
    --viewer-stat-attack: #ef4444;
    --viewer-stat-defense: #14b8a6;
    --viewer-stat-stamina: #eab308;
    --viewer-stat-height: #22c55e;
    --viewer-stat-dash: #f59e0b;
    --viewer-stat-burst: #a855f7;

    /* 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;
    --viewer-bg: linear-gradient(180deg, #f8faff 0%, #f0f4ff 50%, #e8f0ff 100%);
    --viewer-text: #0f172a;
    --viewer-text-muted: #475569;
    --viewer-text-soft: #64748b;
    --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: #0f172a;
    --viewer-input-focus: #0088ee;
    --viewer-input-focus-shadow: rgba(0, 136, 238, 0.25);
    --viewer-option-bg: #ffffff;
    --viewer-option-text: #0f172a;
    --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: #f0f9ff;
    --viewer-toast-error-border: rgba(220, 38, 38, 0.6);
    --viewer-toast-error-text: #fecaca;
    --viewer-footer-bg: rgba(255, 255, 255, 0.8);
    --viewer-footer-border: rgba(15, 23, 42, 0.08);
    --viewer-footer-text: #64748b;
    --viewer-backdrop-bg: 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: #0f172a;
    --viewer-dialog-btn-bg: rgba(0, 136, 238, 0.08);
    --viewer-dialog-btn-text: #1e293b;
    --viewer-dialog-confirm-bg: linear-gradient(135deg, #0088ee 0%, #0077dd 100%);
    --viewer-dialog-confirm-text: #ffffff;
    --viewer-dialog-cancel-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --viewer-dialog-cancel-text: #ffffff;
    --viewer-dialog-btn-border: rgba(0, 136, 238, 0.3);
    --viewer-dialog-cancel-border: rgba(220, 38, 38, 0.5);
    --viewer-dialog-muted: #64748b;
    --viewer-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
    --viewer-card-border: rgba(15, 23, 42, 0.08);
    --viewer-card-border: rgba(0, 100, 180, 0.12);
    --viewer-accent: #0088ee;
    --viewer-accent-strong: #00aaff;
    --viewer-accent-contrast: #ffffff;
    --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: #0f172a;
    --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: #475569;
    --viewer-product-price: #0077cc;
    --viewer-product-release: #64748b;
    --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-tab-active-text: #ffffff;
    --viewer-toggle-bg: rgba(15, 23, 42, 0.05);
    --viewer-toggle-hover-bg: rgba(15, 23, 42, 0.1);
    --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: #f59e0b;
    --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: #f59e0b;
    --viewer-warning-ink: #1a1a2e;
    --viewer-header-bg: rgba(255, 255, 255, 0.92);
    --viewer-stat-attack: #ef4444;
    --viewer-stat-defense: #14b8a6;
    --viewer-stat-stamina: #eab308;
    --viewer-stat-height: #22c55e;
    --viewer-stat-dash: #f59e0b;
    --viewer-stat-burst: #a855f7;
    --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;
}