/* ============================================================
   tokens.css — Sistema "Editorial Monocromático"
   base: Refero / 21 TSI  ·  skill: .claude/skills/estilo-editorial/
   Regra: nenhum valor de cor/fonte/espaço/raio solto no CSS — só var(--token).
   ============================================================ */

:root {
  /* ---------- CORES (paleta fechada — 4 valores) ---------- */
  --color-black-void:   #000000;
  --color-paper-white:  #ffffff;
  --color-smoke:        #4d4d4d;
  --color-crimson-heat: #b62b1a; /* referência; o acento real VEM DA FOTO */

  /* ---------- SEMÂNTICO ---------- */
  --text-primary:   var(--color-paper-white);
  --surface-canvas: var(--color-black-void);
  --border-active:  var(--color-paper-white);
  --border-muted:   var(--color-smoke);
  --accent:         var(--color-crimson-heat);

  /* ---------- TIPOGRAFIA — FAMÍLIA ----------
     Saans não está no Google Fonts. Substituto do sistema: Manrope
     (grotesca geométrica, 300 real), com Inter em seguida.  */
  --font-saans: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- TIPOGRAFIA — PESOS ---------- */
  --font-weight-light:   300; /* "light" literal */
  --font-weight-display: 350; /* Manrope ≈ peso visual do Saans 300 no 21tsi */
  --font-weight-w380:    380; /* default */
  --font-weight-w570:    570; /* nav-links / "voz do meio" (21tsi: .navbar_nav a) */
  --font-weight-w790:    790; /* item ativo (21tsi: .recognition_nav_item.active) */

  /* ---------- TIPOGRAFIA — ESCALA (desktop, valores exatos) ---------- */
  --text-caption:    12px; --leading-caption:    1.3;  --tracking-caption:    0.6px;
  --text-body-sm:    14px; --leading-body-sm:    1.38; --tracking-body-sm:    0.7px;
  --text-body:       16px; --leading-body:       1.43; --tracking-body:       0.8px;
  --text-subheading: 20px; --leading-subheading: 1.3;  --tracking-subheading: 1px;

  /* ---------- TIPOGRAFIA — ESCALA RESPONSIVA ----------
     Valores EXATOS medidos no 21tsi.com (clamp(min, Nsvw, max), line-height 1.3):
       .hero_titles / .pSection--invest .st1 → clamp(80px, 7.35svw, 160px)
       .sphereTitle                          → clamp(70px, 5.5svw, 110px)
       .loading_counter                      → clamp(100px, 17svw, 320px)
     letter-spacing: normal em tudo (só o link gigante "Contact" usa -0.025em).  */
  --leading-display: 1.3;   /* 21tsi: line-height 1.3 em TODO headline */
  --leading-heading: 1.3;
  --fluid-heading-sm: clamp(30px,  3.25svw, 47px);
  --fluid-heading:    clamp(38px,  3.6svw,  64px);
  --fluid-heading-lg: clamp(52px,  4.6svw,  92px);
  --fluid-display:    clamp(70px,  5.5svw,  110px);
  --fluid-display-lg: clamp(74px,  6svw,    124px);
  --fluid-display-xl: clamp(80px,  7.35svw, 160px);
  --fluid-counter:    clamp(56px,  11svw,   180px); /* loader "JEANDRE" (7 letras — menor que o "21" do 21tsi) */

  /* ---------- ESPAÇAMENTO (escala medida — não é régua de 4/8) ---------- */
  --spacing-10: 10px;   --spacing-11: 11px;   --spacing-15: 15px;
  --spacing-19: 19px;   --spacing-20: 20px;   --spacing-23: 23px;
  --spacing-27: 27px;   --spacing-30: 30px;   --spacing-36: 36px;
  --spacing-38: 38px;   --spacing-60: 60px;   --spacing-63: 63px;
  --spacing-108: 108px; --spacing-150: 150px; --spacing-172: 172px;

  /* ---------- LAYOUT ---------- */
  --card-padding: var(--spacing-20);
  --element-gap:  var(--spacing-20);
  --nav-gap:      var(--spacing-38);
  --text-inset:   max(20px, 3.125vw); /* 21tsi: .navbar { top/left: 3.125vw } — inset global */
  --nav-inset:    max(20px, 3.125vw);
  --nav-height:   72px;

  /* ---------- BORDA / RAIO ---------- */
  --border-width:    1px;   /* SEMPRE 1px */
  --radius-bodies:   8px;   /* cards/modais — NUNCA em botão */
  --radius-buttons:  70px;  /* todo controle interativo */
  --radius-circular: 594px; /* só retrato/assinatura */
  --radius-photo:    0;     /* foto/hero/frame — nunca arredondar */

  /* ---------- MOTION (as 3 curvas reais do 21tsi.com) ---------- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glide:    cubic-bezier(0.19, 1, 0.22, 1);    /* principal — títulos, botões */
  --ease-quint:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-circ:     cubic-bezier(0.075, 0.82, 0.165, 1); /* scale/blur focus (manifesto) */
  --dur-micro:    150ms;
  --dur-ui:       280ms;
  --dur-reveal:   900ms;
  --dur-dissolve: 800ms;
  --reveal-shift:   22px;   /* deslize do [data-reveal] (21tsi: ~24px) */
  --reveal-blur:     5px;   /* micro-desfoque de entrada */
  --stagger-reveal: 80ms;   /* cascata entre irmãos (--reveal-i) */
}

/* ---------- TELAS PEQUENAS (telefone): reduz os displays gigantes ---------- */
@media (max-width: 560px) {
  :root {
    --fluid-heading:    clamp(30px, 8.5vw, 40px);
    --fluid-heading-lg: clamp(38px, 11vw, 52px);
    --fluid-display:    clamp(42px, 12.5vw, 62px);
    --fluid-display-lg: clamp(44px, 13vw, 66px);
    --fluid-display-xl: clamp(46px, 13.5vw, 72px);
    --fluid-counter:    clamp(38px, 13vw, 60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms; --dur-ui: 0ms; --dur-reveal: 1ms;
    --dur-dissolve: 1ms; --reveal-shift: 0px;
    --reveal-blur: 0px; --stagger-reveal: 0ms;
  }
}