.badge {
  display: inline-block;
  padding: var(--space-2) var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body-xs);
  white-space: nowrap;
}

.badge--neutral {
  background: var(--surface-hover);
  color: var(--text-muted);
}

.badge--outline {
  background: var(--surface-card);
  box-shadow: inset 0 0 0 var(--border-width) var(--interactive);
  color: var(--text-brand);
}

.badge--success {
  background: var(--success);
  color: var(--white);
}

.badge--info {
  background: var(--info-bg);
  color: var(--text-body);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--text-body);
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}