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

@layer base {
  body {
    @apply bg-slate-950 text-slate-100 antialiased;
  }

  ::selection {
    @apply bg-indigo-500/30;
  }
}

@layer components {
  .card {
    @apply bg-slate-900/80 backdrop-blur-sm border border-slate-800 rounded-2xl;
  }

  .card-hover {
    @apply transition-all duration-300 hover:border-slate-700 hover:shadow-xl hover:shadow-indigo-500/5;
  }

  .btn {
    @apply px-4 py-2 rounded-xl font-medium transition-all duration-200;
  }

  .btn-primary {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-500 hover:to-purple-500 shadow-lg shadow-indigo-500/25;
  }

  .btn-secondary {
    @apply bg-slate-800 text-slate-200 hover:bg-slate-700 border border-slate-700;
  }

  .code-block {
    @apply bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-sm overflow-x-auto;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent;
  }

  .glow {
    @apply relative;
  }

  .glow::before {
    content: '';
    @apply absolute -inset-1 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl blur-lg opacity-25;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #475569 #1e293b;
  }

  .scrollbar-thin::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    @apply bg-slate-900 rounded-full;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-slate-700 rounded-full;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-600;
  }
}