/* ==========================================================================
   PALETA E TOKENS — Campanha Agaciel Maia 2026
   Fonte: IDV-AgacielMaia-v2 (identidade visual oficial, 12/08/2026).

   Cores oficiais da IDV, sem invenção:
     #252B5B  navy da marca        #2B4093  azul de ação
     #E9B11E  dourado              #E6C031  amarelo
     #529336  verde                #F1F1F0  off-white

   O verde e o dourado vêm do elemento-bandeira do logo (o "A" de MAIA) e são
   os três da faixa tricolor. Medido antes de usar: o verde dá 3,3:1 sobre o
   off-white e 3,6:1 sobre o navy — reprova em texto pela WCAG AA. Por isso o
   verde entra SÓ como elemento gráfico (faixa, arco, borda), nunca como texto.

   Os NOMES das variáveis são os mesmos do site do Francelino de propósito:
   `widget.css` é compartilhado entre as duas campanhas e depende deles. Trocar
   um nome aqui quebra o widget sem erro visível — só a cor some. Na troca de
   identidade de 12/08 mudaram apenas os VALORES.
   ========================================================================== */

:root {
    /* Azuis — do mais escuro (fundo) ao mais claro (detalhe).
       `--color-blue-dark` é um navy derivado do #252B5B, escurecido, para o
       rodapé e as seções escuras terem profundidade contra o navy da marca. */
    --color-blue-dark: #1A1E42;   /* navy profundo, fundo de seção e rodapé */
    --color-blue-main: #252B5B;   /* NAVY DA MARCA (IDV) */
    --color-blue-mid:  #2B4093;   /* AZUL DE AÇÃO (IDV), bordas e links */
    --color-blue-light:#4A5DB0;   /* azul claro, hover e detalhe */

    /* Acento: dourado e amarelo da IDV.
       Os NOMES `--color-yellow` e `--color-gold-soft` são lidos por widget.css,
       compartilhado com o site do Francelino — só os valores mudaram.
       ATENÇÃO: o dourado só tem contraste sobre fundo escuro (sobre o navy da
       marca dá 6,8:1; sobre branco, 1,9:1 — ilegível). Texto dourado sobre
       fundo claro está tratado em `global.css`, na regra `.section-label`. */
    --color-yellow: #E9B11E;      /* DOURADO (IDV) */
    --color-gold-soft: #E6C031;   /* AMARELO (IDV) */

    /* Verde da IDV — elemento gráfico apenas, nunca texto (ver nota acima). */
    --color-green: #529336;

    /* Neutros */
    --color-white: #FFFFFF;
    --color-gray-light: #F1F1F0;  /* OFF-WHITE (IDV) */
    --color-gray-line: #E0E0DD;
    --color-text-dark: #1E2245;
    --color-text-muted: #5B6070;

    /* Tipografia — IDV: Placard Next (display) + Montserrat (texto).
       Placard Next é fonte comercial da Monotype: não pode ser embarcada na web
       sem licença de webfont. O substituto é Anton (Google Fonts, OFL), a
       condensada pesada mais próxima do desenho — usada SÓ nos blocos de
       impacto (`--font-display`). Montserrat é a fonte da IDV e existe no Google
       Fonts: entra em título e corpo, como manda a identidade.
       `--font-heading` e `--font-body` são lidos por widget.css. */
    --font-display: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

    /* NÚMEROS — a arte de aprovação final (adesivo "DEPUTADO FEDERAL 2220",
       recebida em 14/08) fecha o desenho dos algarismos: pesados e LARGOS, não
       condensados. Anton é condensada e desenha um "2220" estreito, que não é o
       da peça — por isso os números não usam `--font-display`.
       Montserrat no peso 900 é a fonte da própria IDV e é o desenho que mais
       se aproxima do aprovado. Usar SEMPRE com `font-weight: 900`: nos pesos
       menores a família perde a mancha da arte. */
    --font-numero: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

    /* Outros */
    --transition-speed: 0.3s;
    --border-radius: 8px;
    --border-radius-lg: 16px;
    --container-max-width: 1180px;
    --header-height: 82px;

    /* Faixa tricolor da IDV (dourado · azul · verde), o mesmo trio do
       elemento-bandeira do logo. Usada como filete de assinatura no cabeçalho,
       no rodapé e sob os títulos de seção. */
    --faixa-tricolor: linear-gradient(90deg,
        var(--color-yellow) 0 33.333%,
        var(--color-blue-mid) 33.333% 66.666%,
        var(--color-green) 66.666% 100%);

    /* Sombras — elevação discreta, institucional. Sem sombra colorida. */
    --shadow-sm: 0 2px 10px rgba(26, 30, 66, 0.06);
    --shadow-md: 0 10px 30px rgba(26, 30, 66, 0.08);
    --shadow-lg: 0 22px 54px rgba(26, 30, 66, 0.14);
}