/**
 * Badge Component — Almutaheda Pack
 *
 * Inline label for status, category, and product attributes.
 * Variants: default, primary, accent, success, warning, error, info, outline
 */

/* ─── Base ────────────────────────────────────────────────────────── */

.alm-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            var(--alm-space-1);
	padding-block:  var(--alm-space-0-5);
	padding-inline: var(--alm-space-2-5);
	font-size:      var(--alm-text-xs);
	font-weight:    var(--alm-weight-semibold);
	line-height:    var(--alm-leading-snug);
	border-radius:  var(--alm-radius-full);
	white-space:    nowrap;
	vertical-align: middle;
	border:         var(--alm-border-width) solid transparent;
}

/* ─── Variants ────────────────────────────────────────────────────── */

.alm-badge--default {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-badge--primary {
	background-color: var(--alm-color-navy-primary);
	color:            var(--alm-color-white);
}

.alm-badge--accent {
	background-color: var(--alm-color-sand-light);
	color:            var(--alm-color-navy-primary);
}

.alm-badge--accent-solid {
	background-color: var(--alm-color-sand);
	color:            var(--alm-color-navy-primary);
}

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

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

.alm-badge--error {
	background-color: var(--alm-color-error-bg);
	color:            var(--alm-color-error);
}

.alm-badge--info {
	background-color: var(--alm-color-info-bg);
	color:            var(--alm-color-info);
}

/* Outline variants */
.alm-badge--outline {
	background-color: transparent;
	border-color:     currentColor;
	color:            var(--alm-color-navy-primary);
}

.alm-badge--outline-success {
	background-color: transparent;
	border-color:     var(--alm-color-success);
	color:            var(--alm-color-success);
}

.alm-badge--outline-error {
	background-color: transparent;
	border-color:     var(--alm-color-error);
	color:            var(--alm-color-error);
}

/* ─── Size modifiers ──────────────────────────────────────────────── */

.alm-badge--sm {
	font-size:      0.6875rem; /* 11px */
	padding-block:  1px;
	padding-inline: var(--alm-space-2);
}

.alm-badge--md {
	font-size:      var(--alm-text-sm);
	padding-block:  var(--alm-space-1);
	padding-inline: var(--alm-space-3);
}

/* ─── Square badge (for counts, notifications) ────────────────────── */

.alm-badge--count {
	min-width:      1.375rem;
	height:         1.375rem;
	padding-inline: var(--alm-space-1);
	justify-content: center;
	border-radius:  var(--alm-radius-full);
}

/* ─── Dot indicator ───────────────────────────────────────────────── */

.alm-badge--dot {
	padding-inline-start: var(--alm-space-1-5);
}

.alm-badge--dot::before {
	content:       "";
	display:       inline-block;
	width:         0.5rem;
	height:        0.5rem;
	border-radius: var(--alm-radius-full);
	background-color: currentColor;
	flex-shrink:   0;
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND FOUNDATION REFRESH — 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-badge {
	letter-spacing: 0.01em;
	box-shadow: inset 0 0 0 1px rgba(14, 34, 58, 0.03);
}

.alm-badge--accent {
	background: var(--alm-color-sand-light);
	color: var(--alm-color-copper-deep);
}

.alm-badge--accent-solid {
	background: var(--alm-color-copper);
	color: var(--alm-color-navy-primary);
}

.alm-badge--primary {
	background: var(--alm-color-navy-primary);
	color: var(--alm-color-white);
}