Consolidate badge and status pills onto Chip

[talissoncosta]

Four components draw the same small labelled pill by hand, and three of them hardcode their colours.

	where	uses	colours
.unread	web/styles/project/_utils.scss:68	19	#7b51fb / #fff, no dark mode
.counter-value	web/styles/components/_tabs.scss:89	1	$danger
StatusBadge	web/components/experiments/StatusBadge	2	tokens
ds-chip	web/components/base/Chip	the DS one	tokens

.unread is the widely used one and it has no dark-mode override at all, so #7b51fb on white is identical in both themes.

Where it hurts most is LifecycleSidebar, which fights the class to get a neutral pill:

className={classNames('ms-1 px-2 unread rounded d-inline', {
  'bg-light300 text-muted': activeSection !== s.key,
})}

Three of .unread's five visual decisions overridden at the call site.

What to do

Chip already is this component. It needs:

• the four status variants (success, warning, info, muted), each pairing an existing bg-surface-* with its text-* utility
• pill for fully rounded ends
• ChipDot in currentColor, so the dot follows the variant with nothing to wire
• a strong emphasis alongside the subtle one. ReviewStep__badge is solid surface-action with white text, the lifecycle active count is solid #7b51fb with white, and MetricsComparisonTable__type-badge uses surface-action-muted at 16%, where Chip's accent is 8%. Three call sites want a fill Chip does not have.

Migration order

1. StatusBadge (already token-based, like-for-like)
2. ReviewStep's two badges, MetricsComparisonTable__type-badge (needs the strong variant)
3. LifecycleSidebar count (a design decision: solid purple + white today, accent is subtle purple + purple text)
4. .unread's 19 sites, .counter-value

Out of scope

Step numbers are not chips. wizard-step__circle (32px) and the onboarding rollout quest's step number (24px) are fixed circles holding an ordinal; Chip is sized by padding and grows with its content. Tried it, and forcing the shape means overriding width and height and fighting the padding scale. Two call sites, own component if it ever earns one.

Also skip the geometry: RolloutSlider, DistributionBar, and the tracks/dots in results.scss. Round, but not labels.

Note

Chip.tsx currently says Count badges are out of scope. This reverses that deliberately.