/* ═══════════════════════════════════════════════════════════════
   TOKENS — a fonte única de verdade do visual do site.
   Mudou uma cor aqui, mudou no site inteiro.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores: neutros ──────────────────────────────────────── */
  --ink-900: #0b0d10;   /* fundo escuro / texto principal */
  --ink-800: #14171d;
  --ink-700: #1e222a;
  --gray-600: #545c6b;  /* texto secundário sobre branco (contraste 7.1:1) */
  --gray-500: #7b8494;
  --gray-400: #a6aebc;
  --gray-300: #d3d8e0;
  --gray-200: #e5e8ee;
  --gray-100: #f2f4f7;
  --gray-50:  #f8f9fb;
  --paper:    #ffffff;

  /* ── Cores: marca ────────────────────────────────────────── */
  --accent:       #2563eb;  /* azul: confiança, contraste 5.17:1 no branco */
  --accent-dark:  #1d4ed8;
  --accent-soft:  #eff4ff;
  --accent-ring:  rgba(37, 99, 235, 0.35);

  /* WhatsApp: família teal da marca, não o #25D366.
     O verde claro dá 2.8:1 com texto branco e reprova feio.
     O teal oficial (#128C7E) dá 4.14:1 — também reprova, porque
     o rótulo tem 13px e 13px não é "texto grande" (a regra dos
     3:1 exige 18.66px+bold ou 24px+). Escurecido até 4.8:1 para
     passar no AA de verdade, sem perder a cara de WhatsApp. */
  --wa:      #0e8074;
  --wa-dark: #0b6a60;
  --wa-ring: rgba(14, 128, 116, 0.35);

  /* ── Superfícies ─────────────────────────────────────────── */
  --bg:          var(--paper);
  --bg-alt:      var(--gray-50);
  --surface:     var(--paper);
  --border:      var(--gray-200);
  --border-soft: var(--gray-100);

  /* ── Texto ───────────────────────────────────────────────── */
  --text:        var(--ink-900);
  --text-muted:  var(--gray-600);
  --text-invert: var(--paper);

  /* ── Tipografia ──────────────────────────────────────────── */
  /* Stack do sistema: zero requisições de rede, zero atraso de
     renderização. Para trocar por uma fonte externa, veja o README. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida — cresce sozinha entre 360px e 1280px de tela */
  --fs-xs:   0.8125rem;                            /* 13px */
  --fs-sm:   0.875rem;                             /* 14px */
  --fs-base: 1rem;                                 /* 16px */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.5rem + 3vw, 3.75rem);

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.65;

  --tracking-tight: -0.022em;
  --tracking-wide:  0.08em;

  /* ── Espaçamento (escala de 4px) ─────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* ── Layout ──────────────────────────────────────────────── */
  --container:   1180px;
  --container-x: clamp(1.25rem, 4vw, 2.5rem);
  --header-h:    72px;

  /* ── Raios ───────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ── Sombras: discretas, em camadas ──────────────────────── */
  --shadow-xs: 0 1px 2px rgba(11, 13, 16, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 13, 16, 0.06), 0 1px 2px rgba(11, 13, 16, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 13, 16, 0.06), 0 2px 4px rgba(11, 13, 16, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 13, 16, 0.08), 0 4px 8px rgba(11, 13, 16, 0.04);
  --shadow-xl: 0 24px 56px rgba(11, 13, 16, 0.14), 0 8px 16px rgba(11, 13, 16, 0.06);

  /* ── Movimento ───────────────────────────────────────────── */
  /* Curvas customizadas: as nativas do CSS são fracas demais.
     Regra: entrada/saída = ease-out. Nunca ease-in (parece lento). */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-press: 160ms;  /* feedback de clique */
  --dur-fast:  180ms;  /* hover, cor */
  --dur-base:  240ms;  /* dropdown, card */
  --dur-slow:  400ms;  /* menu mobile, reveal */

  --z-header: 100;
  --z-scrim:  90;
  --z-fab:    80;
}