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

@layer base {
  html { @apply scroll-smooth; }
  body { @apply bg-slate-50 text-slate-800 font-sans antialiased; }
}

@layer components {
  .btn { @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition active:scale-[0.98]; }
  .btn-primary { @apply btn bg-brand-600 text-white hover:bg-brand-700 shadow-sm; }
  .btn-secondary { @apply btn bg-white text-slate-700 border border-slate-300 hover:bg-slate-50; }
  .btn-danger { @apply btn bg-rose-600 text-white hover:bg-rose-700; }
  .card { @apply bg-white rounded-xl border border-slate-200 shadow-sm; }
  .input { @apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-100 outline-none transition; }
  .label { @apply block text-sm font-medium text-slate-700 mb-1; }
  .sidebar-link { @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-white/10 hover:text-white transition; }
  .sidebar-link.active { @apply bg-brand-600 text-white shadow; }
  .badge { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium; }
}