/* Tokens de design. Fonte de verdade: 02-wireframe-ux-ui.md, seção 1. */

/* Fontes self-hosted (OFL, ver assets/fonts/LICENSE-OFL.txt). Subset latino, sem itálico. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Reservas com métrica ajustada (medidas no Chromium: largura média de texto PT-BR, hhea da fonte web). */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 85.56%;
  ascent-override: 114.31%;
  descent-override: 29.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 106.01%;
  ascent-override: 91.4%;
  descent-override: 22.73%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Cores */
  --bg: #05070f;
  --band: #070b16;
  --s1: #0a0f1d;
  --s2: #101729;
  --white: #ffffff;
  --text-2: #c2c8d6;
  --text: #8b94a7;
  --ink: #05070f;
  --blue: #2f7bff;
  --blue-hi: #6aa0ff;
  --error: #ff8a8a;
  --field: #6a758c;
  --line: rgba(139, 148, 167, 0.18);
  --line-2: rgba(139, 148, 167, 0.32);
  --blue-a: rgba(47, 123, 255, 0.35);
  --icon-bg: rgba(47, 123, 255, 0.1);
  --icon-line: rgba(47, 123, 255, 0.3);

  /* Tipografia */
  --font-serif: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tag: 0.75rem;
  --fs-btn: 1rem;
  --fs-num: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Espaçamento (base 4) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Grade */
  --container: 75rem;
  --pad-x: clamp(20px, 5vw, 40px);
  --gutter: 1.5rem;
  /* Distância da borda direita do conteúdo até a borda da viewport (para o que sangra à direita) */
  --sangra: calc((100vw - min(100vw, var(--container))) / 2 + var(--pad-x));

  /* Raios (rodada de refinamento 2026-09-26: visual macio, sem cantos duros). Cartão e painel 20 px; cartão pequeno 14 px;
     caixa de ícone 12 px; botão, selo e chip em pílula; 16 px dentro dos celulares. */
  --r-page: 20px;
  --r-sm: 14px;
  --r-icon: 12px;
  --r-pill: 999px;
  --r-app: 16px;
  --r-device: 40px;

  /* Sombras: camadas suaves e profundas. Sobre o fundo quase preto a sombra preta quase some, então o cartão ganha também
     um brilho de 1 px no topo (luz vinda de cima) e o hover troca a borda por um anel azul discreto. */
  --sombra-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 48px -24px rgba(0, 0, 0, 0.85);
  --sombra-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.4), 0 34px 64px -26px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(47, 123, 255, 0.26);
  --sombra-flutua: 0 2px 6px rgba(0, 0, 0, 0.4), 0 22px 44px -16px rgba(0, 0, 0, 0.8);

  /* Brilho azul (CTA e destaques) */
  --glow-1: 0 0 0 1px rgba(47, 123, 255, 0.4), 0 10px 28px -12px rgba(47, 123, 255, 0.6);
  --glow-2: 0 0 0 1px rgba(106, 160, 255, 0.55), 0 18px 44px -16px rgba(47, 123, 255, 0.75);
  --glow-cta: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(47, 123, 255, 0.35), 0 12px 30px -10px rgba(47, 123, 255, 0.6);
  --glow-cta-hover: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(47, 123, 255, 0.4), 0 20px 40px -12px rgba(47, 123, 255, 0.75);
  --glow-device: 0 40px 90px -40px rgba(47, 123, 255, 0.35);

  /* Divisória entre seções: filete que nasce e some nas pontas, com um veio azul no meio */
  --divisoria: linear-gradient(90deg, transparent, var(--line-2) 16%, rgba(106, 160, 255, 0.5) 50%, var(--line-2) 84%, transparent);

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Alturas de camada fixa */
  --header-h: 56px;
  --safe-b: 0px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 60px;
    --fs-body: 1rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 68px;
    --fs-body: 1.0625rem;
  }
}