/* ============================================================================
   Vida Gamificada — Design Tokens (LP)
   DERIVADO fielmente de docs/design-system/design-tokens.css — mesmos valores,
   sem divergir. Esta é a fonte da verdade de cor/fonte/espaço da landing.
   Direção: "Terminal de Missão Noturno". REGRA-MÃE: cor é semântica, nunca decoração.
   ============================================================================ */

:root {
  /* 1. NEUTROS — o void / o terminal */
  --void:       #0A0E17;
  --surface:    #121826;
  --surface-2:  #1B2333;
  --line:       #2A3344;
  --ink:        #E8EDF5;
  --ink-dim:    #8A93A6;

  /* 2. SINAIS — a máquina de estados (cada cor = UM trabalho) */
  --go:         #2BE08A; /* verdade verificada — COR DE MARCA */
  --go-dim:     #1C9E63;
  --xp:         #FFB627; /* recompensa — XP/nível/selo */
  --xp-dim:     #B57E12;
  --danger:     #FF4D4D; /* pele em jogo — relógio acabando, falhou */
  --danger-dim: #B33636;
  --ai:         #38BDF8; /* voz do sistema / da IA */
  --ai-dim:     #1E7DAA;
  --warn:       #F5A623; /* âmbar de transição do relógio */

  /* 3. TIPOGRAFIA — quatro vozes com trabalho semântico */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; /* manchetes — peso que a mono não dá; fallback métrico anti-CLS */
  --font-body:    "JetBrains Mono", ui-monospace, monospace;        /* corpo = MONO (cara de terminal); mesma família dos números/relógio */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-pixel:   "Press Start 2P", monospace;                      /* recompensa/pixel */

  /* Escala — perfect fourth (1.333) */
  --fs-300: 0.75rem;
  --fs-400: 1rem;
  --fs-500: 1.333rem;
  --fs-600: 1.777rem;
  --fs-700: 2.369rem;
  --fs-800: 3.157rem;
  --fs-900: 4.209rem;

  --lh-tight: 1.0;
  --lh-snug:  1.2;
  --lh-body:  1.7;     /* corpo MONO precisa respirar mais que sans (anti-cansaço) */
  --tracking-caps: 0.08em;

  /* 4. ESPAÇAMENTO — base 8px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* 5. RAIOS — reto = ferramenta; pílula = SÓ jogo (XP/nível) */
  --radius-0:    0;
  --radius-int:  4px;
  --radius-game: 999px;
  --radius-pill: 999px;
  --border-1: 1px solid var(--line);

  /* 6. SOMBRAS / GLOW — fósforo só em estado VIVO */
  --glow-go:     0 0 12px rgba(43, 224, 138, 0.45);
  --glow-xp:     0 0 12px rgba(255, 182, 39, 0.40);
  --glow-danger: 0 0 14px rgba(255, 77, 77, 0.45);
  --glow-ai:     0 0 10px rgba(56, 189, 248, 0.35);
  --shadow-pane: 0 1px 0 var(--line), 0 0 0 1px var(--line);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* 7. MOTION — UI rápida; recompensa em steps() 8-bit */
  --motion-ui:     150ms;
  --motion-ui-lg:  200ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --steps-8bit:    steps(6, end);

  /* 8. TEXTURAS — assinatura sutil, com função */
  --scanline: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  --dither: radial-gradient(rgba(138, 147, 166, 0.10) 1px, transparent 1px);
  --dither-size: 4px 4px;

  --z-overlay: 100;
}

/* Acessibilidade de movimento — no-motion-first honrado na fonte.
   O estado base nunca depende de animação. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}