/* Badge Components
 * Badge and tag styles following BEM convention
 * Using Tailwind v4 @utility with @layer components
 */

@utility badge {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
  }
}

@utility badge--primary {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
  }
}

@utility badge--secondary {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800;
  }
}

@utility badge--success {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800;
  }
}

@utility badge--danger {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800;
  }
}

@utility badge--warning {
  @layer components {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
  }
}

@utility badge--info {
  @layer components {
    @apply bg-blue-50 text-blue-600;
  }
}

@utility badge--sm {
  @layer components {
    @apply text-xs px-1.5 py-0.5 rounded;
  }
}