@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #020617;
  --foreground: #f8fafc;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-lg border border-white/10;
  }
  
  .glass-card {
    @apply glass rounded-2xl p-6 shadow-2xl transition-all duration-300 hover:bg-white/10 hover:border-white/20;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-primary to-indigo-500 text-white font-medium py-2 px-6 rounded-xl 
           transition-all duration-300 hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .input-field {
    @apply bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 
           focus:ring-primary/50 transition-all duration-200 placeholder:text-white/30;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.animate-glow {
  animation: bg-glow 8s ease-in-out infinite alternate;
}

@keyframes bg-glow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-cyan-400;
}