/* ==========================================================================
   TOKENS DE DESIGN — Sebo Bar ERP (Etapa 4, entrega 2)
   Fonte única de cores, espaçamentos, raios, sombras e tipografia.
   As cores abaixo são os PADRÕES; as bases injetam por cima os valores da
   Configuracao (core/tema.py → {{ tokens_css }}), inclusive o tema escuro derivado.
   Carregar antes de style_v2.css. Sem !important: o tema escuro vence pelo seletor.
   ========================================================================== */

:root {
    /* Cores (tema claro) */
    --fundo-principal: #FFFFFF;
    --texto-principal: #111827;
    --fundo-secundario: #F3F4F6;
    --texto-secundario: #4B5563;
    --cor-acao: #006AFF;
    --cor-sucesso: #10B981;
    --cor-erro: #EF4444;
    --cor-atencao: #F59E0B;
    --fundo-modal: #FFFFFF;
    --texto-modal: #111827;
    --cor-borda: #E5E7EB;
    --cor-borda2: #D1D5DB;

    /* Tipografia (Inter de fato; o fallback é a pilha do sistema) */
    --font-family-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fonte-xs: 11px;
    --fonte-sm: 12px;
    --fonte-md: 13px;
    --fonte-lg: 16px;
    --fonte-xl: 20px;
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 600;

    /* Espaçamento (escala de 4px) */
    --espaco-1: 4px;
    --espaco-2: 8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-5: 24px;
    --espaco-6: 32px;

    /* Raios e sombras */
    --raio-sm: 4px;
    --raio-md: 6px;
    --raio-lg: 10px;
    --raio-redondo: 999px;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.10);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.18);

    --transicao-padrao: all 0.15s ease-in-out;

}

/* Tema escuro padrão (derivado dos padrões acima por core/tema.py). */
:root[data-theme="dark"] {
    --fundo-principal: #141414;
    --fundo-secundario: #242424;
    --fundo-modal: #242424;
    --texto-principal: #F5F5F5;
    --texto-modal: #F5F5F5;
    --texto-secundario: #ADADAD;
    --cor-borda: #383838;
    --cor-borda2: #4D4D4D;
    --cor-acao: #006AFF;
    --cor-sucesso: #10B981;
    --cor-erro: #EF4444;
    --cor-atencao: #F59E0B;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.5);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}