/*
 * Paleta do Portal Branco, tirada do logo (static/img/logo-branco.png): grafite, amarelo e
 * branco. Toda cor do site sai destas variáveis: nenhum outro arquivo CSS ou template declara
 * cor diretamente. Contrastes conferidos para WCAG AA (texto normal >= 4,5:1).
 */
:root {
  /* Primária: o grafite do logo. Branco sobre ela: 16,48:1. */
  --cor-primaria: #1f1f1f;
  --cor-primaria-escura: #111111;
  --cor-primaria-rgb: 31, 31, 31;

  /* Secundária: cinza neutro para textos de apoio. Sobre branco: 7,15:1. */
  --cor-secundaria: #55585c;

  /* Alerta: o amarelo do logo. Só como detalhe ou com texto escuro por cima. */
  --cor-alerta: #f2c244;

  /* Erro de formulário. Sobre branco: ~6,5:1. */
  --cor-erro: #b02a37;

  --cor-texto: #1f1f1f;
  --cor-fundo: #f5f5f3;
  --cor-superficie: #ffffff;
  --cor-borda: #d9d9d5;

  /* Contorno de foco sobre fundo claro: 16,48:1 sobre --cor-superficie e 15,10:1 sobre --cor-fundo
     (mínimo 3:1). Blocos de fundo escuro ou amarelo redefinem a variável em publico.css. */
  --cor-foco: var(--cor-primaria);

  /*
   * --- Site público (Fase 3) ---------------------------------------------------------------------
   * Razões de contraste calculadas (luminância relativa WCAG 2.x). AA pede 4,5:1 para texto
   * normal e 3:1 para texto grande, bordas de campo, ícones e indicador de foco.
   *
   *   texto / fundo                                      razão
   *   --cor-texto-inverso (#fff)  / --cor-primaria        16,48:1
   *   --cor-texto-inverso (#fff)  / --cor-primaria-escura 18,88:1
   *   --cor-texto-inverso-suave   / --cor-primaria        12,82:1
   *   --cor-texto-inverso-suave   / --cor-primaria-escura 14,68:1
   *   --cor-alerta (detalhe/foco) / --cor-primaria         9,87:1
   *   --cor-alerta (detalhe/foco) / --cor-primaria-escura 11,31:1
   *   --cor-texto                 / --cor-alerta           9,87:1
   *   --cor-primaria-escura       / --cor-alerta          11,31:1
   *   --cor-primaria              / --cor-alerta           9,87:1
   *   --cor-primaria-escura       / --cor-alerta-escura    8,73:1
   *   --cor-texto                 / --cor-primaria-suave  14,20:1
   *   --cor-secundaria            / --cor-primaria-suave   6,16:1
   *   --cor-primaria              / --cor-primaria-suave  14,20:1
   *   --cor-texto                 / --cor-fundo           15,10:1
   *   --cor-secundaria            / --cor-fundo            6,55:1
   *   --cor-primaria              / --cor-fundo           15,10:1
   *   --cor-erro                  / --cor-fundo            5,95:1
   *   --cor-texto                 / --cor-superficie      16,48:1
   *   --cor-secundaria            / --cor-superficie       7,15:1
   *   --cor-primaria              / --cor-superficie      16,48:1
   *   --cor-borda-campo           / --cor-superficie       5,41:1
   *   --cor-texto-inverso (ícone) / --cor-whatsapp         5,50:1
   *   --cor-whatsapp (botão)      / --cor-fundo            5,04:1
   *
   * NÃO usar: --cor-alerta como texto ou como foco sobre fundo claro (1,67:1 sobre branco).
   * O amarelo só aparece como fundo com texto escuro, como detalhe decorativo, ou como
   * contorno de foco sobre os fundos grafite.
   */
  --cor-primaria-suave: #efeeea;
  --cor-texto-inverso: #ffffff;
  --cor-texto-inverso-suave: #e3e3e0;
  --cor-borda-inversa: #4a4a4a;
  --cor-alerta-escura: #dba91f;
  --cor-borda-campo: #6a6a6a;
  --cor-whatsapp: #0f766a;
}