/* Marca Food Métricas nas páginas públicas: um vermelho por papel, uma letra e
 * uma escala de arredondamento e de tamanho de letra.
 *
 * Toda página pública carrega este arquivo e não escreve cor de marca nem
 * família de fonte por conta própria (tests/site-marca.test.mjs). O vermelho de
 * ação é o mesmo valor de --ui-accent no portal.
 *
 * Os três tons existem por contraste, não por variedade: texto branco sobre o
 * vermelho de ação passa do mínimo (4,83:1), mas ele como letra pequena sobre
 * fundo escuro (3,5 a 4,1:1) ou sobre papel claro (4,2:1) não passa.
 */
:root {
  /* Botões, selos, bordas de destaque e títulos grandes. */
  --fm-vermelho: #e01c1c;
  /* Hover e pressionado; letra vermelha pequena sobre fundo claro. */
  --fm-vermelho-forte: #c81717;
  /* Letra vermelha pequena sobre fundo escuro. */
  --fm-vermelho-claro: #ff5a52;
  /* A letra do aparelho, como no portal. */
  --fm-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fm-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Arredondamento: múltiplos de 4, de 8 a 28. Fora da lista só entram o traço
   * (2px, em barra e risco), o círculo (50%) e o canto reto (0). */
  --fm-raio-1: 8px;   /* selo, etiqueta, botão de canto reto */
  --fm-raio-2: 12px;  /* campo, item de menu, imagem pequena */
  --fm-raio-3: 16px;  /* cartão pequeno, ícone em quadro */
  --fm-raio-4: 20px;  /* cartão, painel, formulário */
  --fm-raio-5: 24px;  /* cartão grande */
  --fm-raio-6: 28px;  /* janela (diálogo) e bloco de destaque */
  --fm-raio-pilula: 999px;

  /* Letra: os tamanhos fixos. O menor é 14px; 80 e 96 só aparecem como teto de
   * título de página avulsa. Tamanho fluido é clamp() com as duas pontas aqui. */
  --fm-letra-1: 14px;   /* rótulo, legenda, botão */
  --fm-letra-2: 16px;   /* texto */
  --fm-letra-3: 18px;   /* texto de abertura */
  --fm-letra-4: 20px;
  --fm-letra-5: 24px;   /* título de cartão */
  --fm-letra-6: 28px;
  --fm-letra-7: 32px;
  --fm-letra-8: 36px;
  --fm-letra-9: 40px;
  --fm-letra-10: 48px;
  --fm-letra-11: 56px;
  --fm-letra-12: 64px;
  --fm-letra-13: 72px;
  --fm-letra-14: 80px;
  --fm-letra-15: 96px;

  /* Títulos e números da landing: um tamanho por papel, do celular ao monitor. */
  --fm-titulo-pagina: clamp(48px, 5.2vw, 72px);          /* o h1 da primeira dobra */
  --fm-titulo-pagina-medio: clamp(40px, 7.5vw, 56px);    /* o mesmo, até 850px */
  --fm-titulo-pagina-estreito: clamp(36px, 10vw, 48px);  /* o mesmo, até 560px */
  --fm-titulo-destaque: clamp(36px, 4.5vw, 64px);        /* contato e chamada final */
  --fm-titulo-secao: clamp(32px, 4vw, 56px);             /* o h2 de cada seção */
  --fm-titulo-apoio: clamp(32px, 3.5vw, 48px);           /* título longo ou secundário */
  --fm-titulo-cartao-grande: clamp(28px, 3vw, 36px);
  --fm-titulo-cartao: clamp(24px, 3vw, 32px);
  --fm-numero-grande: clamp(56px, 5.8vw, 72px);
  --fm-numero: clamp(40px, 5vw, 64px);
}