:root {
  /* Typography */
  --font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
  
  /* Color Palette - Premium Dark Mode */
  --bg-gradient-start: #0f172a; /* Deep Slate */
  --bg-gradient-end: #1e1b4b; /* Deep Indigo */
  
  --accent-primary: #8b5cf6; /* Vibrant Purple */
  --accent-secondary: #06b6d4; /* Cyan */
  --accent-glow: rgba(139, 92, 246, 0.5);
  
  /* Text Colors */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  
  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  --glass-blur: 16px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Background Animated Orbs for visual flair */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.4;
  animation: float 20s infinite ease-in-out alternate;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: var(--accent-primary);
  top: -100px;
  left: -100px;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: var(--accent-secondary);
  bottom: -150px;
  right: -100px;
  animation-delay: -5s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.1); }
  100% { transform: translate(-30px, 50px) scale(0.9); }
}