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

@layer base {
  html { @apply h-full; }
  body { @apply h-full bg-slate-50 text-slate-900 antialiased; }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 transition-all;
  }
  .btn-danger {
    @apply inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 active:scale-95 transition-all;
  }
  .input {
    @apply block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20;
  }
  .card {
    @apply rounded-xl border border-slate-200 bg-white shadow-sm;
  }
}