/* ==========================================================================
   root.css - paleta base da plataforma B4BID

   Carregado antes do app.css. As outras folhas usam só estas variáveis,
   nunca o hexadecimal direto.
   ========================================================================== */

:root {
    /* Paleta base */
    --b4-azul-principal: #0A2540;   /* confiança, sofisticação */
    --b4-azul-destaque: #007AFF;    /* tecnologia, dinamismo */
    --b4-off-white: #F7F8FA;        /* clean, minimalista */
    --b4-cinza: #D1D5DB;            /* equilíbrio, interface */
    --b4-grafite: #1F2937;          /* texto, contraste */
    --b4-branco: #FFFFFF;

    /* Versões em RGB, para usar com rgba() em sombras e anéis de foco */
    --b4-azul-principal-rgb: 10, 37, 64;
    --b4-azul-destaque-rgb: 0, 122, 255;
    --b4-grafite-rgb: 31, 41, 55;

    /* Tons derivados para hover e clique */
    --b4-azul-principal-hover: #12385E;
    --b4-azul-principal-ativo: #061A2E;
    --b4-azul-destaque-hover: #0066D6;
    --b4-azul-destaque-ativo: #0057B8;
    --b4-azul-destaque-suave: #E6F1FF;
    --b4-cinza-hover: #BFC4CC;
    --b4-cinza-claro: #E5E7EB;
    --b4-texto-secundario: #6B7280;

    /* Texto padrão de rótulos e conteúdo */
    --b4-texto: var(--b4-grafite);

    /* Botões: primário (salvar, confirmar) e secundário (cancelar, voltar) */
    --b4-primario: var(--b4-azul-principal);
    --b4-primario-rgb: var(--b4-azul-principal-rgb);
    --b4-primario-hover: var(--b4-azul-principal-hover);
    --b4-primario-ativo: var(--b4-azul-principal-ativo);
    --b4-secundario-fundo: var(--b4-cinza);
    --b4-secundario-texto: var(--b4-grafite);
    --b4-secundario-hover: var(--b4-cinza-hover);
    --b4-label-fundo: var(--b4-off-white);

    /* Formulários */
    --b4-campo-borda: var(--b4-cinza);
    --b4-campo-borda-foco: var(--b4-azul-destaque);
    --b4-campo-texto: var(--b4-grafite);
    --b4-campo-placeholder: #9CA3AF;
    --b4-campo-fundo: var(--b4-branco);
    --b4-campo-fundo-desabilitado: var(--b4-off-white);
    --b4-campo-anel-foco: 0 0 0 0.2rem rgba(var(--b4-azul-destaque-rgb), 0.15);

    /* Sidebar (menu lateral) */
    --b4-sidebar-fundo: var(--b4-branco);
    --b4-sidebar-sombra: 0 0.125rem 0.375rem 0 rgba(161, 172, 184, 0.12);
    --b4-sidebar-marca: var(--b4-azul-principal);
    --b4-sidebar-texto: var(--b4-texto-secundario);
    --b4-sidebar-texto-hover: var(--b4-azul-principal);
    --b4-sidebar-fundo-hover: var(--b4-off-white);
    --b4-sidebar-cabecalho: #9CA3AF;
    --b4-sidebar-ativo-texto: var(--b4-azul-destaque);
    --b4-sidebar-ativo-fundo: var(--b4-azul-destaque-suave);
    --b4-sidebar-ativo-marca: var(--b4-azul-destaque);
}

/*
 * Tema escuro: html.dark-style, junto com o core-dark.css e o theme-default-dark.css do Sneat.
 * Mesmas variáveis, valores ajustados aos fundos escuros do Sneat (#232333 página, #2b2c40 cards).
 * O Azul Principal some no fundo escuro, então o primário passa a ser o Azul Destaque.
 */
.dark-style {
    --b4-texto: #CBCBE2;
    --b4-texto-secundario: #A3A4CC;

    --b4-primario: var(--b4-azul-destaque);
    --b4-primario-rgb: var(--b4-azul-destaque-rgb);
    --b4-primario-hover: var(--b4-azul-destaque-hover);
    --b4-primario-ativo: var(--b4-azul-destaque-ativo);
    --b4-secundario-fundo: #444564;
    --b4-secundario-texto: #CBCBE2;
    --b4-secundario-hover: #50516F;
    --b4-label-fundo: rgba(255, 255, 255, 0.06);

    --b4-campo-borda: #444564;
    --b4-campo-texto: #CBCBE2;
    --b4-campo-placeholder: #7E7F9C;
    --b4-campo-fundo: #2B2C40;
    --b4-campo-fundo-desabilitado: #393A52;
    --b4-campo-anel-foco: 0 0 0 0.2rem rgba(var(--b4-azul-destaque-rgb), 0.25);
    --b4-cinza-hover: #5A5B78;

    --b4-sidebar-fundo: #2B2C40;
    --b4-sidebar-sombra: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.16);
    --b4-sidebar-marca: var(--b4-branco);
    --b4-sidebar-texto: #A3A4CC;
    --b4-sidebar-texto-hover: var(--b4-branco);
    --b4-sidebar-fundo-hover: rgba(255, 255, 255, 0.05);
    --b4-sidebar-cabecalho: #7E7F9C;
    --b4-sidebar-ativo-texto: var(--b4-branco);
    --b4-sidebar-ativo-fundo: rgba(var(--b4-azul-destaque-rgb), 0.2);
    --b4-sidebar-ativo-marca: var(--b4-azul-destaque);
}