/* ---- Tokens: cor, tipografia, espaço, movimento ---- */
:root {
  /* cor — tema claro. O navy da marca deixa de ser fundo e passa a ser a cor
     dos títulos e dos blocos de seção; ver .navy no fim deste arquivo. */
  --bg:          #FFFFFF;
  --surface:     #F7F9FC;
  --surface-2:   #EDF2F9;
  --brand:       #02244E;   /* 15.39:1 no branco — é a cor de título */
  --brand-lift:  #1E4062;   /* 10.69:1 */
  --brand-soft:  #E8EFF8;   /* tinta azul clara para faixas e chips */

  /* O dourado da marca dá 1.72:1 no branco: serve como PREENCHIMENTO (botão, ponto,
     filete), nunca como texto sobre claro. Quando o dourado precisa ser lido como
     texto em fundo claro, usa-se --gold-ink (5.76:1). Dentro de .navy os dois
     colapsam no dourado puro, que ali rende 8.94:1. */
  --gold:        #FFB90B;
  --gold-soft:   #FFD166;
  --gold-ink:    #8A5D00;

  --ink:         #0F172A;   /* 17.85:1 */
  --muted:       #475569;   /*  7.58:1 — slate-600, não o 400 do tema escuro */
  --line:        rgba(2, 36, 78, .10);
  --line-strong: rgba(2, 36, 78, .20);
  --positive:    #047857;   /* emerald-700: o #34D399 do tema escuro dá 1.9:1 no branco */
  --negative:    #B91C1C;
  --shadow-card: 0 1px 2px rgba(2,36,78,.05), 0 14px 34px -14px rgba(2,36,78,.16);

  /* tipografia fluida */
  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  /* Os tetos de --step-3 e --step-4 são calibrados para a copy REAL desta página, não para
     headlines curtas de design system. A headline aprovada tem 86 caracteres: a 88px ela
     ocupava 871px de altura e empurrava o CTA para 600px abaixo da dobra. */
  --step-3:  clamp(2.25rem, 1.7rem + 2.7vw, 3.25rem);
  --step-4:  clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);

  /* espaço */
  --gutter:  clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
  --section: clamp(3.25rem, 2.25rem + 4.6vw, 6rem);   /* era 4.5-9rem: respiro grande demais */
  --radius:  24px;
  --radius-sm: 14px;

  /* movimento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  600ms;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-lift); }

/* números não podem tremer enquanto animam */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Bloco navy: inverte os tokens localmente ----
   Toda a biblioteca de componentes (.glass, .btn, .eyebrow, .lead, .badge...) lê os
   mesmos custom properties, então redefini-las aqui converte a seção inteira sem
   precisar de uma segunda folha de estilo nem de seletor duplicado.
   É aqui que o dourado da marca volta a poder ser texto: 8.94:1 sobre #02244E. */
.navy {
  --bg:          #02244E;
  --surface:     #0A2E60;
  --surface-2:   #103872;
  --brand-soft:  #16406F;
  --ink:         #FFFFFF;   /* 15.39:1 */
  --muted:       #B6C9E2;   /*  9.10:1 */
  --line:        rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .26);
  --gold-ink:    var(--gold);
  --positive:    #4ADE80;
  --negative:    #FCA5A5;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.10), 0 22px 55px -22px rgba(0,0,0,.55);
  background: var(--bg);
  color: var(--ink);
}