/* ============================================================
   tokens.css — Tornalli Construtora · design system (etapa 3)
   Fonte: Guia de aplicação Tornalli (nunesdsgn) + Marca/logo + Marca/patterns.
   Arquétipo: revista-assimetrico (state.json) · narrativa: prova.
   Paleta é a oficial do guia (#252826/#545b57/#b7c4b9/#D3D8D4) — o guia
   AUTORIZA variar a intensidade de luz desses códigos p/ apoio/gradiente;
   os tons extra abaixo (bg, surface, n400, primary-dark) são essa variação,
   nunca cor nova fora da família grafite→sage.
   ============================================================ */
:root{
  /* superfícies / texto — variações de luz sobre grafite/sage (guia autoriza) */
  --c-bg:        #F5F6F3;   /* sage claro aclarado quase ao branco — fundo padrão da LP */
  --c-surface:   #EAEDE7;   /* um degrau abaixo do bg — cards, faixas, blocos elevados */
  --c-text:      #252826;   /* grafite escuro oficial — texto principal (contraste 13.7:1 no bg) */
  --c-muted:     #545B57;   /* grafite médio oficial — texto secundário (contraste 6.4:1 no bg) */
  --c-white:     #FFFFFF;
  --c-dark:      #1B1D1B;   /* grafite escuro aprofundado — hero/seções dark (contraste 17:1 c/ branco) */

  /* marca — sem cor viva; a "ação" é o próprio grafite escuro (mono, como a paleta oficial) */
  --c-primary:      #252826; /* grafite escuro oficial — CTA/links/destaque (texto branco 14.9:1) */
  --c-primary-dark: #141615; /* hover/pressed do CTA — mesma família, mais escura */
  --c-accent:       #B7C4B9; /* sage oficial — dose de assinatura (eyebrow, filete, ícone, badge) */

  /* neutros — escala entre sage claro e grafite médio */
  --c-n200: #D3D8D4;  /* sage claro oficial — hairlines/bordas sobre fundo claro */
  --c-n400: #98A398;  /* meio-tom sage→grafite — ícones fracos, placeholders, divisores em superfície escura */
  --c-n500: #545B57;  /* grafite médio oficial — texto fraco, legendas, metadados */

  /* tipografia — par deliberado p/ o arquétipo revista-assimétrico:
     display expressiva (Funnel Display, da marca) + grotesk estrutural (Archivo, corpo) */
  --font-display: 'Funnel Display', sans-serif;
  --font-body:    'Archivo', sans-serif;

  /* escala tipográfica — base 100%=corpo, título principal 240% (do guia, p.6),
     adaptada a clamp responsivo; --fs-display é a amplificação do arquétipo (título gigante) */
  --fs-eyebrow: .8125rem;                           /* 13px — caixa alta, tracked */
  --fs-small:   .9375rem;                           /* 15px */
  --fs-body:    1.125rem;                           /* 18px — corpo = 100% */
  --fs-lead:    1.375rem;                           /* 22px — chapéu/lead */
  --fs-h4:      clamp(1.5rem,1rem + 1.6vw,1.75rem); /* 24–28px */
  --fs-h3:      clamp(1.875rem,1.2rem + 2.2vw,2.25rem); /* 30–36px */
  --fs-h2:      clamp(2.25rem,1.4rem + 3vw,3rem);   /* 36–48px */
  --fs-h1:      clamp(2.7rem,1.8rem + 3.6vw,4.75rem); /* 43–76px — ~240% do corpo (guia) */
  --fs-display: clamp(3.5rem,2rem + 7vw,8rem);      /* título gigante — assinatura do revista-assimétrico */

  /* forma — a marca é toda de cortes retos (logo, patterns, aplicações): raio quase zero */
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;  /* uso raro: só em pílula/tag isolada, nunca em botão/card */

  /* layout */
  --container: 1280px;
  --px: clamp(1.25rem, 4vw, 4rem);

  /* elevação — sutil, só para sustentar sobreposições do grid assimétrico */
  --shadow-sm: 0 1px 2px rgba(27,29,27,.08), 0 2px 10px rgba(27,29,27,.06);
  --shadow-md: 0 24px 60px -24px rgba(27,29,27,.45);

  /* movimento — decisivo e reto, sem bounce/elastic (ver §7) */
  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 84px;
}