/**
 * Tokens da /propostas.
 *
 * A página tem paleta PRÓPRIA, e é de propósito. O vermelho daqui é o #e22f21
 * do layout aprovado — mais escuro e menos saturado que o #fd0000 do menu
 * (`--cor-marca-primaria` do compartilhado). Os dois aparecem juntos na tela,
 * topo em cima e hero logo abaixo, e ficam bem: o do topo é sinalização, o
 * daqui é o corpo do texto em display.
 *
 * Mesma razão do creme: a página é BRANCA, e não o #f2f0e9 do resto do site.
 * O contraste com a faixa cinza dos eixos é o que separa as três seções.
 *
 * Tudo escopado em `.propostas` — o `:root` do compartilhado continua valendo
 * para topo e rodapé, que nesta página são os de sempre.
 */

.propostas {
  --vermelho: #e22f21;
  --preto: #101014;
  --cinza: #5c5a56;
  --linha: #e3e1dc;
  --branco: #ffffff;
  --creme-card: #faf9f6;
  --cinza-menu: #f2f0ea;
  --apagado: #b9b6b0;

  /*
   * A referência pedia Anton (display) + Archivo (texto), as duas do Google
   * Fonts. Trocadas em 12/09/2026 pelas do próprio tema: Transducer Condensed
   * também é condensada e é a display do projeto; Gotham é o texto de todas as
   * outras páginas. Zero requisição externa, e o preload do `assets.php` já
   * cobre os cortes de Gotham.
   *
   * Transducer Condensed é menos estreita que Anton, então o hero calibra o
   * tamanho pelo `clamp` do `.propostas__hero h1`, não por aqui.
   */
  --display: var(--fonte-display);
  --texto: var(--fonte-texto);

  /* O que fica POR CIMA do vermelho: verso do card e linha aberta do acordeão.
     Token próprio, e não `--branco`, porque os dois divergem no escuro — lá o
     vermelho clareia e quem legibiliza é o texto escuro. */
  --sobre-vermelho: var(--branco);
}

/*
 * Tema escuro.
 *
 * A barra de acessibilidade do topo oferece o escuro em TODA página, então
 * ignorá-lo aqui não deixaria a /propostas "como o layout": deixaria o botão
 * parecendo quebrado, com o topo e o rodapé escurecendo e o miolo branco.
 *
 * O #e22f21 do layout reprova sobre o #14130f do fundo escuro — 4,1:1, abaixo
 * do 4,5:1 que o `.kicker`, o `card-cta` e o cabeçalho da tabela precisam por
 * serem texto pequeno. Entra o #ff4d4a, que é o vermelho escuro do próprio
 * site (`--cor-marca-primaria` no escuro) e dá 5,7:1.
 */
:root[data-theme='dark'] .propostas {
  --vermelho: #ff4d4a;
  --preto: #f2f0e9;
  --cinza: #a5a29a; /* 7,3:1 sobre o fundo escuro */
  --linha: #35332c;
  --branco: #14130f;
  --creme-card: #24231e;
  --cinza-menu: #1c1b17;
  --apagado: #7e7b74;
  --sobre-vermelho: #14130f; /* 5,7:1 sobre o #ff4d4a */
}

/*
 * Alto contraste — vence o escuro, como no `tokens.css` compartilhado.
 *
 * O vermelho vira amarelo sobre preto: é a mesma troca que `campanha.css` e
 * `comparativo.css` fazem, e é aqui que legibilidade ganha de fidelidade. Como
 * o "por cima do vermelho" é token, o verso do card e a linha aberta do
 * acordeão viram preto sobre amarelo sem uma regra a mais.
 */
:root[data-contraste='alto'] .propostas {
  --vermelho: #ff0;
  --preto: #fff;
  --cinza: #fff;
  --linha: #fff;
  --branco: #000;
  --creme-card: #000;
  --cinza-menu: #000;
  --apagado: #fff;
  --sobre-vermelho: #000;
}