/* ═══════════════════════════════════════════════════════════════
PALETA INSTITUCIONAL — Pantone 296 C · Cool Gray 09 C · Branco
═══════════════════════════════════════════════════════════════
Este arquivo NAO tem regra de layout. Ele so declara os tokens de
cor que a folha de leadpage consome. A ideia e que a estrutura
viva num arquivo unico e compartilhado, e que a diferenca entre
uma area e outra caiba inteiramente aqui.
Uso na pagina — as cores ANTES da estrutura:
── Por que cada cor aparece duas vezes ─────────────────────────
Os tokens terminados em `-rgb` guardam a MESMA cor em componentes
separados por espaco, sem a funcao `rgb()` em volta. Isso existe
porque a folha precisa da cor em varias transparencias — o veu do
hero, a borda do campo, a sombra do cartao, o degrade do rodape —
e nao ha como aplicar alfa sobre um token que ja e `#rrggbb`.
Com o par, escreve-se `rgb(var(--marca-rgb) / 0.14)` e a mesma
troca de paleta alcanca tambem as transparencias.
── Quem usa esta paleta ────────────────────────────────────────
Familia, Empresarial, Civil, Trabalhista e Bancario. As cinco
areas institucionais compartilham exatamente estes valores, que
sao os mesmos de `assets/css/site.css` — por isso um arquivo so,
e nao cinco copias identicas. No dia em que uma area precisar de
paleta propria, ela ganha o seu arquivo e troca uma linha no
``; nada mais muda.
═══════════════════════════════════════════════════════════════ */
:root {
/* ── SUPERFICIE ESCURA ────────────────────────────────────────
O fundo das faixas escuras: hero, faixa de destaque, rodape.
Pantone 296 C. */
--marca: #031c2d;
--marca-rgb: 3 28 45;
/* O mesmo 296 C rebaixado, usado so nos veus sobre fotografia —
o degrade que escurece a imagem do hero e o do bloco de
fechamento. Precisa ser mais fundo que `--marca` para que o
texto branco sobreviva a uma foto clara por baixo. */
--marca-funda-rgb: 1 17 28;
/* ── ACENTO SOBRE SUPERFICIE CLARA ────────────────────────────
Botao principal, filete sob o titulo, marcador de lista, foco.
Aqui e o proprio 296 C: a identidade institucional trabalha com
uma cor de marca so, e o que separa o botao de conversao do
botao de navegacao passa a ser preenchido x contorno, e nao
duas cores. Na paleta do agro estes dois papeis sao cores
diferentes — por isso os tokens seguem separados. */
--acento: #031c2d;
--acento-hover: #0a2c44; /* 296 C clareado, so para o hover */
--acento-rgb: 3 28 45; /* o acento em transparencia */
/* ── ACENTO SOBRE SUPERFICIE ESCURA ───────────────────────────
Sobre o navy o navy nao pode marcar a si mesmo. Quem faz esse
papel e o Cool Gray clareado: o tom puro (#73787c) sobre a
faixa escura rende 3,27:1, abaixo de AA; clareado chega a
5,51:1. */
--claro: #a7abaf;
--claro-rgb: 167 171 175;
/* ── SUPERFICIES CLARAS ───────────────────────────────────────
Duas, e nao uma: as faixas se alternam, e com o mesmo valor nas
duas a alternancia sumiria. Sao a mesma cor em duas diluicoes
do Cool Gray 09 C no branco — 6% e 12%. */
--superficie: #f2f4f5;
--superficie-2: #e6eaec;
--superficie-2-rgb: 230 234 236;
/* ── TINTA ────────────────────────────────────────────────────
`--tinta` e o 296 C: titulos, e tambem a cor das sombras, das
bordas de campo e dos preenchimentos sutis de hover sobre fundo
claro — dai o par `-rgb`.
`--tinta-suave` e o corpo de texto. O Cool Gray 09 C puro rende
4,46:1 no branco, abaixo de AA; escurecido, chega a 6,37:1. */
--tinta: #031c2d;
--tinta-rgb: 3 28 45;
--tinta-suave: #5a6065;
/* ── NEUTROS ──────────────────────────────────────────────────
`--sombra-rgb` e preto puro, reservado as sombras projetadas
que precisam de neutralidade — as demais usam `--tinta-rgb`,
que tinge levemente de azul e assenta melhor sobre as
superficies claras desta paleta. */
--branco: #ffffff;
--branco-rgb: 255 255 255;
--sombra-rgb: 0 0 0;
/* ── PAPEIS FIXOS ─────────────────────────────────────────────
Cores que nao mudam entre as areas, mas que ficam aqui para que
a folha de estrutura nao guarde nenhum valor literal.
`--rodape` e o dark da casa. Note que ele NAO acompanha
`--marca`: no agro a faixa escura e verde e o rodape continua
296 C. Sao papeis distintos, por isso tokens distintos. */
--rodape: #031c2d;
--erro: #8a2f1c; /* mensagem de campo invalido */
/* ── BOTAO SOBRE FAIXA ESCURA ─────────────────────────────────
Sobre o navy o botao navy desapareceria, entao ele inverte:
fundo branco, texto navy. No agro o terracota se destaca sobre
o verde e o botao continua igual ao das faixas claras. Como a
solucao e diferente em cada paleta, o par vira token. */
--btn-escuro-fundo: #ffffff;
--btn-escuro-fundo-hover: #a7abaf;
--btn-escuro-texto: #031c2d;
/* ── CIRCULO DO ICONE DE SOLUCAO, NA FAIXA ESCURA ─────────────
Mesmo raciocinio: aqui o disco precisa de um veu claro com fio
de contorno para existir sobre o navy; no agro o terracota ja
se destaca sobre o verde e o disco fica opaco, sem contorno. */
--icone-fundo-escuro: rgb(167 171 175 / 0.14);
--icone-borda-escuro: 1px solid rgb(167 171 175 / 0.34);
/* ── FOTOGRAFIAS DE FUNDO ─────────────────────────────────────
Nao sao cor, mas sao identidade da area e mudam junto com ela,
entao moram aqui — e assim a folha de estrutura nao guarda
nenhum caminho de arquivo.
Caminho ABSOLUTO, sempre: a folha compartilhada vive em
/assets/css/, e um caminho relativo passaria a resolver a
partir dali. */
--foto-fechamento: url('/assets/images/fundo1.jpg');
--foto-equipe: url('/assets/images/fundo.jpg');
/* ── CONTEXTO: PAGINAS DE AREA (HUB) ──────────────────────────
As paginas de area usam os mesmos valores das de especialidade,
entao estes tokens apenas repetem os de cima. Eles existem para
que a folha de hub e a de leadpage possam divergir sem que uma
precise saber da outra — e porque no agro elas DE FATO divergem.
Veja a nota correspondente em `cores-agro.css`. */
--superficie-hub: #f2f4f5;
--cartao-fundo-rgb: 242 244 245; /* pe do gradiente dos cartoes */
--tinta-hub: #031c2d;
--tinta-suave-hub: #5a6065;
/* hover do botao pintado com a cor de marca */
--marca-hover: #0a2c44;
}