/* ══════════════════════════════════════════
   THEMES — Светлая тема
   ══════════════════════════════════════════ */

[data-theme="light"] {
    --bg-root: #f8f9fb;
    --bg-body: #ffffff;
    --bg-surface-1: #ffffff;
    --bg-surface-2: #f3f4f6;
    --bg-surface-3: #e5e7eb;
    --bg-surface-raised: #ffffff;
    --bg-surface-overlay: rgba(255, 255, 255, 0.9);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(0, 0, 0, 0.06);
    --bg-selected: rgba(99, 102, 241, 0.06);

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.2);

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-disabled: #d1d5db;
    --text-inverse: #ffffff;
    --text-link: #4f46e5;
    --text-link-hover: #6366f1;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Специфические переопределения для светлой */
[data-theme="light"] .card {
    background-image: none;
}

[data-theme="light"] .sidebar {
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .header {
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .scoreboard {
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .stat-card {
    background-image: none;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .hero-card {
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .btn-primary {
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .toast {
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] kbd {
    background: var(--bg-surface-3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}