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

@layer components {
  .btn-primary  { @apply bg-primary text-white font-semibold px-5 py-2.5 rounded-xl hover:opacity-90 transition text-sm inline-block; }
  .btn-outline  { @apply border-2 border-primary text-primary font-semibold px-5 py-2.5 rounded-xl hover:bg-primary hover:text-white transition text-sm inline-block; }

  .badge        { @apply inline-flex items-center text-xs font-semibold px-2.5 py-1 rounded-full; }
  .badge-blue   { @apply bg-blue-100 text-blue-700; }
  .badge-green  { @apply bg-emerald-100 text-emerald-700; }
  .badge-orange { @apply bg-amber-100 text-amber-700; }
  .badge-red    { @apply bg-red-100 text-red-700; }
  .badge-gray   { @apply bg-gray-100 text-gray-600; }
  .badge-teal   { @apply bg-teal-100 text-teal-700; }
  .badge-yellow { @apply bg-yellow-100 text-yellow-700; }
}