/* ============================================================
   tokens.css — design tokens (cor, tipografia, espaço, motion)
   Vai Com Medo Mesmo — Swiss/Bauhaus editorial
   ============================================================ */

:root {
  /* --- Paleta (preservada do site atual) --- */
  --laranja: #d97742;          /* accent: A porta, numeral, CTAs */
  --laranja-tinta: #b8531f;    /* laranja escuro p/ texto sobre papel claro */
  --fundo: #f2f0ec;            /* papel, fundo principal */
  --carta: #ffffff;            /* cartões, branco puro */
  --linha: #e2ded8;            /* hairlines 1px */
  --texto: #14110f;            /* corpo */
  --fraco: #635e58;            /* secundário */
  --apagado: #716c66;          /* terciário */

  /* --- Tipografia --- */
  --font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* pesos (referência) */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* tracking */
  --t-display: 0.004em;        /* display: tracking apertado */
  --t-rot: 0.26em;             /* faixa/rot kicker */
  --t-nav: 0.14em;             /* nav uppercase */
  --t-porta: 0.06em;           /* botão A porta */
  --t-mono: 0.04em;            /* numerais mono */

  /* line-height */
  --lh-display: 1.02;          /* display massivo */
  --lh-body: 1.7;              /* corpo longo */
  --lh-lede: 1.55;             /* subtítulo/lede */
  --lh-tight: 1.08;            /* h2 de chamada */
  --lh-quote: 1.4;             /* listas */

  /* --- Escala de espaçamento (rem) --- */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 0.75rem;  /* 12px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 2.75rem;  /* 44px */
  --space-7: 3.5rem;   /* 56px */
  --space-8: 5rem;     /* 80px */
  --space-9: 8rem;     /* 128px */
  --space-10: 10rem;   /* 160px */

  /* --- Layout --- */
  --container: 1440px;
  --gutter: 24px;
  --pad-x: 32px;              /* mobile */
  --hairline: 1px;            /* sempre 1px */

  /* --- Motion --- */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 120ms;
  --d-base: 220ms;
  --d-slow: 420ms;

  /* --- Z-index --- */
  --z-topo: 10;
}

/* ============================================================
   Dark mode — preserva a paleta invertida do site atual
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b0b0b;
    --carta: #151515;
    --linha: #262626;
    --texto: #f2f2f2;
    --fraco: #8a8a8a;
    --apagado: #7f7f7f;
    --laranja-tinta: #d97742;
    /* --laranja permanece igual */
  }
}