.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--ds-spacing-unit) * 1.5) calc(var(--ds-spacing-unit) * 3);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: var(--ds-border-width) solid var(--ds-color-border);
  background: color-mix(in srgb, var(--ds-color-text) 3%, transparent);
  color: var(--ds-color-text);
}

.ds-badge--muted {
  color: var(--ds-color-secondary);
}

.ds-badge--primary {
  border-color: color-mix(in srgb, var(--ds-color-accent) 30%, var(--ds-color-border));
  background: color-mix(in srgb, var(--ds-color-accent) 10%, transparent);
  color: var(--ds-color-accent);
}