/* =====================================================================
 *  brand.css — Identidade visual da ALN sobre o tema Metronic.
 *  Carregado DEPOIS de style.bundle.css para sobrescrever as cores.
 *  Cor padrão da marca: #1847AF
 * ===================================================================== */

:root {
    --aln-brand: #1847AF;        /* azul padrão da marca */
    /* O mesmo azul em componentes, para quem precisa de transparência:
       `rgba(var(--aln-brand-rgb), .1)`. Um hex não sabe ser translúcido. */
    --aln-brand-rgb: 24, 71, 175;
    --aln-brand-active: #123a92; /* hover/estado ativo (mais escuro) */
    --aln-brand-2: #2f5fd0;      /* variação clara p/ gradientes */

    /* Fonte do logotipo textual (troque aqui p/ 'Outfit' se preferir mais fino) */
    --aln-logo-font: 'Archivo', 'Inter', system-ui, sans-serif;
}

/* ---- O bege do fundo, em componentes ----
   O tema já pinta o app com `--bs-app-bg-color` (#FBF6F0 claro, #0F1014
   escuro). Quem precisa dele em rgba — a TV do Mural, para lavar o fundo
   com um véu da marca — usa esta versão. */
[data-bs-theme=light] { --aln-fundo-rgb: 251, 246, 240; }
[data-bs-theme=dark]  { --aln-fundo-rgb: 15, 16, 20; }

/* ---- Logotipo em TEXTO (wordmark) — usado no lugar de imagem ---- */
.aln-logo{
    font-family:var(--aln-logo-font);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.15em;
    line-height:1;
    color:currentColor;          /* herda a cor do contexto (branco no header) */
    white-space:nowrap;
    display:inline-block;
}
.aln-logo-sm{ font-size:16px; letter-spacing:.13em }
.aln-logo-md{ font-size:21px }
.aln-logo-lg{ font-size:30px }
/* leve compensação: o espaçamento cria um "vazio" à direita */
.aln-logo{ margin-right:-.15em }

/* ---- Header primário: troca o verde (#17C653) pelo azul da marca ---- */
[data-bs-theme=light] {
    --bs-app-header-primary-base-bg-color: var(--aln-brand);
}
[data-bs-theme=dark] {
    /* no escuro, um azul-marinho profundo (antes era quase preto) */
    --bs-app-header-primary-base-bg-color: #0c1c40;
}

/* ---- Cor primária do sistema = azul da marca (botões, links, ativos) ---- */
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-primary: var(--aln-brand);
    --bs-primary-active: var(--aln-brand-active);
    --bs-primary-inverse: #ffffff;
    --bs-link-color: var(--aln-brand);
    --bs-link-hover-color: var(--aln-brand-active);
    --bs-text-primary: var(--aln-brand);
}
[data-bs-theme=light] { --bs-primary-light: #e9eefb; }
[data-bs-theme=dark]  { --bs-primary-light: #16223f; }

/* Botão primário coerente com a marca (força cor + hover, sem "hover branco") */
.btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active) {
    background-color: var(--aln-brand) !important;
    border-color: var(--aln-brand) !important;
    color: #fff !important;
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active,
.btn.btn-primary.show,
.btn.btn-primary:focus:active {
    background-color: var(--aln-brand-active) !important;
    border-color: var(--aln-brand-active) !important;
    color: #fff !important;
}

/* Botão secundário (light-primary): azul claro → azul no hover */
.btn.btn-light-primary {
    background-color: #e9eefb !important;
    color: var(--aln-brand) !important;
    border-color: transparent !important;
}
.btn.btn-light-primary:hover,
.btn.btn-light-primary:active {
    background-color: var(--aln-brand) !important;
    color: #fff !important;
}