/* ============================================================
   PBNext — Design Tokens
   Paleta CONGELADA (nenhuma cor nova, nenhum valor alterado —
   ver claude.md §Sistema visual). O que muda aqui é a escala
   tipográfica, o espaçamento, o raio e os breakpoints.
   ============================================================ */

:root {
  /* Cor */
  --g:   #0ABFBC;   /* teal — acento principal (máx. 2 elementos por tela) */
  --b:   #0033FF;   /* royal blue — secundário */
  --d:   #0d1f2d;   /* dark navy — fundo escuro principal */
  --d2:  #162e3d;   /* cards e seções escuras */
  --d3:  #091825;   /* footer */
  --gr:  #F4F7F9;   /* fundo claro */
  --mid: #e8f2f4;   /* seções intermediárias */
  --gd:  rgba(10,191,188,.12);
  --ga:  rgba(10,191,188,.25);
  --bd:  rgba(0,51,255,.1);
  --tm:  rgba(255,255,255,.65);

  /* Tipografia — Cairo, 8 passos com contraste real (hero:corpo = 3.6x) */
  --fs-hero: 62px;  /* H1 da home e das LPs (34px no mobile — ver breakpoint) */
  --fs-h1:   46px;  /* H1 das páginas internas */
  --fs-h2:   34px;  /* título de seção */
  --fs-h3:   26px;  /* subtítulo, título de card grande */
  --fs-lead: 20px;  /* parágrafo de abertura */
  --fs-body: 17px;  /* corpo */
  --fs-sm:   15px;  /* apoio */
  --fs-xs:   13px;  /* etiqueta, legenda */

  /* Raio — 4 valores, não 7 */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   20px;
  --r-full: 999px;

  /* Espaçamento — 4 a 128px, o respiro entre seções varia conforme o peso */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Largura de linha travada no texto corrido (68 caracteres) */
  --measure: 68ch;
}

/* Breakpoints de referência (usados nos media queries de components.css):
   1200px · 1024px (obrigatório — menu de 6 itens) · 768px · 480px */

@media (max-width: 768px) {
  :root {
    --fs-hero: 34px;
  }
}