/* -----------------------------------------
   DESIGN TOKENS
   Fonte única de verdade para cor, tipografia,
   espaçamento, easing e profundidade (z-index).
----------------------------------------- */

:root {
  /* ---------- Cor ---------- */
  --color-bg: #0a0a0b;
  --color-bg-elevated: #111113;
  --color-bg-soft: #16161a;
  --color-text: #f5f5f2;
  --color-text-muted: rgba(245, 245, 242, 0.64);
  --color-text-faint: rgba(245, 245, 242, 0.34);
  --color-accent: #c8e600;
  --color-accent-soft: rgba(200, 230, 0, 0.14);
  --color-accent-line: rgba(200, 230, 0, 0.35);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-overlay: rgba(8, 8, 9, 0.86);

  /* Aliases legados (compatibilidade com conteúdo antigo) */
  --corTexto: var(--color-text);
  --corDestaque: var(--color-accent);
  --bgLinha: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0)
    )
    1;

  /* ---------- Tipografia ---------- */
  --font-display: "Inter", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --fs-micro: clamp(0.7rem, 0.62rem + 0.15vw, 0.78rem);
  --fs-small: clamp(0.82rem, 0.76rem + 0.2vw, 0.95rem);
  --fs-body: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
  --fs-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h2: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --fs-h1: clamp(3rem, 1.8rem + 5vw, 5.5rem);
  --fs-display: clamp(3.4rem, 1.4rem + 9vw, 9rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-wide: 0.14em;
  --ls-wider: 0.28em;

  /* ---------- Espaçamento ---------- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.8rem;
  --space-5: 2.6rem;
  --space-6: 3.8rem;
  --space-7: 5.6rem;
  --space-8: 8rem;
  --space-9: 11rem;

  --container-max: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 3vw, 3.5rem);

  /* ---------- Movimento ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 180ms;
  --dur-base: 360ms;
  --dur-slow: 640ms;
  --dur-slower: 1000ms;

  /* ---------- Profundidade ---------- */
  --z-base: 1;
  --z-scene: 0;
  --z-grain: 5;
  --z-content: 10;
  --z-nav: 500;
  --z-cursor: 800;
  --z-lightbox: 900;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px -6px var(--color-accent-soft);
  --shadow-card: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-card-hover: 0 24px 60px -15px rgba(0, 0, 0, 0.8), 0 0 30px -4px var(--color-accent-soft);

  /* Spotlight & Glassmorphism Tokens */
  --card-bg-gradient: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  --card-bg-hover: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-hover: rgba(200, 230, 0, 0.4);
  --spotlight-color: rgba(200, 230, 0, 0.12);
  --spotlight-border: rgba(200, 230, 0, 0.5);
}

/* Usuários que preferem menos movimento recebem
   transições praticamente instantâneas em todo o site. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}