/* ==========================================================================
   Vetorial360 Engenharia — Design Tokens (2 LPs Google Ads)
   ==========================================================================
   ORIGEM (rastreável, nada inventado):
   - Cores: extraídas literalmente de `Marca/brand-guidelines.pdf`, página 07
     (Color Palette) — navy `#253C63` (nome + tagline da logo), gradiente do
     símbolo `#D5B01D` → `#D5711D` (linear, esquerda→direita — conferido no
     próprio `Marca/vector-file.svg`: `x1=0/y1=157.5 → x2=314.9/y2=157.5`,
     isto é, y1=y2 ⇒ gradiente horizontal puro, não diagonal).
   - Manual lido como IMAGEM (11 páginas renderizadas, não só texto extraído):
     é um template genérico (Canva) — grade pontilhada, chip cinza atrás dos
     títulos e o "esboço de planta baixa" no canto de toda página são
     decoração do template, repetida igual em toda página independente do
     conteúdo. NÃO tratados como identidade da marca (ver design-system.md §1).
   - O que É de fato a marca, lido no símbolo (`vector-file.svg`): forma
     angular, facetada, construída por cortes/dobras retas (não curvas) —
     motivo de vetor/seta. Vira a justificativa do raio pequeno abaixo.
   - Tipografia do manual (pág. 08): Righteous (logo) + Montserrat Regular
     (tagline). Righteous é rejeitada para título de LP (ver design-system.md
     §3) — decisão do agente, não do manual. Montserrat mantida (corpo/UI).
     Fontes self-hospedadas em variable woff2 (1 arquivo cobre todos os
     pesos usados); cobertura de acentuação PT-BR medida com fontTools —
     ver design-system.md §3.
   ========================================================================== */

/* ---------- Fontes (self-hosted, variável) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. COR — escalas cruas (uso interno; prefira os papéis semânticos abaixo)
     ========================================================================== */

  /* Navy oficial da marca (nome + tagline da logo, pág.07 do manual) */
  --navy-950: #0E1728; /* overlay mais escuro sobre foto no hero */
  --navy-900: #172942; /* superfície de peso — rodapé, fundo mais escuro */
  --navy-800: #1E3455;
  --navy-700: #253C63; /* OFICIAL — HEX do manual. Marca/heading sobre claro */
  --navy-600: #34517F; /* hover/lightening sobre navy */
  --navy-500: #4C6994;
  --navy-400: #7186A8;
  --navy-300: #A3B2C7;
  --navy-200: #CBD4E1;
  --navy-100: #E7ECF3;
  --navy-50:  #F5F7FA; /* superfície alternada sobre claro */

  /* Gradiente do símbolo — OFICIAL, hex exatos do manual. Só dose de assinatura. */
  --gold-500:   #D5B01D; /* stop 0% do gradiente oficial */
  --orange-500: #D5711D; /* stop 100% do gradiente oficial */
  --gold-600:   #B8961A; /* hover/active do dourado, derivado (escurecido ~12%) */
  --orange-600: #B85F19; /* hover/active do laranja, derivado (escurecido ~12%) */
  /* GRADIENTE REMOVIDO (pedido do usuário, 17/08/2026: "soa amador").
     O acento agora é UMA tonalidade só — o dourado oficial do símbolo.
     Efeito colateral bom: sobre o dourado sólido o navy-900 dá 7,02:1, contra
     os 4,34:1 da antiga ponta laranja. O CTA deixa de depender do piso de
     "texto grande" (18,66px/700) e pode ter tamanho normal.
     O laranja #D5711D continua existindo como cor da marca DENTRO do logo,
     que é SVG e não foi tocado — só saiu da interface. */

  /* Tinta sobre acento — ver contraste medido em design-system.md §2.
     Nunca branco (falha em toda a extensão do gradiente); navy-900 passa
     em ambas as pontas quando o texto é grande/negrito (≥18px/600). */
  --ink-on-accent: var(--navy-900);

  /* Neutros / tinta sobre claro */
  --white: #FFFFFF;
  --ink:          #17222F; /* texto padrão sobre claro */
  --ink-strong:   #0E1728;
  --ink-muted:    #55677E; /* texto secundário/legenda sobre claro — 5.79:1 AA */

  /* Tinta inversa — sobre navy */
  --ink-inverse:        #FFFFFF;
  --ink-inverse-muted:  rgba(255,255,255,.72);

  /* ==========================================================================
     2. COR — papéis semânticos (front-end importa estes, não os crus acima)
     ========================================================================== */

  /* Superfícies */
  --surface:             var(--white);   /* fundo padrão — branco, muito respiro */
  --surface-alt:         var(--navy-50); /* seção alternada sobre claro */
  --surface-inverse:     var(--navy-700);/* hero / CTA final / rodapé superior */
  --surface-inverse-deep:var(--navy-900);/* rodapé, overlay de foto no hero */

  /* Tinta */
  --text:          var(--ink);
  --text-strong:   var(--ink-strong);
  --text-muted:    var(--ink-muted);
  --text-inverse:       var(--ink-inverse);
  --text-inverse-muted: var(--ink-inverse-muted);

  /* Marca */
  --brand:        var(--navy-700); /* HEX oficial do manual */
  --brand-strong: var(--navy-900);
  --brand-soft:   var(--navy-600);

  /* Acento — dose de assinatura (CTA, número-chave, régua, micro-elemento) */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-solid:  var(--gold-500); /* alias mantido: já não existe versão não-sólida */

  /* Bordas / filetes */
  --border:         rgba(23, 34, 47, .12);  /* filete sobre claro */
  --border-strong:  rgba(23, 34, 47, .24);
  --border-inverse: rgba(255, 255, 255, .18); /* filete sobre navy */
  --border-inverse-strong: rgba(255, 255, 255, .30);

  /* Foco — laranja sólido (não o gradiente inteiro, para nitidez do anel) */
  --focus-ring: var(--accent-solid);
  --focus-ring-offset: 2px;

  /* ==========================================================================
     3. TIPOGRAFIA
     ========================================================================== */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Escala fluida (mín. 375px → máx. 1440px de viewport) */
  --text-eyebrow: 0.8125rem;  /* 13px — fixo, label de seção/kicker */
  --text-sm:      0.875rem;   /* 14px — legenda/meta */
  --text-base:    1rem;       /* 16px — corpo padrão */
  /* Escala reduzida um degrau (18/08/2026, pedido do usuário: títulos de FAQ,
     CTA e seções estavam "enormes e desproporcionais" para uma LP). H2 caiu de
     36–56 para 28–40; FAQ (usa --text-h4) de 22–28 para 19–22; hero de 44–88
     para 38–60. Corpo e rodapé já eram pequenos e não mudaram. */
  --text-lg:      clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem); /* 17 → 19 — corpo destacado */
  --text-xl:      clamp(1.125rem,  1.06rem + 0.3vw,  1.375rem);  /* 18 → 22 — lede/subtítulo */
  --text-h4:      clamp(1.1875rem, 1.12rem + 0.3vw,  1.375rem);  /* 19 → 22 — pergunta de FAQ, título de card */
  --text-h3:      clamp(1.375rem,  1.2rem  + 0.9vw,  1.875rem);  /* 22 → 30 */
  --text-h2:      clamp(1.75rem,   1.45rem + 1.5vw,  2.5rem);    /* 28 → 40 — título de seção e CTA */
  --text-h1:      clamp(2rem,      1.55rem + 2.2vw,  3.25rem);   /* 32 → 52 — título de seção-âncora/oferta */
  --text-hero:    clamp(2rem,      1.2rem  + 3.6vw,  4.25rem);   /* 32 (mobile) → 68 (desktop) — amplitude larga: some no celular sem quebrar em 5 linhas, grande no desktop */
  --text-stat:    clamp(2rem,      1.65rem + 1.7vw,  3rem);      /* 32 → 48 — número-chave de autoridade */

  --leading-tight:   1.05; /* hero/display grande */
  --leading-snug:    1.15; /* h1–h3 */
  --leading-normal:  1.4;  /* h4, corpo destacado */
  --leading-relaxed: 1.65; /* parágrafo longo */

  --tracking-tightest: -0.03em; /* hero */
  --tracking-tight:    -0.015em;/* h1–h3 */
  --tracking-snug:     -0.005em;/* h4 */
  --tracking-normal:    0em;
  --tracking-wide:      0.02em; /* botão/UI label */
  --tracking-widest:    0.12em; /* eyebrow em caixa alta */

  --numeral-variant: tabular-nums; /* números de autoridade não "dançam" */
  --measure: 66ch; /* largura confortável de leitura */

  /* ==========================================================================
     4. ESPAÇAMENTO — escala base 4, muito respiro é padrão da entrega
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --space-section:    clamp(72px, 9vw, 160px);
  --space-section-sm: clamp(48px, 5vw, 96px);

  /* ==========================================================================
     5. GRID / CONTAINER
     Breakpoints (documentais — usar como literal em @media, CSS não permite
     var() em media query): sm 600px · md 900px · lg 1200px · xl 1440px
     ========================================================================== */
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 56px);

  /* ==========================================================================
     6. RAIO — pequeno e técnico, ecoa a geometria facetada/reta do símbolo
     (cortes retos, sem curva) — nunca bolha/pílula (ver §1 do doc)
     ========================================================================== */
  --radius-xs:   2px;  /* tag, chip de status */
  --radius-sm:   6px;  /* botão, input */
  --radius-md:   10px; /* card pequeno */
  --radius-lg:   18px; /* card grande, moldura de imagem */
  --radius-full: 999px; /* uso restrito: indicador de status pontual */

  /* ==========================================================================
     7. SOMBRA — sutil, tingida de navy (nunca preto neutro)
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(23, 34, 47, .07);
  --shadow-md: 0 8px 24px rgba(23, 34, 47, .10);
  --shadow-lg: 0 24px 56px rgba(23, 34, 47, .16);
  --shadow-focus: 0 0 0 3px rgba(213, 113, 29, .35);

  /* ==========================================================================
     8. BORDA
     ========================================================================== */
  --border-width-hairline: 1px;
  --border-width-thick:    2px;

  /* ==========================================================================
     9. MOVIMENTO — scroll nativo + scroll-behavior:smooth; SEM momentum/inércia
     (regra fixa do usuário, vale para todo projeto BuildV)
     ========================================================================== */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);

  /* ==========================================================================
     10. CAMADAS (z-index) — Merlin e banner de cookies nunca se sobrepõem
     ========================================================================== */
  --z-cookie-banner: 60; /* canto inferior ESQUERDO — reservado, ver componentes.css */
  --z-merlin: 70;        /* canto inferior direito — fora deste DS, instalado à parte */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

html {
  scroll-behavior: smooth; /* nativo — nunca Lenis/momentum */
}