/**
 * @file variables.css
 * @description Design tokens e variáveis CSS globais do Superchart.
 *
 * Contém:
 *  - Cores e paleta base (:root)
 *  - Gradientes de fundo (--body-bg, --topbar-bg)
 *  - Superfícies e opacidades (--surface, --panel, --hud-bg, etc.)
 *  - Variáveis de autenticação (--auth-*)
 *
 * Para mudar o tema escuro ou criar novos temas, edite este arquivo.
 * As variáveis de tema dinâmico (light/dark) são aplicadas via JS em THEME_PRESETS.
 */

:root {
    --bg: #0b0d10;
    --panel: rgba(18, 22, 28, 0.9);
    --panel-border: rgba(255, 255, 255, 0.08);
    --text: rgba(255, 255, 255, 0.88);
    --muted: rgba(255, 255, 255, 0.55);
    --accent: #62a9ff;
    --danger: #ff5c7a;
    --ok: #36d399;
    --shadow: 0 16px 50px rgba(0, 0, 0, 0.55);

    --body-bg: radial-gradient(1200px 800px at 15% 20%, rgba(98, 169, 255, 0.10), transparent 55%),
                radial-gradient(900px 700px at 85% 30%, rgba(54, 211, 153, 0.07), transparent 55%),
                var(--bg);
    --topbar-bg: linear-gradient(180deg, rgba(15, 18, 23, 0.95), rgba(10, 12, 15, 0.92));
    --surface: rgba(18, 22, 28, 0.65);
    --surface-hover: rgba(18, 22, 28, 0.9);
    --shell-bg: rgba(8, 10, 12, 0.65);
    --leftbar-bg: rgba(8, 10, 12, 0.65);
    --popover-bg: rgba(10, 12, 15, 0.92);
    --hud-bg: rgba(10, 12, 15, 0.70);
    --toast-bg: rgba(10, 12, 15, 0.82);

    /* Auth Modal */
    --auth-overlay-bg: rgba(0, 0, 0, 0.85);
    --auth-modal-bg: #12161c;

    /* Navegação / usuário logado */
    --nav-user-bg: rgba(255, 255, 255, 0.05);
    --nav-user-hover: rgba(255, 255, 255, 0.08);
}