/*
 * mw-badge: a short status or label (docs/design-system.md, spec §5). Text on
 * a tint; every pair is checked in both themes by DesignTokensTest. Semantic
 * tokens only; MwComponentPurityTest holds it.
 *
 *   mw-badge--brand    a plan or a "most popular" label
 *   mw-badge--accent   MapWise green: "new"
 *   mw-badge--neutral  a quiet count
 *   mw-badge--success, --warning, --danger  status
 */
.mw-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.mw-badge--brand {
  background: var(--color-selected);
  color: var(--color-primary-text);
}

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

.mw-badge--neutral {
  background: var(--color-ground-neutral);
  color: var(--color-text-secondary);
}

.mw-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

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

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