/* ==========================================================================
   FB VIAGENS — Design tokens
   Fonte da verdade para cor, tipografia, espaço e movimento.
   Nada neste projeto declara cor ou medida "solta": tudo vem daqui.
   Identidade: Petróleo #123244 · Tinta #0B1F27 · Dourado #A9824F ·
               Marfim #F7F3EA · Cinza #C9C2B4
   Regra do dourado: sempre linha, ponto ou filete fino — nunca preenchimento
   grande. É um acento de precisão, não decoração.
   ========================================================================== */

:root {
  /* ---------- Cor: marca ---------- */
  --petrol: #123244;
  --ink: #0b1f27;
  --gold: #a9824f;
  --ivory: #f7f3ea;
  --stone: #c9c2b4;

  /* ---------- Cor: derivadas ---------- */
  --ivory-dim: #efe9db;

  /* O degrau entre a tinta e o petróleo. É o tom das seções de fundo sólido
     que precisam de relevo sem virar uma terceira cor: a página inteira é um
     ambiente escuro contínuo, e o que separa uma seção da outra é este degrau,
     o canto arredondado e a sombra — não uma troca de tinta. */
  --ink-lift: #0d2531;

  /* Texto sobre fundo escuro */
  --ivory-78: rgba(247, 243, 234, 0.78);
  --ivory-58: rgba(247, 243, 234, 0.58);

  /* Dourado legível sobre fundo escuro (o #A9824F puro fica no limite
     para texto pequeno; este tom mais claro é usado em corpo de texto). */
  --gold-lit: #c9a26b;

  --gold-45: rgba(169, 130, 79, 0.45);
  --gold-20: rgba(169, 130, 79, 0.2);

  /* Filetes */
  --hairline-dark: rgba(201, 194, 180, 0.28);
  --hairline-on-ink: rgba(247, 243, 234, 0.14);

  /* ---------- Tipografia ---------- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Escala fluida — um degrau por papel, sem valores improvisados. */
  --t-display: clamp(2.75rem, 6.1vw, 5.75rem); /* h1 do hero */
  --t-h2: clamp(2rem, 4.1vw, 3.35rem); /* título de seção */
  --t-h3: clamp(1.35rem, 2.1vw, 1.75rem); /* título de card / passo */
  --t-h4: clamp(1.1rem, 1.5vw, 1.3rem);
  --t-lede: clamp(1.0625rem, 1.35vw, 1.25rem); /* parágrafo de abertura */
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;
  --t-label: 0.6875rem; /* eyebrow / rótulos em caixa alta */

  --lh-display: 1.04;
  --lh-h2: 1.1;
  --lh-h3: 1.26;
  --lh-body: 1.68;
  --lh-tight: 1.5;

  --track-label: 0.15em; /* caixa alta pequena */
  --track-nav: 0.11em;
  --track-word: 0.14em; /* wordmark */

  /* ---------- Espaço (escala 8pt, fluidificada nas pontas) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: clamp(88px, 11vw, 152px); /* respiro entre seções */

  --container: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4.6vw, 64px);
  --header-h: 84px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 0.8, 0.24, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.24s;
  --dur-m: 0.5s;
  --dur-l: 0.9s;

  /* ---------- Camadas empilhadas ----------
     A seção opaca sobe por cima da anterior: esta é a altura da faixa que
     sobra acima dela e o raio do canto. Ver "Scroll em camadas" em base.css. */
  --capa-altura: clamp(18px, 2.6vw, 40px);
  --capa-raio: clamp(14px, 1.6vw, 26px);

  /* Camadas. O globo fica em 0; todo conteúdo em 1, acima dele. É o que
     permite uma seção opaca esconder o planeta e uma translúcida deixá-lo
     aparecer — sem depender da ordem em que os elementos foram escritos. */
  --z-globe: 0;
  --z-content: 1;
  --z-fab: 250;
  --z-menu: 290;
  --z-header: 300;
  --z-cursor: 350;
  --z-progress: 400;
}

@media (max-width: 900px) {
  :root {
    --header-h: 74px;
  }
}