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

@layer components {
  .btn          { @apply inline-flex items-center px-4 py-2 rounded-md font-medium text-sm transition; }
  .btn-primary  { @apply btn bg-brand-600 text-white hover:bg-brand-700; }
  .btn-secondary{ @apply btn bg-white text-gray-700 border border-gray-300 hover:bg-gray-50; }
  .btn-danger   { @apply btn bg-red-600 text-white hover:bg-red-700; }
  .card         { @apply bg-white rounded-lg shadow-sm border border-gray-200; }
  .label-input  { @apply block text-sm font-medium text-gray-700 mb-1; }
  .text-input   { @apply block w-full rounded-md border-gray-300 shadow-sm focus:ring-brand-600 focus:border-brand-600 px-3 py-2 border; }
}