/**
 * Tokens da /comparativo — "Quem compara escolhe Lula".
 *
 * A página é clara, como a /campanha: os tokens de superfície, marca e
 * tipografia vêm inteiros de `compartilhado/css/tokens.css`, que entra antes
 * desta folha. Aqui só o que é DESTA página.
 *
 * Medidas do `SITE/LAYOUT/TOPO_QUEM_COMPARA.psd`, artboard 1920×720. O
 * miolo herda a medida da trilha do Lula+, que é a mesma composição de card.
 */

:root {
  /* ---- Hero ----
   * Os três recortes saíram do PSD com estas coordenadas (o script de
   * extração as imprime; ver o commit dos assets). Ficam como token porque
   * são a MESMA informação em dois lugares — a posição no desktop e o ponto
   * de partida do recomposto no celular — e divergir aqui é divergir do PSD.
   *
   *   plaqueta  x 475   y 70   483×569
   *   mão       x 1059  y 90   467×630
   */
  --comp-hero-proporcao: 1920 / 720;

  --comp-plaqueta-x: 24.7396%; /* 475 / 1920 */
  --comp-plaqueta-y: 9.7222%; /*  70 /  720 */
  --comp-plaqueta-w: 25.1563%; /* 483 / 1920 */

  --comp-mao-x: 55.1562%; /* 1059 / 1920 */
  --comp-mao-y: 12.5%; /*   90 /  720 */
  --comp-mao-w: 24.3229%; /*  467 / 1920 */

  /* ---- Trilha ----
   * Os mesmos 295 + 17 da fileira do Lula+ (`legado/css/tokens.css`). A
   * largura do card é FIXA, e não `1fr`: com a coluna elástica uma fileira
   * curta esticava os cards e a rolagem nunca existia — era o "último
   * carrossel não funciona" do /legado. Ver a nota em `comparativo.css`.
   */
  --card-largura: 295px;
  --card-gap: 17px;

  /* ---- Card ----
   * A cor da barra vem do TERMO, inline no <section> de cada fileira
   * (`--cor-barra`). Este é o padrão de quem não preencheu: o mesmo vermelho
   * do prato de cards da /campanha.
   *
   * O rótulo por cima sai em branco, e é isso que limita a escolha lá no
   * admin — o texto de ajuda do campo diz.
   */
  --cor-barra: #fa0404;
  --cor-sobre-barra: #fff;

  /* Título da fileira. Não usa `--cor-barra`: com quinze temas escolhidos à
     mão, mais cedo ou mais tarde entra um tom que reprova em contraste sobre
     o creme — e aí o que some é o NOME da seção. O azul da marca é fixo e
     passa com folga (8,6:1 sobre #F2F0E9). */
  --cor-rotulo: var(--cor-marca-secundaria);
}

/* #9DB8FF sobre #14130F = 9,5:1 — mesmo par que a /campanha usa no escuro. */
:root[data-theme='dark'] {
  --cor-rotulo: #9db8ff;
}

/*
 * No alto contraste a barra colorida sai: é justamente aqui que legibilidade
 * vence fidelidade. Fica o par amarelo sobre preto do resto do modo, com a
 * borda marcando o card. Mesma decisão de `campanha.css`.
 *
 * Só o rótulo entra aqui. A barra NÃO pode ser trocada por variável: a cor do
 * termo chega inline no `<section>` da fileira, e style inline vence qualquer
 * `:root`. Quem desliga a cor é uma regra de `background`/`color` direta em
 * `comparativo.css`, que ganha por especificidade sem precisar de `!important`.
 */
:root[data-contraste='alto'] {
  --cor-rotulo: #ff0;
}