/**
 * Tokens da página interna de notícia.
 *
 * Cópia deliberada dos tokens da home, não um import: a tecnologia final
 * ainda não foi decidida (React ou template WordPress), então esta página
 * precisa ser autocontida e mudar de pasta sem quebrar. Ao consolidar,
 * unificar com `app/src/styles/tokens.css`.
 *
 * Valores de cor e tipografia medidos no PSD
 * `SITE_JOB375_SITE-LULA_V2_INTERNA_NOTICIA.psd` (artboard 1920×3989).
 */

:root {
  /* ---- Marca (iguais aos da home) ---- */
  --cor-marca-primaria: #fd0000;
  --cor-marca-secundaria: #0034d2;
  --cor-marca-terciaria: #ffd400;

  /* ---- Texto ---- */
  --cor-texto: #2e2e2e;
  --cor-texto-suave: #8a8a8a;
  --cor-titulo: #4a4a4a; /* título e lide da matéria */
  --cor-corpo: #2f2f2f; /* texto corrido */
  --cor-card-titulo: #012288;
  --cor-participe: #a20301;

  /* Crédito do fotógrafo (campo "Descrição" da mídia). Sobre branco vai o
     cinza; sobre a foto de topo vai o branco em cima de um véu preto. */
  --cor-credito: #6a6a6a; /* 5,4:1 sobre branco */
  --cor-credito-sobre-foto: #ffffff;
  /* 85% e não 60%: o véu precisa garantir 4,5:1 no PIOR caso, que é uma foto
     branca atrás. A 60% o branco cairia para 2,3:1. */
  --cor-credito-veu: rgb(0 0 0 / 50%);

  /* ---- Superfícies ---- */
  /* Renomeado na migração de 07/08/2026: `--cor-fundo` puro colidiria com o
     creme que o topo e o rodapé compartilhados usam. É traduzido para o nome
     canônico dentro do `main`, em `noticia.css`. */
  --cor-fundo-noticia: #ffffff;
  --cor-fundo-secao: #f2f0e9;
  --cor-toolbar-fundo: #f5f5f5;
  --cor-borda: #e6e6e6;
  --cor-rodape: #00279c;
  --cor-rodape-campo: #001e76;
  /* amarelo do botão Enviar; na home ainda está como hex solto no
     Rodape.module.css — unificar na consolidação */
  --cor-enviar: #fed500;
  --cor-verde: #00b923;
  --cor-cta: #04aa1f;
  --cor-cta-anel: #7bcd84;
  --cor-foco: #0034d2;

  /* ---- Tipografia ----
   * Corpo e título passaram a Gotham em 11/08/2026 (ver `compartilhado/css/
   * fontes.css`).
   *
   * `--fonte-citacao` continua serifada de propósito: no PSD a citação destacada
   * troca de família para se separar do corpo, e passá-la a Gotham dissolveria
   * o destaque. Segue em Georgia até a Tiempos ser licenciada (pendência #36).
   */
  --fonte-corpo: 'Gotham', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Gotham', system-ui, sans-serif;
  --fonte-citacao: 'Tiempos Headline', Georgia, 'Times New Roman', serif;

  /* Escala medida na fatia, não a declarada no PSD: as camadas do título e
     do lide estão transformadas e reportam ~2,3× menos do que exibem. */
  --texto-titulo: clamp(2rem, 2.81vw, 3.375rem); /* 54px a 1920 */
  --texto-lide: clamp(1.125rem, 1.3vw, 1.5625rem); /* 25px */
  --texto-corpo: clamp(1rem, 0.924vw, 1.109rem); /* 17,75px */
  --texto-subtitulo: clamp(1.125rem, 1.13vw, 1.356rem); /* 21,69px */
  --texto-citacao: clamp(1.25rem, 1.64vw, 1.9725rem); /* 31,56px */
  --texto-tag: clamp(0.75rem, 0.822vw, 0.986rem); /* 15,78px */
  --texto-menu: 0.863rem; /* 13,81px */
  --texto-legenda: 0.986rem; /* 15,78px */
  --texto-credito: 0.7rem; /* 13px — um degrau abaixo da legenda */

  --lh-titulo: 1.17; /* passo de 63px medido sobre 54px */
  --lh-lide: 1.2;
  --lh-corpo: 1.22; /* passo de 22px medido sobre 17,75px */

  /* ---- Medidas ---- */
  --container-max: 1560px;
  --largura-artigo: 1152px; /* TEXTO CORRIDO: x 376→1530 no artboard */

  --raio-s: 4px;
  --raio-m: 8px;
  --raio-g: 16px;
  --raio-xg: 20px;

  --espaco-1: 0.5rem;

  --espaco-5: 3rem;
  --espaco-6: 4rem;

  /* ---- Motion ---- */
  --dur-rapida: 150ms;
  --dur-media: 300ms;
  --ease-padrao: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 1ms;
    --dur-media: 1ms;
  }
}

/*
 * Escopados ao miolo, nao ao :root.
 *
 * O topo e o rodape compartilhados consomem estes mesmos nomes. Deixa-los
 * no :root repintava o header desta pagina com a grade e o foco proprios,
 * quebrando a premissa de topos identicos em todas as paginas.
 */
main {
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2rem;
  --gutter: clamp(1rem, 3vw, 2rem);
}
