/* ===========================================
   Design Tokens
   =========================================== */

:root {
  --color-bg:          #0a0a0f;
  --color-surface:     #12121a;
  --color-surface-2:   #1a1a26;
  --color-border:      #2a2a3a;
  --color-text:        #e4e4ed;
  --color-text-muted:  #8888a0;
  --color-accent:      #6c63ff;
  --color-accent-hover:#857eff;
  --color-accent-glow: rgba(108, 99, 255, 0.15);
  --color-green:       #4ecdc4;
  --color-orange:      #ff9f43;
  --color-red:         #ff6b6b;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --radius:    12px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-height: 64px;
}