/* ═══════════════════════════════════════════════
   THEME TOKENS
   All design tokens in one place.
   Override via site.config.js → theme object.
   ═══════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-deep: #08080e;
  --bg-base: #0a0a12;
  --bg-surface: #111119;
  --bg-elevated: #16161f;
  --bg-card: #1a1a26;

  /* Borders */
  --border-subtle: #1e1e2e;
  --border-medium: #2a2a3c;

  /* Text */
  --text-primary: #e4e4ee;
  --text-secondary: #8888a2;
  --text-muted: #55556a;

  /* Accent */
  --accent: #00c8ff;
  --accent-dim: #0099cc;
  --accent-glow: rgba(0, 200, 255, 0.08);
  --accent-glow-strong: rgba(0, 200, 255, 0.2);
  --accent-gradient: linear-gradient(135deg, #00c8ff 0%, #0088dd 50%, #6644ff 100%);

  /* Typography */
  --font-display: 'Chakra Petch', monospace;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Spacing */
  --section-padding: 8rem;
  --container-max: 1100px;
  --nav-height: 72px;
}