/* ==========================================================================
   Design tokens — "Zenith Space UI"
   Fonte única da verdade para cor, tipografia, espaçamento e elevação.
   ========================================================================== */

:root {
  /* Canvas */
  --color-bg: #0a0a0c;
  --color-grid-line: rgba(255, 255, 255, 0.03);

  /* Aurora (luz ambiente estática + modulação por scroll via JS) */
  --color-aurora-a: #2563eb;
  --color-aurora-b: #00d4ff;
  --aurora-opacity: 0.05;
  --aurora-shift: 0px;

  /* Superfícies — claras o bastante pra se distinguir do fundo, com uma
     borda bem sutil pra marcar onde cada card começa e termina */
  --color-surface: rgba(26, 26, 32, 0.94);
  --color-surface-solid: #1a1a20;
  --color-surface-border: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-card-glow: 0 0 30px rgba(37, 99, 235, 0.2);

  /* Texto */
  --color-text: #ededed;
  --color-text-dim: #9a9a9a;
  --color-text-meta: #666666;
  --color-line: #333333;

  /* Acento */
  --color-blue: #2563eb;
  --color-cyan: #00d4ff;

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

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

  /* Grid */
  --grid-gap: 24px;
  --container-max: 1440px;
  --container-pad: 5vw;

  /* Movimento */
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.05s;
  --dur-base: 0.25s;
  --dur-slow: 0.6s;
}

@media (max-width: 768px) {
  :root {
    --container-pad: 6vw;
  }
}