.badge {
  display: inline-block;
  padding: var(--space-hair) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.badge--success,
.badge--error,
.badge--warning,
.badge--accent,
.badge--info {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.badge--success { color: var(--color-success); }
.badge--error { color: var(--color-error); }
.badge--warning { color: var(--color-warning); }
.badge--accent { color: var(--color-accent); }
.badge--info { color: var(--color-info); }

.badge--caps {
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}