/* ────────────────────────────────────────────────────────────────────────
   UTILITARIOS — o que era `style="..."` no HTML.
   ────────────────────────────────────────────────────────────────────────

   POR QUE ISTO EXISTE

   Enquanto houvesse um `style="..."` no HTML, a CSP precisava de
   `style-src 'unsafe-inline'` — e uma CSP com `unsafe-inline` em style-src
   nao impede que estilo injetado seja aplicado. E risco menor que o do
   `script-src` (atributo de estilo nao EXECUTA codigo), mas e uma porta que
   nao precisa ficar aberta.

   O ganho maior nem e a CSP: estilo inline e INVISIVEL PARA FERRAMENTA. O
   contraste do botao de fechar o mapa (4,39:1, abaixo do minimo) so apareceu
   depois que a cor saiu do `style=` e virou CSS — auditor nenhum enxergava
   ela ali. Tirar o inline nao melhora so a politica: poe o codigo ao alcance
   de quem verifica.

   POR QUE UM ARQUIVO NOVO, E NAO DENTRO DOS QUE JA EXISTEM

   Cada pagina carrega um conjunto diferente (`home.css`, `base.css`,
   `artigo.css`, `legal.css`), e nao ha um so que todas carreguem alem do
   `styles.css` — que e saida do Tailwind e se regenera por comando, entao
   escrever nele a mao seria perder a mudanca na proxima geracao.

   Repetir estas regras nos quatro arquivos criaria quatro definicoes da mesma
   coisa, que e o defeito que este projeto passa a vida eliminando: mais cedo
   ou mais tarde alguem ajusta uma cor num deles so.

   NOMES

   Dizem o que a coisa E, nao como ela parece, sempre que ha um "o que": a
   marca no cabecalho e `.marca`, nao `.texto-grande-navy`. Onde e mesmo so
   uma cor aplicada em lugares sem parentesco, o nome e a cor — inventar
   semantica onde nao ha seria pior que admitir que e um utilitario.
   ──────────────────────────────────────────────────────────────────────── */

/* ---------- cor de texto ---------- */
.c-navy { color: var(--color-navy); }
.c-cerulean { color: var(--color-cerulean); }
.c-gold { color: var(--color-gold); }
.c-branco { color: #ffffff; }
.c-branco-85 { color: rgba(255, 255, 255, 0.85); }
.c-branco-75 { color: rgba(255, 255, 255, 0.75); }

/* ---------- fundo ---------- */
.bg-navy { background-color: var(--color-navy); }
.bg-cerulean { background-color: var(--color-cerulean); }
.bg-cta { background-color: var(--color-green-cta); }
.bg-green { background-color: var(--color-green); }
.bg-alt { background-color: var(--color-bg-alt); }
.bg-gold { background-color: var(--color-gold); color: var(--color-navy); }
.bg-branco-10 { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }

/* Fundos de destaque dos cartoes do artigo. Sao tres tons proprios, sem token
   — ficaram como hexadecimal porque so existem aqui e batizar de
   `--color-caixa-verde` criaria um token para um uso so. */
.bg-creme { background-color: #FFF8EE; }
.bg-azul-claro { background-color: #EEF4FF; }
.bg-verde-claro { background-color: #E8FDF0; }

/* ---------- texto ---------- */
.sublinhado { text-decoration: underline; }
.centrado { text-align: center; }
.link-cerulean { color: var(--color-cerulean); text-decoration: underline; }
.link-cerulean-forte { color: var(--color-cerulean); font-weight: 600; text-decoration: underline; }
.c-navy-justo { color: var(--color-navy); letter-spacing: -0.02em; }

/* ---------- marca ---------- */
/* O mesmo logotipo em dois contextos: escuro sobre claro no cabecalho, claro
   sobre escuro no rodape. Sao dois tamanhos diferentes, entao nao da para
   herdar um do outro sem sobrescrever mais do que se aproveita. */
.marca {
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  line-height: 1;
}
.marca-rodape {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

/* ---------- pecas de uma pagina so ---------- */
.titulo-hero { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.02em; }
.numero-404 {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-cerulean);
}
.img-fluida-380 { max-width: 380px; width: 100%; height: auto; }