/**
 * Badges & pills (§1, §8).
 */

.of-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: var(--lh-button);
	white-space: nowrap;
}

.of-badge--accent {
	background-color: var(--color-accent);
	color: var(--color-on-accent);
}

.of-badge--success {
	background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
	color: var(--color-success);
}

.of-badge--error {
	background-color: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
	color: var(--color-error);
}

.of-badge--warning {
	background-color: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
	color: var(--color-text);
}