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

:root {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium shadow-sm transition focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply btn bg-brand-500 text-white hover:bg-brand-600 focus:ring-brand-500;
  }
  .btn-secondary {
    @apply btn bg-white text-slate-800 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus:ring-brand-500;
  }
  .btn-danger {
    @apply btn bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-600;
  }
  .card {
    @apply rounded-lg border border-slate-200 bg-white shadow-sm;
  }
  .table-base {
    @apply min-w-full divide-y divide-slate-200 text-sm;
  }
  .table-base th {
    @apply px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-500;
  }
  .table-base td {
    @apply whitespace-nowrap px-3 py-2 text-slate-700;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold;
  }
  .badge-draft     { @apply badge bg-slate-100 text-slate-700; }
  .badge-confirmed { @apply badge bg-amber-100 text-amber-800; }
  .badge-shipped   { @apply badge bg-emerald-100 text-emerald-800; }
  .badge-received  { @apply badge bg-emerald-100 text-emerald-800; }
  .badge-completed { @apply badge bg-emerald-100 text-emerald-800; }
  .badge-cancelled { @apply badge bg-rose-100 text-rose-800; }
  .badge-in-progress { @apply badge bg-sky-100 text-sky-800; }
  .badge-pending   { @apply badge bg-slate-100 text-slate-600; }
}