/* AdiantaZap — tokens.css
   Camada 1: só custom properties. Design system oficial: **Coinbase**
   (light-first, canvas branco, um único accent, whitespace generoso).
   O accent é o VERDE DA MARCA (#21C063) — o azul do Coinbase não entra.

   Sem tema escuro: a partir da v6 o site é light-only e o toggle sai.
   Nomes de variável preservados (o Dev já linka este arquivo). */

:root{
  /* ==========================================================================
     SUPERFÍCIES — canvas branco puro; canvas-soft só para faixa e header
     de tabela. O Coinbase não alterna fundo no marketing: separa com ar.
     ========================================================================== */
  --bg:#FFFFFF;                /* canvas */
  --bg-elev:#F5F5F5;           /* canvas-soft: faixa, header de tabela, inset */
  --surface:#FFFFFF;           /* card */
  --surface-2:#F5F5F5;         /* superfície rebaixada (bloco interno, skeleton) */
  --line:rgba(91,97,110,.2);   /* hairline: borda de card, input, nav, divisória */
  --line-soft:rgba(91,97,110,.12);

  /* ==========================================================================
     TEXTO
     ink #0A0B0D (títulos e corpo principal) · body #5B616E (secundário)
     · mute #8A919E (placeholder, fine print)
     ========================================================================== */
  --text:#0A0B0D;
  --text-2:#5B616E;
  --muted:#8A919E;
  --placeholder:#8A919E;   /* 3,17:1 no branco — aceitável porque todo campo
                              tem label persistente; ver §11 do DESIGN */

  /* ==========================================================================
     AÇÃO — verde da marca #21C063.
     Texto sobre o verde é ESCURO: #0A0B0D dá 8,24:1 (branco daria 2,3:1).
     Para link/eyebrow/ícone em texto, existe --brand-text #0B7A3D (5,43:1).
     ========================================================================== */
  --brand:#21C063;                    /* botão primário, mockup, destaque */
  --brand-strong:#1BA854;             /* hover: ~9% mais escuro */
  --brand-ink:#0A0B0D;                /* 8,24:1 sobre --brand */
  --brand-text:#0B7A3D;               /* 5,43:1 sobre branco · 4,99:1 sobre #F5F5F5 */
  --brand-soft:rgba(33,192,99,.12);   /* tint de fundo */
  --brand-soft-2:rgba(33,192,99,.2);  /* hover de ghost/outline */
  --brand-line:rgba(33,192,99,.35);   /* borda de card em destaque */
  --brand-ring:rgba(11,122,61,.45);   /* anel de foco (2px) */

  /* link inline */
  --blue:#0B7A3D;                     /* nome preservado; valor = brand-text */
  --blue-soft:#E6F9F0;

  /* ==========================================================================
     SEMÂNTICOS — agora existem com nome e sobrenome (o DS traz os quatro)
     ========================================================================== */
  --success:#05B169;
  --success-soft:#E6F9F0;
  --danger:#DF1C41;
  --danger-soft:#FCE8EC;
  --warn:#F5A623;
  --warn-soft:rgba(245,166,35,.16);
  --warn-ink:#6B4A05;                 /* texto AA sobre --warn-soft */

  /* badge promocional: verde-claro derivado (o DS usa azul-claro) */
  --badge-bg:#E6F9F0;
  --badge-text:#0B7A3D;

  /* ==========================================================================
     QR PIX — preto puro sobre branco puro, sem opacidade, nunca sobre verde.
     Literais: é leitura de câmera, não decoração.
     ========================================================================== */
  --qr-bg:#FFFFFF;
  --qr-fg:#000000;

  /* ==========================================================================
     GRADIENTE DO HERO — único lugar com cor saturada em área grande
     (no Coinbase é cobalto; aqui é o verde da marca descendo para verde escuro)
     ========================================================================== */
  --gradient-start:#21C063;
  --gradient-end:#0A4A2B;

  /* ==========================================================================
     TIPOGRAFIA — display Poppins 400 (substituto da CoinbaseDisplay),
     corpo Inter 400/600 (substituto da CoinbaseSans). Sem tracking negativo,
     títulos nunca em bold: weight 400 é o teto do display.
     ========================================================================== */
  --font-display:'Poppins',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --font-sans:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* escala do DS: display 80/48/32/20 · body 18/16/14 */
  --fs-display-xl:clamp(2.5rem,8vw,5rem);      /* 40 → 80px · lh 1 · SÓ para
                                                  headline curta (≤6 palavras) */
  --fs-display-lg:clamp(2rem,5.4vw,3rem);      /* 32 → 48px · lh 1,17 */
  --fs-display-md:clamp(1.25rem,3.2vw,2rem);   /* 20 → 32px · lh 1,25 */
  --fs-display-sm:1.25rem;                     /* 20px · lh 1,4 */

  /* alias de compatibilidade
     O hero NÃO usa display-xl: a headline tem 13 palavras e, a 80px numa
     coluna de ~590px, quebrava em 6 linhas e empurrava o CTA para fora da
     dobra (medido no build v202611061422). Hero = display-lg; seções =
     display-md, para a hierarquia 48 → 32 → 20 continuar legível. */
  --fs-h1:var(--fs-display-md);
  --fs-h1-lp:var(--fs-display-lg);
  --fs-h2:var(--fs-display-md);
  --fs-h2-lp:var(--fs-display-md);
  --fs-h3:var(--fs-display-sm);

  --fs-lead:clamp(1rem,2.4vw,1.125rem);  /* 16 → 18px · lh 1,56 */
  --fs-body:1rem;                        /* 16 · lh 1,5 */
  --fs-sm:.875rem;                       /* 14 · lh 1,43 */
  --fs-xs:.8125rem;
  --fs-2xs:.75rem;                       /* 12 · lh 1,33 (caption) */
  --fs-eyebrow:.875rem;                  /* 14 · 600 (label de seção) */
  --fs-label:.875rem;                    /* 14 · 600 */

  --lh-display:1;
  --lh-tight:1.17;
  --lh-snug:1.25;
  --lh-body:1.5;
  --lh-loose:1.56;

  /* o DS não usa tracking: zero em tudo (mantidos por compatibilidade) */
  --tracking-display:0;
  --tracking-tight:0;
  --tracking-heading:0;
  --tracking-snug:0;
  --tracking-wide:0;
  --tracking-caption:0;

  /* ==========================================================================
     ESPAÇAMENTO — base 4px, escala do DS (4 → 128)
     ========================================================================== */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:24px;
  --space-8:32px;
  --space-10:48px;
  --space-12:64px;
  --space-16:96px;
  --space-section:128px;

  /* ==========================================================================
     RAIOS — 4 / 8 / 16 / 24 / 32 / pill
     botão e input: pill · card: 24 · imagem: 0
     ========================================================================== */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-2xl:32px;
  --radius-pill:9999px;

  /* ==========================================================================
     ELEVAÇÃO — UMA sombra, hairline + 8px de blur. Sem camadas.
     ========================================================================== */
  --shadow:0 8px 12px rgba(0,0,0,.12);
  --shadow-md:0 8px 12px rgba(0,0,0,.12);
  --shadow-xl:0 8px 12px rgba(0,0,0,.12);
  --shadow-brand:none;

  /* ==========================================================================
     CONTROLES — botão e input 56 de altura (alvo de toque folgado)
     ========================================================================== */
  --control-h:56px;
  --control-h-lg:56px;
  --control-h-sm:40px;

  /* ==========================================================================
     PRINT
     ========================================================================== */
  --print-ink:#000000;
  --print-paper:#FFFFFF;
  --print-line:#D0D5DD;

  color-scheme:light;
}