.ui-badge {
  align-items: center;
  background: var(--ui-badge-bg, var(--ui-surface-muted));
  border: 1px solid var(--ui-badge-border, var(--ui-border-strong));
  border-radius: var(--ui-radius-pill);
  color: var(--ui-badge-text, var(--ui-text-secondary));
  display: inline-flex;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  gap: var(--ui-space-1);
  line-height: 1;
  min-height: var(--ui-badge-height, 1.375rem);
  padding: var(--ui-badge-padding, 0.1875rem var(--ui-space-2));
  vertical-align: middle;
}

.ui-badge--sm {
  --ui-badge-height: 1.125rem;
  --ui-badge-padding: 0 var(--ui-space-2);
}

.ui-badge--success {
  background: var(--ui-color-success-muted);
  border-color: var(--ui-color-success-strong);
  color: var(--ui-color-success-on-muted);
}

.ui-badge--warning {
  background: var(--ui-color-warning-muted);
  border-color: var(--ui-color-warning-strong);
  color: var(--ui-color-warning-on-muted);
}

.ui-badge--danger {
  background: var(--ui-color-danger-muted);
  border-color: var(--ui-color-danger-strong);
  color: var(--ui-color-danger-on-muted);
}

.ui-badge--info {
  background: var(--ui-color-info-muted);
  border-color: var(--ui-color-info-strong);
  color: var(--ui-color-info-on-muted);
}

.ui-badge--muted {
  background: var(--ui-surface-muted);
  border-color: var(--ui-border-subtle);
  color: var(--ui-text-muted);
}

.ui-count-badge {
  align-items: center;
  background: var(--ui-count-badge-bg, var(--ui-color-action));
  border: 1px solid var(--ui-count-badge-border, transparent);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-count-badge-text, var(--ui-text-on-accent));
  display: inline-flex;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-bold);
  justify-content: center;
  line-height: 1;
  min-height: var(--ui-count-badge-size, 1.125rem);
  min-width: var(--ui-count-badge-size, 1.125rem);
  padding: 0 var(--ui-space-1);
  vertical-align: middle;
}

.ui-count-badge--sm {
  --ui-count-badge-size: 1rem;
  font-size: 0.6875rem;
}

.ui-count-badge--muted {
  background: var(--ui-surface-muted);
  border-color: var(--ui-border-subtle);
  color: var(--ui-text-secondary);
}