/**
 * Badge component (Style Guide 07 — tag / badge)
 *
 * Small, square, uppercase mono label. Clay by default: sale tags,
 * highlights and alerts.
 *
 * Usage:
 *   <span class="badge">Sale</span>
 *   <span class="badge badge--forest">New</span>
 *   <span class="badge badge--outline">Last one</span>
 */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	line-height: 1.4;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--color-accent);
	color: var(--color-inverse);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-none);
}

/* --- Variants --- */

.badge--clay {
	background: var(--color-accent);
	color: var(--color-inverse);
}

.badge--forest {
	background: var(--color-primary);
	color: var(--color-inverse);
}

.badge--sage {
	background: var(--color-surface-strong);
	color: var(--color-heading);
}

.badge--outline {
	background: transparent;
	color: var(--color-heading);
	border-color: var(--color-border-strong);
}

.badge--muted {
	background: var(--color-surface-muted);
	color: var(--color-muted);
}

/* --- Sizes --- */

.badge--sm {
	padding: 0 var(--space-2);
	font-size: 0.625rem;
}

.badge--lg {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
}

/**
 * Positioned badge — pinned inside a card or product image.
 * The parent needs `position: relative` (.card__media already has it).
 */
.badge--pinned {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
}

.badge--pinned-right {
	left: auto;
	right: var(--space-3);
}