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

body {
  @apply bg-slate-100 text-gray-900 antialiased;
}

@layer components {
  .btn-primary {
    @apply rounded-lg bg-primary-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-primary-700 hover:shadow disabled:opacity-50;
  }

  .btn-secondary {
    @apply rounded-lg border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-gray-600 shadow-sm transition hover:bg-gray-50;
  }

  .input-field {
    @apply w-full rounded-lg border border-gray-200 bg-gray-50/50 px-3 py-1.5 text-sm shadow-sm transition focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:bg-gray-100;
  }

  .form-card {
    @apply rounded-xl border border-gray-100 bg-white p-4 shadow-card sm:p-5;
  }

  .table-card {
    @apply overflow-hidden rounded-xl border border-gray-100 bg-white shadow-card;
  }

  .page-title {
    @apply text-lg font-bold text-gray-900;
  }

  .page-desc {
    @apply text-xs text-gray-500;
  }
}
