/* ==========================================================================
   DESIGN TOKENS — TEMPLATE
   Cada cliente DEFINE OS VALORES. Os NOMES semânticos são contrato.
   NÃO renomeie tokens — apenas preencha valores.
   ========================================================================== */
:root {

  /* ── Paleta semântica ───────────────────────────────────────────────
     --ink:      texto escuro, títulos, fundos escuros
     --sand:     fundo claro principal
     --cream:    branco / glassmorphism / cards
     --muted:    texto secundário, labels suaves
     --body:     cor do texto corrido
     --accent:   CTA primário (botões, links de ação)
     --accent-2: hover/active do accent
     --surface:  fundo de cards e elementos elevados
     --line:     bordas e linhas divisoras
  */
  --ink:      #000000;
  --sand:     #ffffff;
  --cream:    #ffffff;
  --muted:    #888888;
  --body:     #333333;
  --accent:   #000000;
  --accent-2: #000000;
  --surface:  #f5f5f5;
  --line:     rgba(0, 0, 0, 0.1);

  /* ── Tipografia ─────────────────────────────────────────────────────
     Display: títulos e elementos de impacto
     Body:    texto corrido, navegação, descrições
  */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Escala tipográfica (clamp responsivo) ─────────────────────────
     Mantenha o padrão clamp(min, fluid, max) — não use px fixo em headings.
  */
  --fs-h1:      clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:      clamp(2rem,   4vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --fs-body:    clamp(1rem,   1.2vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  /* ── Ritmo vertical ────────────────────────────────────────────────
     Mantém respiração consistente entre seções.
  */
  --section-py:    clamp(4rem, 8vw, 7rem);
  --container-max: 1200px;
  --container-px:  clamp(1.25rem, 4vw, 2.5rem);

  /* ── Curvas e raios ────────────────────────────────────────────────
     Decisão de IDENTIDADE: orgânico (40-56px), moderno (12-20px),
     brutalista (0px), pill (999px). Escolha UMA linguagem.
  */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-xl:  48px;

  /* ── Sombras (use com parcimônia) ──────────────────────────────────*/
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ── Transições ────────────────────────────────────────────────────*/
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    180ms;
  --t-base:    320ms;
  --t-slow:    560ms;
}

html,
body {
  background-color: var(--sand);
  font-family: var(--font-body);
  color: var(--body);
  font-size: var(--fs-body);
}