/* =============================================================================
	 Badge / status chip
	 Semantic color cues.
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            var(--shiftora-space-1);
	padding:        0.2rem 0.5rem;
	border:         1px solid transparent;
	border-radius:  var(--shiftora-radius-full);
	font-size:      11px;
	font-weight:    var(--shiftora-font-weight-semibold);
	line-height:    var(--shiftora-line-height-tight);
	white-space:    nowrap;
	text-transform: uppercase;
	letter-spacing: var(--shiftora-tracking-wider);
}

.shiftora-badge--xs {
	font-size: 10px;
	padding:   0.1rem 0.4rem;
}

/* Dot indicator */
.shiftora-badge::before {
	content:       '';
	display:       inline-block;
	inline-size:   0.35rem;
	block-size:    0.35rem;
	border-radius: 50%;
	background:    currentColor;
	flex-shrink:   0;
}

.shiftora-badge--no-dot::before {
	display: none;
}

/* ── Semantic variants ───────────────────────────────────────────────── */

.shiftora-badge--neutral {
	background-color: var(--shiftora-n-150);
	border-color:     var(--shiftora-n-300);
	color:            var(--shiftora-color-text-secondary);
}

.shiftora-badge--muted {
	background-color: var(--shiftora-n-100);
	border-color:     var(--shiftora-color-border-light);
	color:            var(--shiftora-color-text-muted);
}

.shiftora-badge--primary {
	background-color: var(--shiftora-color-info-bg);
	border-color:     var(--shiftora-color-info-border);
	color:            var(--shiftora-color-info-text);
}

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

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

.shiftora-badge--danger {
	background-color: var(--shiftora-color-error-bg);
	border-color:     var(--shiftora-color-error-border);
	color:            var(--shiftora-color-error-text);
}

.shiftora-badge--info {
	background-color: var(--shiftora-color-info-bg);
	border-color:     var(--shiftora-color-info-border);
	color:            var(--shiftora-color-info-text);
}

.shiftora-badge--brand {
	background-color: var(--shiftora-color-success-bg);
	border-color:     var(--shiftora-color-success-border);
	color:            var(--shiftora-color-success-text);
}

/* Solid variants, high emphasis */
.shiftora-badge--solid-success {
	background-color: var(--shiftora-color-success);
	border-color:     var(--shiftora-color-success);
	color:            var(--shiftora-color-on-primary);
}

.shiftora-badge--solid-danger {
	background-color: var(--shiftora-color-error);
	border-color:     var(--shiftora-color-error);
	color:            var(--shiftora-color-on-primary);
}

.shiftora-badge--solid-warning {
	background-color: var(--shiftora-color-warning);
	border-color:     var(--shiftora-color-warning);
	color:            var(--shiftora-color-on-primary);
}

.shiftora-badge--solid-primary {
	background-color: var(--shiftora-color-primary);
	border-color:     var(--shiftora-color-primary);
	color:            var(--shiftora-color-on-primary);
}