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

@layer base {
  body {
    @apply antialiased;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-synor-600 hover:bg-synor-700 text-white;
  }

  .btn-secondary {
    @apply bg-slate-700 hover:bg-slate-600 text-white;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white;
  }

  .input {
    @apply w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-synor-500 focus:border-transparent
           placeholder-slate-500;
  }

  .card {
    @apply bg-slate-800 rounded-xl p-6 shadow-lg;
  }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-500;
}