/**
 * INF-005 F3 — tokens (D-3 / RF013).
 * Única declaração de @layer do tema. Sem regras de componente.
 *
 * --bg-leitura light = #f0f4f8: último :root do monolito (f1-02) vencia o
 * #FEFDFD do primeiro bloco. --branco-neutro permanece #FEFDFD.
 * --vip-* / --sv2-* / --avm-* ainda nascem nos templates (F5).
 */

@layer tokens, base, primitives, features, utilities, overrides;

@layer tokens {
    :root {
        --azul-principal: #0441F5;
        --azul-neon: #59C4F9;
        --marrom-madeira: #A18168;
        --marrom-escuro: #705642;
        --preto-profundo: #0D0A0B;
        --branco-neutro: #FEFDFD;
        --vermelho-youtube: #FF0000;
        --papel-centro: #d4c5a9;
        --papel-borda: #8c7b5d;

        --bg-leitura: #f0f4f8;
        --texto-leitura: #222222;
        --surface-nav: #ffffff;
        --surface-dark: #1a1b26;

        --font-size-body: clamp(1.125rem, 1.08rem + 0.22vw, 1.3125rem);
        --font-size-h1: clamp(1rem, 1.5vw + 1.0rem, 1.5rem);
        --font-size-h2: clamp(1.2rem, 1.2vw + 1.2rem, 1.8rem);
        --spacing-unit: clamp(1rem, vw, 1.2rem);
        --safe-area-bottom: env(safe-area-inset-bottom, 20px);

        --cor-fundo: var(--bg-leitura);
        --cor-header: var(--preto-profundo);
        --cor-texto: var(--texto-leitura);
        --cor-texto-suave: #444444;
        --cor-branca: #ffffff;
        --largura-sidebar-mobile: 280px;
        --sombra-suave: 0 4px 15px rgba(4, 65, 245, 0.08);
        --sombra-card: 0 10px 25px rgba(13, 10, 11, 0.15);

        --bg-palco-claro: #f0f4f8;
        --bg-palco-escuro: #0D0A0B;
        --bg-card-claro: rgba(255, 255, 255, 0.92);
        --bg-card-escuro: rgba(26, 27, 38, 0.95);
        /* RDM-010: banners da casa e faixa de novidade (71-espacos.css) — escuros nos dois temas, ouro do Salão */
        --re-noite: #0b0907;
        --re-perg: #f3e6c8;
        --re-ouro: #c9a227;
        --re-ouro-claro: #e2c25a;
        --re-ouro-hover: #f0d47a;
        --re-borda: rgba(201, 162, 39, 0.45);
        --re-veu: rgba(11, 9, 7, 0.9);
        --re-veu-0: rgba(11, 9, 7, 0);
        --re-selo: rgba(0, 0, 0, 0.6);
        --re-sombra: 0 10px 28px rgba(0, 0, 0, 0.28);
        /* cards de sistema (35-sistemas.css): véu para o logotipo aparecer sobre a arte; placa dos logotipos escuros */
        --sis-veu-centro: rgba(11, 9, 7, 0.55);
        --sis-veu-borda: rgba(11, 9, 7, 0.12);
        --sis-placa: rgba(243, 230, 200, 0.94);
        --sis-sombra-logo: rgba(0, 0, 0, 0.85);
    }

    html.dark-mode {
        --bg-leitura: #0D0A0B;
        --texto-leitura: #e0e0e0;
        --surface-nav: #1a1b26;
        --cor-fundo: #0D0A0B;
        --cor-texto-suave: #aaaaaa;
        --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.5);
    }
}