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

@layer base {
  body {
    @apply bg-dark-200 text-white;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
  }
  
  .glass-hover {
    @apply transition-all hover:bg-white/10 hover:border-white/20;
  }
  
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500;
  }
  
  .gradient-border {
    @apply relative bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 p-[2px] rounded-2xl;
  }
  
  .gradient-bg {
    @apply bg-gradient-to-br from-purple-900/20 via-pink-900/20 to-cyan-900/20;
  }
}

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

::-webkit-scrollbar-track {
  @apply bg-dark-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-purple-500/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-purple-500/50;
}