/*
 * Badge (Badge.jsx dell'oracolo) — pillola di stato compatta. Nessun blocco
 * WordPress nativo: classe di utilità .fm-badge, applicabile a qualunque
 * elemento inline (di solito uno <span>) via "Classi CSS aggiuntive".
 *
 * Le tonalità impostano tre custom property locali (colore testo/sfondo
 * soft/colore pieno); le varianti le consumano. 7 classi tonalità + 4
 * varianti invece di 28 combinazioni scritte a mano.
 *
 * 3 tonalità (success/warning/danger) hanno un colore testo "soft" che
 * nell'oracolo è un letterale (#1B7A47/#9A6608/#A21F31), non un token della
 * rampa — copiato fedelmente come token dedicato (badge-tone-text),
 * nessun alias inventato al posto suo.
 */

.fm-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: var(--wp--custom--badge-padding--md--y) var(--wp--custom--badge-padding--md--x);
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: var(--wp--custom--fw--semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
	/* tonalità di default = neutral, se nessuna classe is-tone-* è applicata */
	--badge-c: var(--wp--preset--color--ink-700);
	--badge-bg: var(--wp--preset--color--ink-100);
	--badge-solid: var(--wp--preset--color--ink-700);
	/* variante di default = soft */
	background: var(--badge-bg);
	color: var(--badge-c);
	border: var(--wp--custom--border-width--hair) solid transparent;
}

.fm-badge.is-size-sm {
	padding: var(--wp--custom--badge-padding--sm--y) var(--wp--custom--badge-padding--sm--x);
	font-size: var(--wp--preset--font-size--xxxs);
}

/* ---- Tonalità ---- */
.fm-badge.is-tone-neutral {
	--badge-c: var(--wp--preset--color--ink-700);
	--badge-bg: var(--wp--preset--color--ink-100);
	--badge-solid: var(--wp--preset--color--ink-700);
}
.fm-badge.is-tone-flash {
	--badge-c: var(--wp--preset--color--pink-700);
	--badge-bg: var(--wp--preset--color--pink-50);
	--badge-solid: var(--wp--preset--color--flash-pink);
}
.fm-badge.is-tone-orange {
	--badge-c: var(--wp--preset--color--orange-700);
	--badge-bg: var(--wp--preset--color--orange-50);
	--badge-solid: var(--wp--preset--color--flash-orange);
}
.fm-badge.is-tone-violet {
	--badge-c: var(--wp--preset--color--violet-700);
	--badge-bg: var(--wp--preset--color--violet-50);
	--badge-solid: var(--wp--preset--color--flash-violet);
}
.fm-badge.is-tone-success {
	--badge-c: var(--wp--custom--badge-tone-text--success);
	--badge-bg: var(--wp--preset--color--success-bg);
	--badge-solid: var(--wp--preset--color--success);
}
.fm-badge.is-tone-warning {
	--badge-c: var(--wp--custom--badge-tone-text--warning);
	--badge-bg: var(--wp--preset--color--warning-bg);
	--badge-solid: var(--wp--preset--color--warning);
}
.fm-badge.is-tone-danger {
	--badge-c: var(--wp--custom--badge-tone-text--danger);
	--badge-bg: var(--wp--preset--color--danger-bg);
	--badge-solid: var(--wp--preset--color--danger);
}

/* ---- Varianti (soft = stile di default sopra, non serve ripeterlo) ---- */
.fm-badge.is-variant-solid {
	background: var(--badge-solid);
	color: var(--wp--custom--on-accent);
	border-color: transparent;
}
.fm-badge.is-variant-outline {
	background: transparent;
	color: var(--badge-c);
	border-color: var(--badge-c);
}
.fm-badge.is-variant-gradient {
	background: var(--wp--preset--gradient--flash);
	color: var(--wp--custom--on-accent);
	border-color: transparent;
}