/* ══════════════════════════════════════════════════════════════════════════
   OS TOKENS — a paleta do AMERICA, num arquivo só.

   ⚠️ POR QUE ISTO EXISTE (custou caro para descobrir)

   Em 08/08 troquei 371 cores cravadas por `var(--...)` de uma vez, em 72
   telas. Funcionou em todas as que herdam de base.html — porque base.html
   carrega o style.css, onde as variáveis moravam. Só que DOZE telas do
   sistema são documento inteiro, com `<!DOCTYPE>` próprio, e não carregam
   folha nenhuma:

       login.html          ponte_externa.html    tv.html
       tour.html           ponte_invalido.html   tv_cais.html
       embarque_capa.html  siscomex_onboarding   tv_travessia.html
       embarque_relatorio  auxiliar_valor        importacao_di_tutorial

   Nelas, `background: var(--ciano)` não é ciano — é NADA. O botão "Entrar"
   do login perdeu o fundo, a tarja vermelha da marca sumiu, e a página
   pública onde o cliente sobe o certificado ficou sem o gradiente e sem o
   vermelho do estado de erro. Tudo isso foi para produção e ficou lá.

   Pior: quatro delas tinham `:root` próprio, e a troca cega transformou o
   navy cravado numa auto-referência (a variável recebendo `var()` DELA
   MESMA) — que em CSS é declaração INVÁLIDA. A variável não fica errada:
   some, e leva junto tudo que dependia dela naquela subárvore.

   E o `varre_rotas.py` não viu nada, porque ele lê o código HTTP e uma tela
   sem cor devolve 200 igualzinho.

   A REGRA QUE FICA: paleta mora AQUI, num arquivo que não tem layout nem
   componente — só as variáveis. Toda tela carrega este arquivo, herdando de
   base.html ou com um <link> próprio. Tela que se pinta sozinha não pode
   inventar a paleta de novo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* A MARCA — identidade AMERICA (americai.com.br) */
  --navy: #304048;
  --ciano: #007080;
  --vermelho: #FF3131;

  /* A BASE das telas */
  --fundo: #F2F5F9;
  --texto: #2A3A5C;
  --texto-suave: #5A6B8C;
  --borda: #E4E9F0;
  --verde: #1D9E75;

  /* OS ESTADOS — separados dos da MARCA de propósito. Vermelho de marca é
     identidade; vermelho de erro é semáforo, e misturar os dois faz o
     sistema inteiro parecer em alerta. Estes três estavam cravados em 318
     lugares de 73 telas, e por isso nenhuma pele os alcançava — o que
     aparecia como "mudou o menu mas a tela continua com a mesma cara". */
  --perigo: #c0392b;         /* erro, bloqueio, o que não pode seguir */
  --ok: #1b7a3d;             /* concluído, conferido, dentro da regra */
  --aviso: #9a6f06;          /* atenção que não trava: confira e siga */
}