.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--color-surface);
	color: var(--color-primary);
	border: 1px solid var(--color-border);
}

.badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
}

.badge--accent {
	background: var(--color-accent);
	color: var(--color-primary-dark);
	border-color: var(--color-accent);
}

.badge--accent::before {
	background: var(--color-primary-dark);
}