.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.badge--primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

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

.badge--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

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