/**
 * Tokens da página Legado (LULA+).
 *
 * Mesma decisão da notícia interna: cópia autocontida, não import — a stack
 * ainda não foi decidida e a pasta precisa poder mudar de lugar. Consolidar
 * com `app/src/styles/tokens.css` quando definirem React ou WordPress.
 *
 * Medido em `SITE_JOB375_SITE-LULA_V2_LEGADO.psd` (artboard 1920×2738).
 */

:root {
  /* ---- Superfícies ----
   * Fundo amostrado em quatro pontos do composite: sempre #00071B.
   *
   * Os três com sufixo `-legado` colidiriam com a paleta clara que o topo e
   * o rodapé compartilhados usam. Ficam com nome próprio aqui e são
   * traduzidos para os nomes canônicos dentro do `main`, em `legado.css` —
   * assim o miolo é escuro sem repintar a barra da marca. */
  --cor-fundo-legado: #00071b;
  --cor-texto-legado: #ffffff;
  --cor-texto-suave-legado: #a2a2a2;

  --cor-modal: #000; /* pedido: modal 100% preto, opaco */
  --cor-card: #061436; /* chapa do card sob a capa */

  /* ---- Marca ---- */
  --cor-marca-primaria: #fd0000;
  --cor-marca-secundaria: #0034d2;
  --cor-marca-terciaria: #ffd400;
  --cor-verde: #00b923;
  --cor-rodape: #00279c;
  --cor-rodape-campo: #001e76;
  --cor-enviar: #fed500;
  --cor-cta: #04aa1f;
  --cor-cta-anel: #7bcd84;

  /*
   * Acentos por card. No PSD cada card tem uma cor própria, aplicada tanto na
   * linha de métrica quanto na chamada em itálico. O card recebe a sua em
   * `--acento` inline; estes são os cinco valores que aparecem no layout.
   */
  --acento-amarelo: #ffd500;
  --acento-verde: #00b923;
  --acento-azul: #009cff;
  --acento-laranja: #ff9600;
  --acento-rosa: #ff009c;

  /* ---- Tipografia ----
   * Corpo e título passaram a Gotham em 11/08/2026 (ver `compartilhado/css/
   * fontes.css`) — encerra as pendências #10 e #36 desta página.
   *
   * `--fonte-display` continua serifada: Ivy Presto Display é a escolha do PSD
   * para o título do hero e NÃO é substituída pela Gotham — trocar a serifada
   * por uma sem serifa apagaria o contraste de família que o layout constrói.
   * Segue caindo em Georgia até a licença chegar (pendência #38).
   */
  --fonte-corpo: 'Gotham', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Gotham', system-ui, sans-serif;
  --fonte-display: 'Ivy Presto Display', 'Tiempos Headline', Georgia, serif;

  /* Medidos na fatia. O título do hero declara 21.58px no PSD mas a camada
     está escalada: o passo entre linhas é de 87px, o que dá ~79px. */
  --texto-hero: clamp(2rem, 4.11vw, 4.9375rem); /* 79px a 1920 */
  --texto-hero-metrica: clamp(0.9375rem, 0.924vw, 1.109rem); /* 17,75px */
  --texto-hero-apoio: clamp(0.875rem, 0.822vw, 0.986rem); /* 15,78px */
  --texto-destaque: 0.924rem; /* 14,79px — EM DESTAQUE */
  --texto-fileira: clamp(1.125rem, 1.233vw, 1.479rem); /* 23,67px */
  --texto-card-titulo: clamp(0.9375rem, 0.872vw, 1.046rem); /* 16,74px */
  --texto-card-meta: 0.678rem; /* 10,85px */
  --texto-card-chamada: 0.801rem; /* 12,82px */
  --texto-veja-todos: 0.74rem; /* 11,83px */
  --texto-menu: 0.863rem; /* 13,81px */

  --lh-hero: 1.1; /* passo 87px sobre 79px */

  /* ---- Medidas ----
   * A fileira vai de x=188 a x=1732 no artboard: 1544px, simétrico. */

  --card-largura: 295px;
  --card-gap: 17px; /* passo de 312px menos os 295 do card */

  --raio-s: 4px;
  --raio-m: 8px;
  --raio-g: 16px;
  --raio-xg: 20px;

  --espaco-1: 0.5rem;

  --espaco-5: 3rem;

  --dur-rapida: 150ms;
  --dur-media: 300ms;
  --ease-padrao: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.36, 0.64, 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, .modal {
  --container-max: 1544px;
  --cor-foco: #ffffff;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2rem;
  --gutter: clamp(1rem, 3vw, 2rem);
}