/* RodeAqui Design System — tokens (v0.1, 2026-09-22)
   Uma família tipográfica, uma cor de acento, um ritmo vertical, cinco durações.
   Derivado da leitura instrumentada de attio.com, linear.app, revolut.com, retool.com,
   shopify.com, bling.com.br e contaazul.com (ver DESIGN.md). */
:root {
  /* ---------- cor: papel (claro) ---------- */
  --paper:      #FFFFFF;                 /* fundo padrão */
  --paper-2:    #F6F6F4;                 /* painel suave: molduras de produto, faixas, cartões */
  --paper-3:    #ECECE9;                 /* pressed / trilhos */
  --ink:        #0B0F10;                 /* texto, botão primário */
  --ink-2:      #5C6670;                 /* segunda frase do título, parágrafos */
  --ink-3:      #646E76;                 /* legendas, metadados (4,6:1 sobre paper-2) */
  --hair:       rgba(11,15,16,.08);      /* linha fina: bordas, divisores */
  --hair-2:     rgba(11,15,16,.14);      /* borda em hover / foco leve */
  --ring:       0 0 0 1px rgba(11,15,16,.06);  /* moldura de cartão sem sombra */

  /* ---------- cor: noite (escuro) ---------- */
  --night:      #0A1214;
  --night-2:    #101B1E;
  --night-ink:  #F2F5F4;
  --night-ink-2:#9AA7A9;
  --night-hair: rgba(255,255,255,.09);

  /* ---------- acento: um só ---------- */
  --teal:       #11636B;                 /* marca, links, eyebrow, dado positivo, foco */
  --teal-ink:   #0B4A50;                 /* teal sobre papel-2 (contraste AA) */
  --teal-glow:  #3FE0E6;                 /* teal sobre noite */
  --teal-soft:  #E4F1F1;                 /* fundo de chip, faixa de destaque */
  --pos:        #2E7D4F;  --neg: #B3402B;  --warn: #8A5A12;   /* só dentro de dados */

  /* ---------- tipo: uma família ---------- */
  --font: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;   /* só dentro do produto e em eyebrows */
  --w-regular: 400; --w-medium: 500; --w-display: 560; --w-strong: 620;

  /* escala (mobile → desktop). display usa opsz 32 e tracking negativo */
  --t-display: clamp(40px, 7.2vw, 80px);     /* h1 hero      lh 1.0  ls -0.028em */
  --t-1:       clamp(34px, 5vw, 56px);       /* h2 seção     lh 1.02 ls -0.024em */
  --t-2:       clamp(26px, 3.2vw, 36px);     /* h3 bloco     lh 1.1  ls -0.016em */
  --t-3:       clamp(19px, 2vw, 22px);       /* lead / h4    lh 1.35 ls -0.008em */
  --t-body:    17px;                          /* parágrafo    lh 1.55 */
  --t-small:   15px;                          /* ui, nav      lh 1.45 */
  --t-caption: 13px;                          /* legenda      lh 1.4 */
  --t-eyebrow: 12px;                          /* mono, caixa alta, ls .12em */

  /* ---------- espaço ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(72px, 10vw, 140px);        /* o único ritmo entre seções */
  --gutter:  clamp(20px, 4vw, 48px);          /* padding-inline do container */
  --container: 1200px;  --container-wide: 1360px;  --measure: 34ch;

  /* ---------- forma ---------- */
  --r-1: 6px;  --r-2: 10px;  --r-3: 16px;  --r-4: 24px;  --r-pill: 999px;
  --shadow-frame: 0 40px 120px -40px rgba(11,15,16,.35), 0 2px 6px rgba(11,15,16,.05);  /* só moldura de produto */

  /* ---------- movimento ---------- */
  --d-xs: 100ms; --d-sm: 200ms; --d-md: 300ms; --d-lg: 450ms; --d-xl: 700ms; --d-story: 900ms;
  --e-out:   cubic-bezier(.33, 1, .68, 1);      /* entradas, reveals */
  --e-inout: cubic-bezier(.65, 0, .35, 1);      /* trocas de estado, abas */
  --e-ui:    cubic-bezier(.2, 0, 0, 1);         /* hover, cor, borda */
  --reveal-y: 16px;  --stagger: 60ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-xs: 0ms; --d-sm: 0ms; --d-md: 0ms; --d-lg: 0ms; --d-xl: 0ms; --d-story: 0ms; --reveal-y: 0px; --stagger: 0ms; }
}