/**
 * Tokens da Mobilização.
 *
 * Origem: `V4_MOBILIZACAO.psd`, artboard 1920×3157 (o menu ocupa até y=128 e o
 * rodapé começa em y=2730, então o miolo vai de 128 a 2730). Cores amostradas
 * no composto; medidas de `referencias/mobilizacao-v4/layout.json`.
 *
 * A V3 (11/08) foi um REDESENHO: saíram o hero de duas metades, as duas
 * vitrines de material para compartilhar e a faixa "seja um voluntário" com os
 * perfis Digital/Técnico. Entraram um hero de foto com três portas de entrada,
 * duas faixas de convite e a seção de quatro cartões. A barra de contagem é a
 * única que atravessou as duas versões.
 *
 * A V4 (12/08) é AJUSTE FINO em cima da V3 — a estrutura não mudou:
 *   · hero — a chamada virou "QUERO SER UM(A) VOLUNTÁRIO(A)" e cada botão
 *     ganhou um emoji encostado na ponta esquerda da pílula;
 *   · contagem — 80.000 → 135.000, uma frase só (a V3 tinha duas correndo) e
 *     uma estrela em cada ponta;
 *   · faixa verde — "QUERO DISTRIBUIR MATERIAIS" virou "QUERO JUNTAR MINHA
 *     TURMA E MONTAR UM COMITÊ", em quatro linhas e num corpo menor.
 *
 * Carregar DEPOIS de `compartilhado/css/tokens.css`. Como nas outras páginas
 * novas, nada aqui redefine token do compartilhado: o que é próprio tem
 * prefixo `--m-`, então não existe colisão possível com o topo e o rodapé.
 */

:root {
  /* ==== Cores amostradas no PSD ==== */
  --m-vermelho: #fd0000; /* faixa "quero ser um porta-voz" */
  --m-verde: #00b923; /* faixa "quero distribuir materiais" */
  --m-azul: #0034d2; /* barra de contagem */
  --m-creme: #f2f0e9; /* fundo do "quero produzir conteúdo" */
  --m-amarelo: #ffd400; /* títulos das duas faixas */
  --m-texto: #2f2f2f;

  /*
   * Botão claro das duas faixas. O fundo NÃO é branco puro no PSD: é o mesmo
   * creme da seção dos cartões, #F2F0E9, amostrado nas duas faixas. Token
   * próprio e não `--m-creme` porque este não escurece no tema escuro — a faixa
   * vermelha e a verde continuam vermelha e verde lá, e um botão preto com
   * texto vermelho em cima delas seria ilegível.
   */
  --m-botao-claro: #f2f0e9;

  /* Texto dos botões claros das faixas — um por faixa. */
  --m-vermelho-texto: #a20301;
  --m-verde-texto: #079400;

  /* Botões do hero. O amarelo pede texto escuro: branco sobre #FFD400 dá
     1.6:1 e reprova em qualquer critério. O #343434 é o do próprio PSD. */
  --m-botao-1: #fc0202;
  --m-botao-2: #00b923;
  --m-botao-3: #ffd400;
  --m-botao-3-texto: #343434;

  /*
   * Cartões do "quero produzir conteúdo". Uma cor por cartão: pinta a tarja do
   * título e o botão. Viajam pelo HTML como as pills de Materiais da /campanha,
   * porque aqui a cor é CONTEÚDO — diz de qual frente de trabalho se trata.
   */
  --m-cartao-amarelo: #ffc600;
  --m-cartao-vermelho: #ff0000;
  --m-cartao-azul: #0467b6;
  --m-cartao-verde: #00b923;
  --m-cartao-fundo: #f6f6f6; /* corpo branco-sujo do cartão */
  --m-cartao-texto: #6b6b6b; /* descrição */
  /* Título na tarja e rótulo do botão — os dois sobre a cor do cartão. Token, e
     não `#fff` solto, porque no alto contraste a tarja fica BRANCA e o texto
     precisa virar preto junto. */
  --m-cartao-contraste: #fff;

  /* ==== Escala ====
   *
   * DERIVADA da mancha, não lida do `texto.md`: quase toda camada de texto do
   * PSD está escalada pela matriz da própria camada, e o `font_size` declarado
   * é o de antes da escala. Receita, para cada camada: mede-se a largura da
   * linha mais larga no arquivo da fonte (fontTools, soma de avanços menos os
   * side bearings das pontas, mais o tracking) e divide-se a largura do bbox
   * por ela. Dá o corpo real com ~2% de erro.
   *
   * Os controles fecham a conta: "PARTICIPE AGORA" sai 18.2px contra os 17.75
   * declarados — essa camada não está escalada, e a sobra é a sangria de
   * antialias que o bbox inclui (uns 3.5px, já descontados abaixo).
   *
   *   hero "QUERO SER UM(A) VOLUNTÁRIO(A)"   1333px de mancha → 96.1px
   *   botão do hero (3 camadas concordam)                     → 19.0px
   *   título da faixa vermelha, "QUERO SER UM" em 538px       → 92.4px
   *   título da faixa verde, "MINHA TURMA" em 429px           → 72.0px
   *   apoio das faixas (duas camadas concordam)               → 23.6px
   *   contagem, 1380px de mancha                              → 59.7px
   *   título de cartão de UMA linha                           → 52.0px
   *   título de cartão de DUAS linhas                         → 43.5px
   *   texto do cartão (três camadas concordam)                → 16.6px
   *   botão do cartão (quatro camadas concordam)              → 17.4px
   *
   * NÃO existe mais o truque de ancorar a mancha pela largura para compensar a
   * falta da Transducer (o que a #10 pedia): os três cortes que este PSD usa
   * estão no site desde 12/08/2026 e o corpo real do layout vale como está.
   *
   * Os dois títulos de faixa têm corpos DIFERENTES no PSD, e por isso são dois
   * tokens: o da faixa verde tem quatro linhas de texto e foi reduzido.
   *
   * Os dois títulos de cartão idem: os de uma linha desenham 52px e os de duas,
   * 43.5px. Quem escolhe é a própria quebra do conteúdo, no `index.php`.
   */
  --m-texto-hero: clamp(1.75rem, 5.003vw, 6rem); /* 96.1 */
  --m-texto-hero-botao: clamp(0.8125rem, 0.99vw, 1.188rem); /* 19.0 */
  --m-texto-faixa: clamp(2rem, 4.815vw, 5.775rem); /* 92.4 */
  --m-texto-faixa-2: clamp(1.75rem, 3.748vw, 4.5rem); /* 72.0 — faixa verde */
  --m-texto-faixa-apoio: clamp(0.9375rem, 1.228vw, 1.475rem); /* 23.6 */
  --m-texto-faixa-botao: clamp(0.8125rem, 0.949vw, 1.138rem); /* 18.2 */
  --m-texto-contagem: clamp(1.125rem, 3.108vw, 3.731rem); /* 59.7 */
  --m-texto-cartao: clamp(1.25rem, 2.708vw, 3.25rem); /* 52.0 */
  --m-texto-cartao-2l: clamp(1.0625rem, 2.266vw, 2.719rem); /* 43.5 */
  --m-texto-cartao-apoio: clamp(0.8125rem, 0.865vw, 1.038rem); /* 16.6 */
  --m-texto-cartao-botao: clamp(0.75rem, 0.906vw, 1.088rem); /* 17.4 */

  /* ==== Entrelinha e tracking ====
   * O PSD aperta as duas coisas bem além do padrão. Cada par sai da razão entre
   * o `line_height` e o `font_size` DECLARADOS da camada — a escala corta os
   * dois na mesma proporção, então a razão sobrevive intacta.
   */
  --m-lh-hero: 0.92; /* 21.7 / 23.64 */
  --m-lh-faixa: 0.86; /* 59.18 / 69.03 */
  --m-lh-faixa-2: 0.83; /* 57.2 / 69.03 */
  --m-lh-contagem: 1.04; /* 19.73 / 18.94 */
  --m-lh-cartao: 0.84; /* 50.3 / 59.83 */
  --m-lh-cartao-2l: 0.89; /* 46.36 / 51.91 */
  --m-lh-cartao-apoio: 1.11; /* 29.59 / 26.67 */
  --m-lh-apoio: 1.11; /* 19.73 / 17.75 — apoio das faixas */

  --m-track-display: 0.01em; /* hero e contagem */
  --m-track-faixa: -0.01em; /* os dois títulos de faixa fecham o tracking */
  --m-track-cartao: 0.005em;
  --m-track-apoio: 0.03em; /* apoio e botão das faixas */

  /* ==== Geometria ====
   * Cartão 395×275 com tarja de 114 no topo e botão de 370×44 no pé; quatro
   * numa fileira de 1652px, vão de 24. Tudo do layout.json.
   */
  --m-cartao-largura: 395px;
  --m-cartao-gap: 24px;
  --m-cartao-tarja: 28.8%; /* 114 de 395 — proporcional, para escalar junto */
  --m-raio: 18px; /* ~5% do cartão de 395, medido no composto */
  --m-raio-botao: 999px; /* os botões do PSD são pílulas puras */

  /*
   * As três pílulas do hero. No PSD elas têm larguras diferentes (310, 324 e
   * 343) porque o rótulo manda; o que se repete é a FOLGA em volta do texto.
   * Em em do próprio botão: 4.1 à esquerda (o lado por onde o emoji encosta) e
   * 2.7 à direita. A assimetria é do layout — o texto fica ~1em à direita do
   * centro da pílula nos dois botões maiores. A largura mínima é a da menor
   * pílula, 310px / 19.0px = 16.3em, senão "QUERO SER PORTA-VOZ", que é curto,
   * encolheria abaixo do layout.
   *
   * Reproduz o PSD com folga de 3%: 16.3 / 16.5 / 18.4em contra 16.3 / 17.1 /
   * 18.1em do arquivo.
   */
  --m-porta-min: 16.3em;
  --m-porta-pad: 0.65em 2.7em 0.65em 4.1em;
  /* Vão ENTRE as pílulas, não entre os emojis: 49px e 60px no PSD. */
  --m-porta-gap: 2.7vw;
}

:root[data-theme='dark'] {
  --m-creme: #14130f;
  --m-cartao-fundo: #24231e;
  --m-cartao-texto: #a5a29a;
  --m-texto: #f2f0e9;
}

:root[data-contraste='alto'] {
  --m-botao-claro: #fff;
  --m-vermelho: #000;
  --m-verde: #000;
  --m-azul: #000;
  --m-creme: #000;
  --m-amarelo: #ff0;
  --m-vermelho-texto: #000;
  --m-verde-texto: #000;
  --m-botao-1: #000;
  --m-botao-2: #000;
  --m-botao-3: #ff0;
  --m-botao-3-texto: #000;
  --m-cartao-amarelo: #ff0;
  --m-cartao-vermelho: #fff;
  --m-cartao-azul: #fff;
  --m-cartao-verde: #fff;
  --m-cartao-fundo: #000;
  --m-cartao-texto: #fff;
  --m-cartao-contraste: #000;
  --m-texto: #fff;
}