/* ==========================================================================
   BIGHEADSITES · TOKENS GLOBAIS
   Paleta, tipografia, espaçamento, bordas, sombras, texturas, movimento e camadas.
   As seções consomem estes tokens. Valores soltos ficam só em ajustes de composição.
   ========================================================================== */

:root {
  /* Paleta oficial ------------------------------------------------------- */
  --c-white: #ffffff;
  --c-ink: #111111;
  --c-acid: #d7ff38;
  --c-gray: #dadada;
  --c-paper: #f5f5f5;

  /* Papéis de cor -------------------------------------------------------- */
  --color-bg: var(--c-paper);
  --color-fg: var(--c-ink);
  --color-fg-soft: rgb(17 17 17 / 0.68);
  --color-accent: var(--c-acid);
  --color-line: var(--c-ink);
  --color-line-soft: rgb(17 17 17 / 0.18);
  --color-focus: var(--c-ink);

  /* Famílias ------------------------------------------------------------- */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Larguras do Archivo (eixo variável wdth, aplicado via font-stretch) -- */
  --stretch-tight: 66%;
  --stretch-condensed: 78%;
  --stretch-normal: 100%;
  --stretch-wide: 115%;

  /* Escala tipográfica (mobile primeiro, cresce com a tela) ------------- */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);
  --fs-3xl: clamp(3rem, 1.8rem + 6vw, 8rem);
  --fs-display: clamp(3.75rem, 1.5rem + 11vw, 12.5rem);

  --lh-tight: 0.88;
  --lh-snug: 1.15;
  --lh-body: 1.55;

  --tracking-display: -0.02em;
  --tracking-mono: 0.03em;

  /* Espaçamento ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --container: 92rem;
  --section-space: clamp(4.5rem, 2.5rem + 8vw, 10rem);
  --tear-h: clamp(1.75rem, 1rem + 3vw, 3.5rem); /* altura dos rasgos de papel entre seções */

  /* Bordas e raios ------------------------------------------------------- */
  --bw: 2px;
  --border: var(--bw) solid var(--color-line);
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-pill: 999px;

  /* Sombras: duras (brutalismo) e de papel (profundidade) ---------------- */
  --shadow-hard-s: 2px 2px 0 var(--c-ink);
  --shadow-hard: 4px 4px 0 var(--c-ink);
  --shadow-paper: 0 1px 1px rgb(17 17 17 / 0.08), 0 14px 30px -14px rgb(17 17 17 / 0.38);

  /* Texturas ------------------------------------------------------------- */
  /* Grão de papel: ruído SVG leve, repetido em blocos de 220px. */
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.067 0 0 0 0 0.067 0 0 0 0 0.067 0.16 0 0 0 -0.055'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Movimento ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* Camadas -------------------------------------------------------------- */
  --z-header: 100;
  --z-skip: 200;

  /* Header --------------------------------------------------------------- */
  --header-h: 3.75rem;
  --header-h-scrolled: 3.75rem;
}

@media (min-width: 64em) {
  :root {
    --header-h: 5.5rem;
    --header-h-scrolled: 4.25rem;
  }
}