/* =====================================================================
   TOKENS v8 — design system editorial
   Distribuição: 70% preto · 20% branco · 10% roxo (com off-white quente)
   Tipografia: Bodoni Moda + Manrope + JetBrains Mono (self-hosted)
   ===================================================================== */

:root {
  /* Cores — briefing v4 + camadas editoriais */
  --c-black:         #000000;
  --c-black-soft:    #080808;
  --c-black-elevated:#101010;
  --c-black-card:    #0E0E12;

  --c-paper:         #FFFFFF;
  --c-paper-warm:    #F4F2EC;   /* off-white quente — terceira camada */
  --c-paper-soft:    #F3F3F3;

  --c-gray-light:    #B8B8B8;
  --c-gray-medium:   #777777;
  --c-gray-dark:     #222222;
  --c-gray-deep:     #44464E;

  --c-purple:        #7C3AFB;   /* brand */
  --c-purple-hot:    #9566FF;
  --c-purple-dark:   #5622C7;
  --c-purple-soft:   rgba(124, 58, 251, 0.18);
  --c-purple-line:   rgba(124, 58, 251, 0.45);
  --c-purple-glow:   rgba(124, 58, 251, 0.35);

  --c-border:        rgba(255, 255, 255, 0.12);
  --c-border-soft:   rgba(255, 255, 255, 0.06);

  /* Tipografia — briefing */
  --f-display: "Bodoni Moda", "Bodoni 72", Didot, "Cormorant Infant", Georgia, serif;
  --f-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", "Menlo", ui-monospace, monospace;

  /* Escala (clamp fluido) */
  --fs-xs:    0.6875rem;       /* 11px — meta */
  --fs-sm:    0.8125rem;       /* 13px */
  --fs-base:  1rem;            /* 16px */
  --fs-md:    clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-lg:    clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-xl:    clamp(1.5rem, 2.2vw, 2rem);
  --fs-2xl:   clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-3xl:   clamp(3rem, 6vw, 5.25rem);
  --fs-4xl:   clamp(4rem, 9vw, 8.5rem);
  --fs-5xl:   clamp(4.5rem, 12vw, 11rem);

  /* Espaçamento (múltiplos de 8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Container — briefing: 1200px desktop (360px cada lado) */
  --container:        min(1200px, calc(100vw - 32px));
  --container-narrow: min(820px, calc(100vw - 32px));

  /* Movimento */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-emph:   cubic-bezier(.22, .61, .36, 1);
  --ease-std:    cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    200ms;
  --dur-ui:      400ms;
  --dur-reveal:  900ms;
  --dur-cinema:  1400ms;
  --stagger:     80ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fx-particles, .fx-cursor { display: none !important; }
}