.badge {
  display: inline-block;
  padding: var(--space--xx-small) var(--space--x-small);
  border-radius: var(--border-radius--pill);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.badge--success {
  background-color: var(--color--ui-success);
  color: var(--color--text-light);
}

.badge--warning {
  background-color: var(--color--ui-warning);
  color: var(--color--text-inverse);
}

.badge--danger {
  background-color: var(--color--ui-danger);
  color: var(--color--text-light);
}

.badge--neutral {
  background-color: var(--color--gray-20);
  color: var(--color--text-inverse);
}