/* ─────────────────────────────────────────────────────────────────────────────
 * COLOR VARIANTS — soft (+ future: frost / gradient)
 *
 * These are *modifiers* that compose on top of any `.pair-{color}` class, the
 * same way `.bgl_flatPill` / `.bgl_pill-border` already do. Components keep
 * computing `pair-${color}` and simply add `.soft` — nothing about the existing
 * color system changes.
 *
 * SOFT = light tinted background + full-color text + full-color border.
 *   Equivalent to:  bg-{color}-30  color-{color}  border border-{color}
 *
 * To stay DRY we expose one variable per tone — `--bgl-pair-tone` — set once for
 * every shade of a color, then `.soft` derives bg / text / border from it via
 * color-mix(). One rule covers all 13 tones × all 13 shades.
 * ──────────────────────────────────────────────────────────────────────────── */

/* 1) Map every pair tone to a --bgl-pair-tone custom property that soft / frost /
 *    gradient read from.
 *
 *    Base + light/tint/dark/semantic aliases map to the BASE token. Each numeric
 *    shade (10..130) maps to ITS OWN shade token, so `pair-<tone>-<shade>` +
 *    soft/frost/gradient honour the shade instead of collapsing back to the base
 *    tone. (e.g. `<Card color="black-110" gradient>` now sweeps the -110 navy,
 *    not plain --bgl-black.) */
.pair-primary, .pair-default,
.pair-primary-light, .pair-primary-tint { --bgl-pair-tone: var(--bgl-primary); }
.pair-primary-10 { --bgl-pair-tone: var(--bgl-primary-10); } .pair-primary-20 { --bgl-pair-tone: var(--bgl-primary-20); } .pair-primary-30 { --bgl-pair-tone: var(--bgl-primary-30); } .pair-primary-40 { --bgl-pair-tone: var(--bgl-primary-40); } .pair-primary-50 { --bgl-pair-tone: var(--bgl-primary-50); }
.pair-primary-60 { --bgl-pair-tone: var(--bgl-primary-60); } .pair-primary-70 { --bgl-pair-tone: var(--bgl-primary-70); } .pair-primary-80 { --bgl-pair-tone: var(--bgl-primary-80); } .pair-primary-90 { --bgl-pair-tone: var(--bgl-primary-90); } .pair-primary-100 { --bgl-pair-tone: var(--bgl-primary-100); }
.pair-primary-110 { --bgl-pair-tone: var(--bgl-primary-110); } .pair-primary-120 { --bgl-pair-tone: var(--bgl-primary-120); } .pair-primary-130 { --bgl-pair-tone: var(--bgl-primary-130); }

.pair-blue, .pair-info,
.pair-blue-light, .pair-blue-tint, .pair-blue-dark { --bgl-pair-tone: var(--bgl-blue); }
.pair-blue-10 { --bgl-pair-tone: var(--bgl-blue-10); } .pair-blue-20 { --bgl-pair-tone: var(--bgl-blue-20); } .pair-blue-30 { --bgl-pair-tone: var(--bgl-blue-30); } .pair-blue-40 { --bgl-pair-tone: var(--bgl-blue-40); } .pair-blue-50 { --bgl-pair-tone: var(--bgl-blue-50); }
.pair-blue-60 { --bgl-pair-tone: var(--bgl-blue-60); } .pair-blue-70 { --bgl-pair-tone: var(--bgl-blue-70); } .pair-blue-80 { --bgl-pair-tone: var(--bgl-blue-80); } .pair-blue-90 { --bgl-pair-tone: var(--bgl-blue-90); } .pair-blue-100 { --bgl-pair-tone: var(--bgl-blue-100); }
.pair-blue-110 { --bgl-pair-tone: var(--bgl-blue-110); } .pair-blue-120 { --bgl-pair-tone: var(--bgl-blue-120); } .pair-blue-130 { --bgl-pair-tone: var(--bgl-blue-130); }

.pair-green, .pair-success,
.pair-green-light { --bgl-pair-tone: var(--bgl-green); }
.pair-green-10 { --bgl-pair-tone: var(--bgl-green-10); } .pair-green-20 { --bgl-pair-tone: var(--bgl-green-20); } .pair-green-30 { --bgl-pair-tone: var(--bgl-green-30); } .pair-green-40 { --bgl-pair-tone: var(--bgl-green-40); } .pair-green-50 { --bgl-pair-tone: var(--bgl-green-50); }
.pair-green-60 { --bgl-pair-tone: var(--bgl-green-60); } .pair-green-70 { --bgl-pair-tone: var(--bgl-green-70); } .pair-green-80 { --bgl-pair-tone: var(--bgl-green-80); } .pair-green-90 { --bgl-pair-tone: var(--bgl-green-90); } .pair-green-100 { --bgl-pair-tone: var(--bgl-green-100); }
.pair-green-110 { --bgl-pair-tone: var(--bgl-green-110); } .pair-green-120 { --bgl-pair-tone: var(--bgl-green-120); } .pair-green-130 { --bgl-pair-tone: var(--bgl-green-130); }

.pair-red, .pair-danger,
.pair-red-light, .pair-red-tint { --bgl-pair-tone: var(--bgl-red); }
.pair-red-10 { --bgl-pair-tone: var(--bgl-red-10); } .pair-red-20 { --bgl-pair-tone: var(--bgl-red-20); } .pair-red-30 { --bgl-pair-tone: var(--bgl-red-30); } .pair-red-40 { --bgl-pair-tone: var(--bgl-red-40); } .pair-red-50 { --bgl-pair-tone: var(--bgl-red-50); }
.pair-red-60 { --bgl-pair-tone: var(--bgl-red-60); } .pair-red-70 { --bgl-pair-tone: var(--bgl-red-70); } .pair-red-80 { --bgl-pair-tone: var(--bgl-red-80); } .pair-red-90 { --bgl-pair-tone: var(--bgl-red-90); } .pair-red-100 { --bgl-pair-tone: var(--bgl-red-100); }
.pair-red-110 { --bgl-pair-tone: var(--bgl-red-110); } .pair-red-120 { --bgl-pair-tone: var(--bgl-red-120); } .pair-red-130 { --bgl-pair-tone: var(--bgl-red-130); }

.pair-yellow, .pair-warning,
.pair-yellow-light { --bgl-pair-tone: var(--bgl-yellow); }
.pair-yellow-10 { --bgl-pair-tone: var(--bgl-yellow-10); } .pair-yellow-20 { --bgl-pair-tone: var(--bgl-yellow-20); } .pair-yellow-30 { --bgl-pair-tone: var(--bgl-yellow-30); } .pair-yellow-40 { --bgl-pair-tone: var(--bgl-yellow-40); } .pair-yellow-50 { --bgl-pair-tone: var(--bgl-yellow-50); }
.pair-yellow-60 { --bgl-pair-tone: var(--bgl-yellow-60); } .pair-yellow-70 { --bgl-pair-tone: var(--bgl-yellow-70); } .pair-yellow-80 { --bgl-pair-tone: var(--bgl-yellow-80); } .pair-yellow-90 { --bgl-pair-tone: var(--bgl-yellow-90); } .pair-yellow-100 { --bgl-pair-tone: var(--bgl-yellow-100); }
.pair-yellow-110 { --bgl-pair-tone: var(--bgl-yellow-110); } .pair-yellow-120 { --bgl-pair-tone: var(--bgl-yellow-120); } .pair-yellow-130 { --bgl-pair-tone: var(--bgl-yellow-130); }

.pair-purple,
.pair-purple-light { --bgl-pair-tone: var(--bgl-purple); }
.pair-purple-10 { --bgl-pair-tone: var(--bgl-purple-10); } .pair-purple-20 { --bgl-pair-tone: var(--bgl-purple-20); } .pair-purple-30 { --bgl-pair-tone: var(--bgl-purple-30); } .pair-purple-40 { --bgl-pair-tone: var(--bgl-purple-40); } .pair-purple-50 { --bgl-pair-tone: var(--bgl-purple-50); }
.pair-purple-60 { --bgl-pair-tone: var(--bgl-purple-60); } .pair-purple-70 { --bgl-pair-tone: var(--bgl-purple-70); } .pair-purple-80 { --bgl-pair-tone: var(--bgl-purple-80); } .pair-purple-90 { --bgl-pair-tone: var(--bgl-purple-90); } .pair-purple-100 { --bgl-pair-tone: var(--bgl-purple-100); }
.pair-purple-110 { --bgl-pair-tone: var(--bgl-purple-110); } .pair-purple-120 { --bgl-pair-tone: var(--bgl-purple-120); } .pair-purple-130 { --bgl-pair-tone: var(--bgl-purple-130); }

.pair-brown,
.pair-brown-light { --bgl-pair-tone: var(--bgl-brown); }
.pair-brown-10 { --bgl-pair-tone: var(--bgl-brown-10); } .pair-brown-20 { --bgl-pair-tone: var(--bgl-brown-20); } .pair-brown-30 { --bgl-pair-tone: var(--bgl-brown-30); } .pair-brown-40 { --bgl-pair-tone: var(--bgl-brown-40); } .pair-brown-50 { --bgl-pair-tone: var(--bgl-brown-50); }
.pair-brown-60 { --bgl-pair-tone: var(--bgl-brown-60); } .pair-brown-70 { --bgl-pair-tone: var(--bgl-brown-70); } .pair-brown-80 { --bgl-pair-tone: var(--bgl-brown-80); } .pair-brown-90 { --bgl-pair-tone: var(--bgl-brown-90); } .pair-brown-100 { --bgl-pair-tone: var(--bgl-brown-100); }
.pair-brown-110 { --bgl-pair-tone: var(--bgl-brown-110); } .pair-brown-120 { --bgl-pair-tone: var(--bgl-brown-120); } .pair-brown-130 { --bgl-pair-tone: var(--bgl-brown-130); }

.pair-orange,
.pair-orange-light { --bgl-pair-tone: var(--bgl-orange); }
.pair-orange-10 { --bgl-pair-tone: var(--bgl-orange-10); } .pair-orange-20 { --bgl-pair-tone: var(--bgl-orange-20); } .pair-orange-30 { --bgl-pair-tone: var(--bgl-orange-30); } .pair-orange-40 { --bgl-pair-tone: var(--bgl-orange-40); } .pair-orange-50 { --bgl-pair-tone: var(--bgl-orange-50); }
.pair-orange-60 { --bgl-pair-tone: var(--bgl-orange-60); } .pair-orange-70 { --bgl-pair-tone: var(--bgl-orange-70); } .pair-orange-80 { --bgl-pair-tone: var(--bgl-orange-80); } .pair-orange-90 { --bgl-pair-tone: var(--bgl-orange-90); } .pair-orange-100 { --bgl-pair-tone: var(--bgl-orange-100); }
.pair-orange-110 { --bgl-pair-tone: var(--bgl-orange-110); } .pair-orange-120 { --bgl-pair-tone: var(--bgl-orange-120); } .pair-orange-130 { --bgl-pair-tone: var(--bgl-orange-130); }

.pair-turquoise,
.pair-turquoise-light { --bgl-pair-tone: var(--bgl-turquoise); }
.pair-turquoise-10 { --bgl-pair-tone: var(--bgl-turquoise-10); } .pair-turquoise-20 { --bgl-pair-tone: var(--bgl-turquoise-20); } .pair-turquoise-30 { --bgl-pair-tone: var(--bgl-turquoise-30); } .pair-turquoise-40 { --bgl-pair-tone: var(--bgl-turquoise-40); } .pair-turquoise-50 { --bgl-pair-tone: var(--bgl-turquoise-50); }
.pair-turquoise-60 { --bgl-pair-tone: var(--bgl-turquoise-60); } .pair-turquoise-70 { --bgl-pair-tone: var(--bgl-turquoise-70); } .pair-turquoise-80 { --bgl-pair-tone: var(--bgl-turquoise-80); } .pair-turquoise-90 { --bgl-pair-tone: var(--bgl-turquoise-90); } .pair-turquoise-100 { --bgl-pair-tone: var(--bgl-turquoise-100); }
.pair-turquoise-110 { --bgl-pair-tone: var(--bgl-turquoise-110); } .pair-turquoise-120 { --bgl-pair-tone: var(--bgl-turquoise-120); } .pair-turquoise-130 { --bgl-pair-tone: var(--bgl-turquoise-130); }

.pair-pink,
.pair-pink-light { --bgl-pair-tone: var(--bgl-pink); }
.pair-pink-10 { --bgl-pair-tone: var(--bgl-pink-10); } .pair-pink-20 { --bgl-pair-tone: var(--bgl-pink-20); } .pair-pink-30 { --bgl-pair-tone: var(--bgl-pink-30); } .pair-pink-40 { --bgl-pair-tone: var(--bgl-pink-40); } .pair-pink-50 { --bgl-pair-tone: var(--bgl-pink-50); }
.pair-pink-60 { --bgl-pair-tone: var(--bgl-pink-60); } .pair-pink-70 { --bgl-pair-tone: var(--bgl-pink-70); } .pair-pink-80 { --bgl-pair-tone: var(--bgl-pink-80); } .pair-pink-90 { --bgl-pair-tone: var(--bgl-pink-90); } .pair-pink-100 { --bgl-pair-tone: var(--bgl-pink-100); }
.pair-pink-110 { --bgl-pair-tone: var(--bgl-pink-110); } .pair-pink-120 { --bgl-pair-tone: var(--bgl-pink-120); } .pair-pink-130 { --bgl-pair-tone: var(--bgl-pink-130); }

.pair-gray,
.pair-gray-light, .pair-gray-tint { --bgl-pair-tone: var(--bgl-gray); }
.pair-gray-10 { --bgl-pair-tone: var(--bgl-gray-10); } .pair-gray-20 { --bgl-pair-tone: var(--bgl-gray-20); } .pair-gray-30 { --bgl-pair-tone: var(--bgl-gray-30); } .pair-gray-40 { --bgl-pair-tone: var(--bgl-gray-40); } .pair-gray-50 { --bgl-pair-tone: var(--bgl-gray-50); }
.pair-gray-60 { --bgl-pair-tone: var(--bgl-gray-60); } .pair-gray-70 { --bgl-pair-tone: var(--bgl-gray-70); } .pair-gray-80 { --bgl-pair-tone: var(--bgl-gray-80); } .pair-gray-90 { --bgl-pair-tone: var(--bgl-gray-90); } .pair-gray-100 { --bgl-pair-tone: var(--bgl-gray-100); }
.pair-gray-110 { --bgl-pair-tone: var(--bgl-gray-110); } .pair-gray-120 { --bgl-pair-tone: var(--bgl-gray-120); } .pair-gray-130 { --bgl-pair-tone: var(--bgl-gray-130); }

.pair-black,
.pair-black-tint { --bgl-pair-tone: var(--bgl-black); }
.pair-black-10 { --bgl-pair-tone: var(--bgl-black-10); } .pair-black-20 { --bgl-pair-tone: var(--bgl-black-20); } .pair-black-30 { --bgl-pair-tone: var(--bgl-black-30); } .pair-black-40 { --bgl-pair-tone: var(--bgl-black-40); } .pair-black-50 { --bgl-pair-tone: var(--bgl-black-50); }
.pair-black-60 { --bgl-pair-tone: var(--bgl-black-60); } .pair-black-70 { --bgl-pair-tone: var(--bgl-black-70); } .pair-black-80 { --bgl-pair-tone: var(--bgl-black-80); } .pair-black-90 { --bgl-pair-tone: var(--bgl-black-90); } .pair-black-100 { --bgl-pair-tone: var(--bgl-black-100); }
.pair-black-110 { --bgl-pair-tone: var(--bgl-black-110); } .pair-black-120 { --bgl-pair-tone: var(--bgl-black-120); } .pair-black-130 { --bgl-pair-tone: var(--bgl-black-130); }

.pair-white { --bgl-pair-tone: var(--bgl-white); }

/* 2) SOFT modifier — applies on any element carrying a pair-* class.
 *    bg ≈ 18% tint, border ≈ full tone, text = full tone. */
[class*="pair-"].soft {
	background-color: color-mix(in srgb, var(--bgl-pair-tone) 18%, transparent) !important;
	color: var(--bgl-pair-tone) !important;
	border: 1px solid var(--bgl-pair-tone) !important;
}

/* White is special: a white tone on a light surface needs dark text/border. */
.pair-white.soft {
	color: var(--bgl-black) !important;
	border-color: var(--bgl-black) !important;
}

/* 3) FROST modifier — translucent + blur, tinted by the pair color.
 *    Like `soft` but glassier: lower-opacity fill, a blurred backdrop, and a
 *    faint same-tone border. Shines over photos / gradients / dark heroes.
 *    Text uses the full tone so it stays legible on the light translucent fill. */
[class*="pair-"].frost {
	/* `--bgl-pair-tone` falls back to white so a frost with no color (or before a
	   tone is mapped) renders as the classic light-on-dark glass. */
	background-color: color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-white)) 14%, transparent) !important;
	color: var(--bgl-pair-tone, var(--bgl-white)) !important;
	border: 1px solid color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-white)) 35%, transparent) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.pair-white.frost {
	color: var(--bgl-white) !important;
}

/* 4) GRADIENT modifier — a colored linear gradient + white text.
 *
 *  Works two ways, both pure CSS so it applies to <div> as well as components:
 *
 *  a) Automatic (just a pair class): sweeps from the tone to a darker shade of
 *     itself.    <div class="pair-blue gradient">
 *
 *  b) Explicit stops: provide --bgl-grad-from / --bgl-grad-via / --bgl-grad-to
 *     (and optionally --bgl-grad-angle). The Btn/Badge components inject these
 *     from their `gradient` / `gradient-dir` props, and the existing
 *     gradients.css utilities (from-*, via-*, to-*, to-tr, …) compose too.
 *
 *  The `via` slot collapses to nothing when unset (2-stop), expands when set
 *  (3-stop) — exactly like gradients.css. */
[class*="pair-"].gradient {
	/* Auto (single-tone) gradient: a vivid sweep from a lighter take on the tone
	   to a darker one, giving real depth without going muddy.

	   IMPORTANT: gradients.css declares --bgl-grad-from/to on :root (= transparent),
	   so a `var(--bgl-grad-from, fallback)` would never use the fallback. We instead
	   *set* --bgl-grad-from/to right here to the auto values. The Btn/Badge
	   components override them again via inline style for explicit 2–3 stop
	   gradients, and gradients.css `from-*`/`to-*` utilities still win by being
	   later/inline. */
	--bgl-grad-from: color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-primary)) 90%, #fff);
	--bgl-grad-to: color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-primary)) 55%, #000);
	background-image: linear-gradient(
		var(--bgl-grad-angle, 135deg),
		var(--bgl-grad-from),
		var(--bgl-grad-via, ) var(--bgl-grad-to)
	) !important;
	color: var(--bgl-white) !important;
	border: none !important;
}

/* New role colors — tone map */
.pair-secondary,
.pair-secondary-light, .pair-secondary-tint { --bgl-pair-tone: var(--bgl-secondary); }
.pair-secondary-10 { --bgl-pair-tone: var(--bgl-secondary-10); } .pair-secondary-20 { --bgl-pair-tone: var(--bgl-secondary-20); } .pair-secondary-30 { --bgl-pair-tone: var(--bgl-secondary-30); } .pair-secondary-40 { --bgl-pair-tone: var(--bgl-secondary-40); } .pair-secondary-50 { --bgl-pair-tone: var(--bgl-secondary-50); }
.pair-secondary-60 { --bgl-pair-tone: var(--bgl-secondary-60); } .pair-secondary-70 { --bgl-pair-tone: var(--bgl-secondary-70); } .pair-secondary-80 { --bgl-pair-tone: var(--bgl-secondary-80); } .pair-secondary-90 { --bgl-pair-tone: var(--bgl-secondary-90); } .pair-secondary-100 { --bgl-pair-tone: var(--bgl-secondary-100); }
.pair-secondary-110 { --bgl-pair-tone: var(--bgl-secondary-110); } .pair-secondary-120 { --bgl-pair-tone: var(--bgl-secondary-120); } .pair-secondary-130 { --bgl-pair-tone: var(--bgl-secondary-130); }

.pair-tertiary,
.pair-tertiary-light, .pair-tertiary-tint { --bgl-pair-tone: var(--bgl-tertiary); }
.pair-tertiary-10 { --bgl-pair-tone: var(--bgl-tertiary-10); } .pair-tertiary-20 { --bgl-pair-tone: var(--bgl-tertiary-20); } .pair-tertiary-30 { --bgl-pair-tone: var(--bgl-tertiary-30); } .pair-tertiary-40 { --bgl-pair-tone: var(--bgl-tertiary-40); } .pair-tertiary-50 { --bgl-pair-tone: var(--bgl-tertiary-50); }
.pair-tertiary-60 { --bgl-pair-tone: var(--bgl-tertiary-60); } .pair-tertiary-70 { --bgl-pair-tone: var(--bgl-tertiary-70); } .pair-tertiary-80 { --bgl-pair-tone: var(--bgl-tertiary-80); } .pair-tertiary-90 { --bgl-pair-tone: var(--bgl-tertiary-90); } .pair-tertiary-100 { --bgl-pair-tone: var(--bgl-tertiary-100); }
.pair-tertiary-110 { --bgl-pair-tone: var(--bgl-tertiary-110); } .pair-tertiary-120 { --bgl-pair-tone: var(--bgl-tertiary-120); } .pair-tertiary-130 { --bgl-pair-tone: var(--bgl-tertiary-130); }

.pair-quaternary,
.pair-quaternary-light, .pair-quaternary-tint { --bgl-pair-tone: var(--bgl-quaternary); }
.pair-quaternary-10 { --bgl-pair-tone: var(--bgl-quaternary-10); } .pair-quaternary-20 { --bgl-pair-tone: var(--bgl-quaternary-20); } .pair-quaternary-30 { --bgl-pair-tone: var(--bgl-quaternary-30); } .pair-quaternary-40 { --bgl-pair-tone: var(--bgl-quaternary-40); } .pair-quaternary-50 { --bgl-pair-tone: var(--bgl-quaternary-50); }
.pair-quaternary-60 { --bgl-pair-tone: var(--bgl-quaternary-60); } .pair-quaternary-70 { --bgl-pair-tone: var(--bgl-quaternary-70); } .pair-quaternary-80 { --bgl-pair-tone: var(--bgl-quaternary-80); } .pair-quaternary-90 { --bgl-pair-tone: var(--bgl-quaternary-90); } .pair-quaternary-100 { --bgl-pair-tone: var(--bgl-quaternary-100); }
.pair-quaternary-110 { --bgl-pair-tone: var(--bgl-quaternary-110); } .pair-quaternary-120 { --bgl-pair-tone: var(--bgl-quaternary-120); } .pair-quaternary-130 { --bgl-pair-tone: var(--bgl-quaternary-130); }