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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-slate-950 text-white antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-gradient-to-r from-synor-500 to-quantum-500 text-white font-semibold rounded-lg
           hover:from-synor-400 hover:to-quantum-400 transition-all duration-300
           shadow-lg shadow-synor-500/25 hover:shadow-synor-500/40;
  }

  .btn-secondary {
    @apply px-6 py-3 border border-white/20 text-white font-semibold rounded-lg
           hover:bg-white/10 transition-all duration-300 backdrop-blur-sm;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-synor-400 via-quantum-400 to-synor-400 bg-clip-text text-transparent
           bg-300% animate-gradient;
  }

  .card {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6
           hover:bg-white/10 hover:border-white/20 transition-all duration-300;
  }

  .glow {
    @apply relative;
  }

  .glow::before {
    content: '';
    @apply absolute -inset-1 bg-gradient-to-r from-synor-500 to-quantum-500 rounded-lg blur opacity-25
           group-hover:opacity-50 transition-opacity duration-300;
  }
}

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

::-webkit-scrollbar-track {
  @apply bg-slate-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-700 rounded-full hover:bg-slate-600;
}