:root {
  /* Dynamic Theme - Future Tech Colors */
  --primary: 147 51 234; /* purple-600 */
  --primary-foreground: 255 255 255;
  
  --secondary: 6 182 212; /* cyan-600 */
  --secondary-foreground: 255 255 255;
  
  --accent: 219 39 119; /* pink-600 */
  --accent-foreground: 255 255 255;
  
  --background: 0 0 0; /* black */
  --foreground: 255 255 255;
  
  --card: 17 24 39; /* gray-900 */
  --card-foreground: 255 255 255;
  
  --popover: 17 24 39;
  --popover-foreground: 255 255 255;
  
  --muted: 55 65 81; /* gray-700 */
  --muted-foreground: 156 163 175; /* gray-400 */
  
  --destructive: 239 68 68; /* red-500 */
  --destructive-foreground: 255 255 255;
  
  --border: 75 85 99; /* gray-600 */
  --input: 55 65 81; /* gray-700 */
  --ring: 147 51 234; /* purple-600 */
  
  --radius: 0.75rem;
  
  /* Custom gradients */
  --gradient-primary: linear-gradient(135deg, rgb(147, 51, 234), rgb(6, 182, 212));
  --gradient-secondary: linear-gradient(135deg, rgb(219, 39, 119), rgb(147, 51, 234));
  --gradient-accent: linear-gradient(135deg, rgb(6, 182, 212), rgb(147, 197, 253));
  
  /* Glow effects */
  --glow-purple: 0 0 20px rgba(147, 51, 234, 0.5);
  --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.5);
  --glow-pink: 0 0 20px rgba(219, 39, 119, 0.5);
}

/* Dynamic animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes glow {
  0%, 100% { box-shadow: var(--glow-purple); }
  50% { box-shadow: var(--glow-cyan); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Particle animation */
.particle {
  animation: float 4s ease-in-out infinite;
}

/* Glassmorphism effects */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Holographic effects */
.holographic {
  background: linear-gradient(45deg, 
    rgba(147, 51, 234, 0.3), 
    rgba(6, 182, 212, 0.3), 
    rgba(219, 39, 119, 0.3)
  );
  background-size: 300% 300%;
  animation: holographic 3s ease-in-out infinite;
}

@keyframes holographic {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Neon text effects */
.neon-text {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.8);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgb(147, 51, 234), rgb(6, 182, 212));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgb(126, 34, 206), rgb(8, 145, 178));
}