/* ─────────────────────────────────────────────────────────────────────────────
 * GRADIENTS — a small, memorable system that mirrors the color utilities.
 *
 *   <div class="bg-gradient from-purple to-blue">
 *   <div class="bg-gradient to-tr from-pink to-orange">
 *   <div class="bg-gradient from-primary via-purple to-turquoise">
 *   <div class="text-gradient from-blue to-purple">Gorgeous</div>
 *   <div class="bg-gradient-brand">           (named presets)
 *
 * How it works:
 *  - `from-<tone>` / `via-<tone>` / `to-<tone>` set --bgl-grad-from/via/to.
 *  - `bg-gradient` paints them as a linear gradient (default 135°).
 *  - direction modifiers (to-t/-b/-l/-r/-tl/-tr/-bl/-br) override the angle.
 *  - `gradient-radial` / `gradient-conic` swap the gradient type.
 *  - `text-gradient` clips the gradient to text.
 * Tokens resolve through var(--bgl-<tone>) so everything is theme + dark aware.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
	--bgl-grad-angle: 135deg;
	--bgl-grad-from: transparent;
	--bgl-grad-via: ;
	--bgl-grad-to: transparent;
}

/* ── Paint ─────────────────────────────────────────────────────────────────── */
/* The stop list collapses to 2 stops when --bgl-grad-via is empty, 3 when set. */
.bg-gradient {
	background-image: linear-gradient(
		var(--bgl-grad-angle),
		var(--bgl-grad-from),
		var(--bgl-grad-via, ) var(--bgl-grad-to)
	) !important;
}
.gradient-radial.bg-gradient,
.bg-gradient.gradient-radial {
	background-image: radial-gradient(
		circle at var(--bgl-grad-pos, center),
		var(--bgl-grad-from),
		var(--bgl-grad-via, ) var(--bgl-grad-to)
	) !important;
}
.gradient-conic.bg-gradient,
.bg-gradient.gradient-conic {
	background-image: conic-gradient(
		from var(--bgl-grad-angle),
		var(--bgl-grad-from),
		var(--bgl-grad-via, ) var(--bgl-grad-to)
	) !important;
}

/* ── Direction modifiers ───────────────────────────────────────────────────── */
.to-t  { --bgl-grad-angle: to top; }
.to-b  { --bgl-grad-angle: to bottom; }
.to-l  { --bgl-grad-angle: to left; }
.to-r  { --bgl-grad-angle: to right; }
.to-tl { --bgl-grad-angle: to top left; }
.to-tr { --bgl-grad-angle: to top right; }
.to-bl { --bgl-grad-angle: to bottom left; }
.to-br { --bgl-grad-angle: to bottom right; }

/* ── Text gradient ─────────────────────────────────────────────────────────── */
.text-gradient {
	background-image: linear-gradient(
		var(--bgl-grad-angle),
		var(--bgl-grad-from),
		var(--bgl-grad-via, ) var(--bgl-grad-to)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ── Stop utilities (generated per tone) ───────────────────────────────────── */
/* Base tones */
.from-primary   { --bgl-grad-from: var(--bgl-primary); }
.from-blue      { --bgl-grad-from: var(--bgl-blue); }
.from-green     { --bgl-grad-from: var(--bgl-green); }
.from-red       { --bgl-grad-from: var(--bgl-red); }
.from-yellow    { --bgl-grad-from: var(--bgl-yellow); }
.from-purple    { --bgl-grad-from: var(--bgl-purple); }
.from-brown     { --bgl-grad-from: var(--bgl-brown); }
.from-orange    { --bgl-grad-from: var(--bgl-orange); }
.from-turquoise { --bgl-grad-from: var(--bgl-turquoise); }
.from-pink      { --bgl-grad-from: var(--bgl-pink); }
.from-gray      { --bgl-grad-from: var(--bgl-gray); }
.from-black     { --bgl-grad-from: var(--bgl-black, #000); }
.from-white     { --bgl-grad-from: var(--bgl-white, #fff); }
.from-bg        { --bgl-grad-from: var(--bgl-bg); }
.from-box       { --bgl-grad-from: var(--bgl-box-bg); }
.from-transparent { --bgl-grad-from: transparent; }

.via-primary   { --bgl-grad-via: var(--bgl-primary), ; }
.via-blue      { --bgl-grad-via: var(--bgl-blue), ; }
.via-green     { --bgl-grad-via: var(--bgl-green), ; }
.via-red       { --bgl-grad-via: var(--bgl-red), ; }
.via-yellow    { --bgl-grad-via: var(--bgl-yellow), ; }
.via-purple    { --bgl-grad-via: var(--bgl-purple), ; }
.via-brown     { --bgl-grad-via: var(--bgl-brown), ; }
.via-orange    { --bgl-grad-via: var(--bgl-orange), ; }
.via-turquoise { --bgl-grad-via: var(--bgl-turquoise), ; }
.via-pink      { --bgl-grad-via: var(--bgl-pink), ; }
.via-gray      { --bgl-grad-via: var(--bgl-gray), ; }
.via-transparent { --bgl-grad-via: transparent, ; }

.to-primary   { --bgl-grad-to: var(--bgl-primary); }
.to-blue      { --bgl-grad-to: var(--bgl-blue); }
.to-green     { --bgl-grad-to: var(--bgl-green); }
.to-red       { --bgl-grad-to: var(--bgl-red); }
.to-yellow    { --bgl-grad-to: var(--bgl-yellow); }
.to-purple    { --bgl-grad-to: var(--bgl-purple); }
.to-brown     { --bgl-grad-to: var(--bgl-brown); }
.to-orange    { --bgl-grad-to: var(--bgl-orange); }
.to-turquoise { --bgl-grad-to: var(--bgl-turquoise); }
.to-pink      { --bgl-grad-to: var(--bgl-pink); }
.to-gray      { --bgl-grad-to: var(--bgl-gray); }
.to-black     { --bgl-grad-to: var(--bgl-black, #000); }
.to-white     { --bgl-grad-to: var(--bgl-white, #fff); }
.to-bg        { --bgl-grad-to: var(--bgl-bg); }
.to-box       { --bgl-grad-to: var(--bgl-box-bg); }
.to-transparent { --bgl-grad-to: transparent; }

/* Common tint/light/dark stops (compose with from-/to-) */
.from-primary-tint { --bgl-grad-from: var(--bgl-primary-tint); }
.to-primary-tint   { --bgl-grad-to: var(--bgl-primary-tint); }
.from-blue-tint    { --bgl-grad-from: var(--bgl-blue-tint); }
.to-blue-tint      { --bgl-grad-to: var(--bgl-blue-tint); }

/* Numeric shade stops (10..130) — compose with from-/via-/to- like base tones.
   Lets a plain-element gradient sweep shade-to-shade, e.g.
   `bg-gradient from-black-110 to-black-130`. */
.from-primary-10 { --bgl-grad-from: var(--bgl-primary-10); } .from-primary-20 { --bgl-grad-from: var(--bgl-primary-20); } .from-primary-30 { --bgl-grad-from: var(--bgl-primary-30); } .from-primary-40 { --bgl-grad-from: var(--bgl-primary-40); } .from-primary-50 { --bgl-grad-from: var(--bgl-primary-50); } .from-primary-60 { --bgl-grad-from: var(--bgl-primary-60); } .from-primary-70 { --bgl-grad-from: var(--bgl-primary-70); } .from-primary-80 { --bgl-grad-from: var(--bgl-primary-80); } .from-primary-90 { --bgl-grad-from: var(--bgl-primary-90); } .from-primary-100 { --bgl-grad-from: var(--bgl-primary-100); } .from-primary-110 { --bgl-grad-from: var(--bgl-primary-110); } .from-primary-120 { --bgl-grad-from: var(--bgl-primary-120); } .from-primary-130 { --bgl-grad-from: var(--bgl-primary-130); }
.to-primary-10 { --bgl-grad-to: var(--bgl-primary-10); } .to-primary-20 { --bgl-grad-to: var(--bgl-primary-20); } .to-primary-30 { --bgl-grad-to: var(--bgl-primary-30); } .to-primary-40 { --bgl-grad-to: var(--bgl-primary-40); } .to-primary-50 { --bgl-grad-to: var(--bgl-primary-50); } .to-primary-60 { --bgl-grad-to: var(--bgl-primary-60); } .to-primary-70 { --bgl-grad-to: var(--bgl-primary-70); } .to-primary-80 { --bgl-grad-to: var(--bgl-primary-80); } .to-primary-90 { --bgl-grad-to: var(--bgl-primary-90); } .to-primary-100 { --bgl-grad-to: var(--bgl-primary-100); } .to-primary-110 { --bgl-grad-to: var(--bgl-primary-110); } .to-primary-120 { --bgl-grad-to: var(--bgl-primary-120); } .to-primary-130 { --bgl-grad-to: var(--bgl-primary-130); }
.via-primary-10 { --bgl-grad-via: var(--bgl-primary-10), ; } .via-primary-20 { --bgl-grad-via: var(--bgl-primary-20), ; } .via-primary-30 { --bgl-grad-via: var(--bgl-primary-30), ; } .via-primary-40 { --bgl-grad-via: var(--bgl-primary-40), ; } .via-primary-50 { --bgl-grad-via: var(--bgl-primary-50), ; } .via-primary-60 { --bgl-grad-via: var(--bgl-primary-60), ; } .via-primary-70 { --bgl-grad-via: var(--bgl-primary-70), ; } .via-primary-80 { --bgl-grad-via: var(--bgl-primary-80), ; } .via-primary-90 { --bgl-grad-via: var(--bgl-primary-90), ; } .via-primary-100 { --bgl-grad-via: var(--bgl-primary-100), ; } .via-primary-110 { --bgl-grad-via: var(--bgl-primary-110), ; } .via-primary-120 { --bgl-grad-via: var(--bgl-primary-120), ; } .via-primary-130 { --bgl-grad-via: var(--bgl-primary-130), ; }
.from-blue-10 { --bgl-grad-from: var(--bgl-blue-10); } .from-blue-20 { --bgl-grad-from: var(--bgl-blue-20); } .from-blue-30 { --bgl-grad-from: var(--bgl-blue-30); } .from-blue-40 { --bgl-grad-from: var(--bgl-blue-40); } .from-blue-50 { --bgl-grad-from: var(--bgl-blue-50); } .from-blue-60 { --bgl-grad-from: var(--bgl-blue-60); } .from-blue-70 { --bgl-grad-from: var(--bgl-blue-70); } .from-blue-80 { --bgl-grad-from: var(--bgl-blue-80); } .from-blue-90 { --bgl-grad-from: var(--bgl-blue-90); } .from-blue-100 { --bgl-grad-from: var(--bgl-blue-100); } .from-blue-110 { --bgl-grad-from: var(--bgl-blue-110); } .from-blue-120 { --bgl-grad-from: var(--bgl-blue-120); } .from-blue-130 { --bgl-grad-from: var(--bgl-blue-130); }
.to-blue-10 { --bgl-grad-to: var(--bgl-blue-10); } .to-blue-20 { --bgl-grad-to: var(--bgl-blue-20); } .to-blue-30 { --bgl-grad-to: var(--bgl-blue-30); } .to-blue-40 { --bgl-grad-to: var(--bgl-blue-40); } .to-blue-50 { --bgl-grad-to: var(--bgl-blue-50); } .to-blue-60 { --bgl-grad-to: var(--bgl-blue-60); } .to-blue-70 { --bgl-grad-to: var(--bgl-blue-70); } .to-blue-80 { --bgl-grad-to: var(--bgl-blue-80); } .to-blue-90 { --bgl-grad-to: var(--bgl-blue-90); } .to-blue-100 { --bgl-grad-to: var(--bgl-blue-100); } .to-blue-110 { --bgl-grad-to: var(--bgl-blue-110); } .to-blue-120 { --bgl-grad-to: var(--bgl-blue-120); } .to-blue-130 { --bgl-grad-to: var(--bgl-blue-130); }
.via-blue-10 { --bgl-grad-via: var(--bgl-blue-10), ; } .via-blue-20 { --bgl-grad-via: var(--bgl-blue-20), ; } .via-blue-30 { --bgl-grad-via: var(--bgl-blue-30), ; } .via-blue-40 { --bgl-grad-via: var(--bgl-blue-40), ; } .via-blue-50 { --bgl-grad-via: var(--bgl-blue-50), ; } .via-blue-60 { --bgl-grad-via: var(--bgl-blue-60), ; } .via-blue-70 { --bgl-grad-via: var(--bgl-blue-70), ; } .via-blue-80 { --bgl-grad-via: var(--bgl-blue-80), ; } .via-blue-90 { --bgl-grad-via: var(--bgl-blue-90), ; } .via-blue-100 { --bgl-grad-via: var(--bgl-blue-100), ; } .via-blue-110 { --bgl-grad-via: var(--bgl-blue-110), ; } .via-blue-120 { --bgl-grad-via: var(--bgl-blue-120), ; } .via-blue-130 { --bgl-grad-via: var(--bgl-blue-130), ; }
.from-green-10 { --bgl-grad-from: var(--bgl-green-10); } .from-green-20 { --bgl-grad-from: var(--bgl-green-20); } .from-green-30 { --bgl-grad-from: var(--bgl-green-30); } .from-green-40 { --bgl-grad-from: var(--bgl-green-40); } .from-green-50 { --bgl-grad-from: var(--bgl-green-50); } .from-green-60 { --bgl-grad-from: var(--bgl-green-60); } .from-green-70 { --bgl-grad-from: var(--bgl-green-70); } .from-green-80 { --bgl-grad-from: var(--bgl-green-80); } .from-green-90 { --bgl-grad-from: var(--bgl-green-90); } .from-green-100 { --bgl-grad-from: var(--bgl-green-100); } .from-green-110 { --bgl-grad-from: var(--bgl-green-110); } .from-green-120 { --bgl-grad-from: var(--bgl-green-120); } .from-green-130 { --bgl-grad-from: var(--bgl-green-130); }
.to-green-10 { --bgl-grad-to: var(--bgl-green-10); } .to-green-20 { --bgl-grad-to: var(--bgl-green-20); } .to-green-30 { --bgl-grad-to: var(--bgl-green-30); } .to-green-40 { --bgl-grad-to: var(--bgl-green-40); } .to-green-50 { --bgl-grad-to: var(--bgl-green-50); } .to-green-60 { --bgl-grad-to: var(--bgl-green-60); } .to-green-70 { --bgl-grad-to: var(--bgl-green-70); } .to-green-80 { --bgl-grad-to: var(--bgl-green-80); } .to-green-90 { --bgl-grad-to: var(--bgl-green-90); } .to-green-100 { --bgl-grad-to: var(--bgl-green-100); } .to-green-110 { --bgl-grad-to: var(--bgl-green-110); } .to-green-120 { --bgl-grad-to: var(--bgl-green-120); } .to-green-130 { --bgl-grad-to: var(--bgl-green-130); }
.via-green-10 { --bgl-grad-via: var(--bgl-green-10), ; } .via-green-20 { --bgl-grad-via: var(--bgl-green-20), ; } .via-green-30 { --bgl-grad-via: var(--bgl-green-30), ; } .via-green-40 { --bgl-grad-via: var(--bgl-green-40), ; } .via-green-50 { --bgl-grad-via: var(--bgl-green-50), ; } .via-green-60 { --bgl-grad-via: var(--bgl-green-60), ; } .via-green-70 { --bgl-grad-via: var(--bgl-green-70), ; } .via-green-80 { --bgl-grad-via: var(--bgl-green-80), ; } .via-green-90 { --bgl-grad-via: var(--bgl-green-90), ; } .via-green-100 { --bgl-grad-via: var(--bgl-green-100), ; } .via-green-110 { --bgl-grad-via: var(--bgl-green-110), ; } .via-green-120 { --bgl-grad-via: var(--bgl-green-120), ; } .via-green-130 { --bgl-grad-via: var(--bgl-green-130), ; }
.from-red-10 { --bgl-grad-from: var(--bgl-red-10); } .from-red-20 { --bgl-grad-from: var(--bgl-red-20); } .from-red-30 { --bgl-grad-from: var(--bgl-red-30); } .from-red-40 { --bgl-grad-from: var(--bgl-red-40); } .from-red-50 { --bgl-grad-from: var(--bgl-red-50); } .from-red-60 { --bgl-grad-from: var(--bgl-red-60); } .from-red-70 { --bgl-grad-from: var(--bgl-red-70); } .from-red-80 { --bgl-grad-from: var(--bgl-red-80); } .from-red-90 { --bgl-grad-from: var(--bgl-red-90); } .from-red-100 { --bgl-grad-from: var(--bgl-red-100); } .from-red-110 { --bgl-grad-from: var(--bgl-red-110); } .from-red-120 { --bgl-grad-from: var(--bgl-red-120); } .from-red-130 { --bgl-grad-from: var(--bgl-red-130); }
.to-red-10 { --bgl-grad-to: var(--bgl-red-10); } .to-red-20 { --bgl-grad-to: var(--bgl-red-20); } .to-red-30 { --bgl-grad-to: var(--bgl-red-30); } .to-red-40 { --bgl-grad-to: var(--bgl-red-40); } .to-red-50 { --bgl-grad-to: var(--bgl-red-50); } .to-red-60 { --bgl-grad-to: var(--bgl-red-60); } .to-red-70 { --bgl-grad-to: var(--bgl-red-70); } .to-red-80 { --bgl-grad-to: var(--bgl-red-80); } .to-red-90 { --bgl-grad-to: var(--bgl-red-90); } .to-red-100 { --bgl-grad-to: var(--bgl-red-100); } .to-red-110 { --bgl-grad-to: var(--bgl-red-110); } .to-red-120 { --bgl-grad-to: var(--bgl-red-120); } .to-red-130 { --bgl-grad-to: var(--bgl-red-130); }
.via-red-10 { --bgl-grad-via: var(--bgl-red-10), ; } .via-red-20 { --bgl-grad-via: var(--bgl-red-20), ; } .via-red-30 { --bgl-grad-via: var(--bgl-red-30), ; } .via-red-40 { --bgl-grad-via: var(--bgl-red-40), ; } .via-red-50 { --bgl-grad-via: var(--bgl-red-50), ; } .via-red-60 { --bgl-grad-via: var(--bgl-red-60), ; } .via-red-70 { --bgl-grad-via: var(--bgl-red-70), ; } .via-red-80 { --bgl-grad-via: var(--bgl-red-80), ; } .via-red-90 { --bgl-grad-via: var(--bgl-red-90), ; } .via-red-100 { --bgl-grad-via: var(--bgl-red-100), ; } .via-red-110 { --bgl-grad-via: var(--bgl-red-110), ; } .via-red-120 { --bgl-grad-via: var(--bgl-red-120), ; } .via-red-130 { --bgl-grad-via: var(--bgl-red-130), ; }
.from-yellow-10 { --bgl-grad-from: var(--bgl-yellow-10); } .from-yellow-20 { --bgl-grad-from: var(--bgl-yellow-20); } .from-yellow-30 { --bgl-grad-from: var(--bgl-yellow-30); } .from-yellow-40 { --bgl-grad-from: var(--bgl-yellow-40); } .from-yellow-50 { --bgl-grad-from: var(--bgl-yellow-50); } .from-yellow-60 { --bgl-grad-from: var(--bgl-yellow-60); } .from-yellow-70 { --bgl-grad-from: var(--bgl-yellow-70); } .from-yellow-80 { --bgl-grad-from: var(--bgl-yellow-80); } .from-yellow-90 { --bgl-grad-from: var(--bgl-yellow-90); } .from-yellow-100 { --bgl-grad-from: var(--bgl-yellow-100); } .from-yellow-110 { --bgl-grad-from: var(--bgl-yellow-110); } .from-yellow-120 { --bgl-grad-from: var(--bgl-yellow-120); } .from-yellow-130 { --bgl-grad-from: var(--bgl-yellow-130); }
.to-yellow-10 { --bgl-grad-to: var(--bgl-yellow-10); } .to-yellow-20 { --bgl-grad-to: var(--bgl-yellow-20); } .to-yellow-30 { --bgl-grad-to: var(--bgl-yellow-30); } .to-yellow-40 { --bgl-grad-to: var(--bgl-yellow-40); } .to-yellow-50 { --bgl-grad-to: var(--bgl-yellow-50); } .to-yellow-60 { --bgl-grad-to: var(--bgl-yellow-60); } .to-yellow-70 { --bgl-grad-to: var(--bgl-yellow-70); } .to-yellow-80 { --bgl-grad-to: var(--bgl-yellow-80); } .to-yellow-90 { --bgl-grad-to: var(--bgl-yellow-90); } .to-yellow-100 { --bgl-grad-to: var(--bgl-yellow-100); } .to-yellow-110 { --bgl-grad-to: var(--bgl-yellow-110); } .to-yellow-120 { --bgl-grad-to: var(--bgl-yellow-120); } .to-yellow-130 { --bgl-grad-to: var(--bgl-yellow-130); }
.via-yellow-10 { --bgl-grad-via: var(--bgl-yellow-10), ; } .via-yellow-20 { --bgl-grad-via: var(--bgl-yellow-20), ; } .via-yellow-30 { --bgl-grad-via: var(--bgl-yellow-30), ; } .via-yellow-40 { --bgl-grad-via: var(--bgl-yellow-40), ; } .via-yellow-50 { --bgl-grad-via: var(--bgl-yellow-50), ; } .via-yellow-60 { --bgl-grad-via: var(--bgl-yellow-60), ; } .via-yellow-70 { --bgl-grad-via: var(--bgl-yellow-70), ; } .via-yellow-80 { --bgl-grad-via: var(--bgl-yellow-80), ; } .via-yellow-90 { --bgl-grad-via: var(--bgl-yellow-90), ; } .via-yellow-100 { --bgl-grad-via: var(--bgl-yellow-100), ; } .via-yellow-110 { --bgl-grad-via: var(--bgl-yellow-110), ; } .via-yellow-120 { --bgl-grad-via: var(--bgl-yellow-120), ; } .via-yellow-130 { --bgl-grad-via: var(--bgl-yellow-130), ; }
.from-purple-10 { --bgl-grad-from: var(--bgl-purple-10); } .from-purple-20 { --bgl-grad-from: var(--bgl-purple-20); } .from-purple-30 { --bgl-grad-from: var(--bgl-purple-30); } .from-purple-40 { --bgl-grad-from: var(--bgl-purple-40); } .from-purple-50 { --bgl-grad-from: var(--bgl-purple-50); } .from-purple-60 { --bgl-grad-from: var(--bgl-purple-60); } .from-purple-70 { --bgl-grad-from: var(--bgl-purple-70); } .from-purple-80 { --bgl-grad-from: var(--bgl-purple-80); } .from-purple-90 { --bgl-grad-from: var(--bgl-purple-90); } .from-purple-100 { --bgl-grad-from: var(--bgl-purple-100); } .from-purple-110 { --bgl-grad-from: var(--bgl-purple-110); } .from-purple-120 { --bgl-grad-from: var(--bgl-purple-120); } .from-purple-130 { --bgl-grad-from: var(--bgl-purple-130); }
.to-purple-10 { --bgl-grad-to: var(--bgl-purple-10); } .to-purple-20 { --bgl-grad-to: var(--bgl-purple-20); } .to-purple-30 { --bgl-grad-to: var(--bgl-purple-30); } .to-purple-40 { --bgl-grad-to: var(--bgl-purple-40); } .to-purple-50 { --bgl-grad-to: var(--bgl-purple-50); } .to-purple-60 { --bgl-grad-to: var(--bgl-purple-60); } .to-purple-70 { --bgl-grad-to: var(--bgl-purple-70); } .to-purple-80 { --bgl-grad-to: var(--bgl-purple-80); } .to-purple-90 { --bgl-grad-to: var(--bgl-purple-90); } .to-purple-100 { --bgl-grad-to: var(--bgl-purple-100); } .to-purple-110 { --bgl-grad-to: var(--bgl-purple-110); } .to-purple-120 { --bgl-grad-to: var(--bgl-purple-120); } .to-purple-130 { --bgl-grad-to: var(--bgl-purple-130); }
.via-purple-10 { --bgl-grad-via: var(--bgl-purple-10), ; } .via-purple-20 { --bgl-grad-via: var(--bgl-purple-20), ; } .via-purple-30 { --bgl-grad-via: var(--bgl-purple-30), ; } .via-purple-40 { --bgl-grad-via: var(--bgl-purple-40), ; } .via-purple-50 { --bgl-grad-via: var(--bgl-purple-50), ; } .via-purple-60 { --bgl-grad-via: var(--bgl-purple-60), ; } .via-purple-70 { --bgl-grad-via: var(--bgl-purple-70), ; } .via-purple-80 { --bgl-grad-via: var(--bgl-purple-80), ; } .via-purple-90 { --bgl-grad-via: var(--bgl-purple-90), ; } .via-purple-100 { --bgl-grad-via: var(--bgl-purple-100), ; } .via-purple-110 { --bgl-grad-via: var(--bgl-purple-110), ; } .via-purple-120 { --bgl-grad-via: var(--bgl-purple-120), ; } .via-purple-130 { --bgl-grad-via: var(--bgl-purple-130), ; }
.from-brown-10 { --bgl-grad-from: var(--bgl-brown-10); } .from-brown-20 { --bgl-grad-from: var(--bgl-brown-20); } .from-brown-30 { --bgl-grad-from: var(--bgl-brown-30); } .from-brown-40 { --bgl-grad-from: var(--bgl-brown-40); } .from-brown-50 { --bgl-grad-from: var(--bgl-brown-50); } .from-brown-60 { --bgl-grad-from: var(--bgl-brown-60); } .from-brown-70 { --bgl-grad-from: var(--bgl-brown-70); } .from-brown-80 { --bgl-grad-from: var(--bgl-brown-80); } .from-brown-90 { --bgl-grad-from: var(--bgl-brown-90); } .from-brown-100 { --bgl-grad-from: var(--bgl-brown-100); } .from-brown-110 { --bgl-grad-from: var(--bgl-brown-110); } .from-brown-120 { --bgl-grad-from: var(--bgl-brown-120); } .from-brown-130 { --bgl-grad-from: var(--bgl-brown-130); }
.to-brown-10 { --bgl-grad-to: var(--bgl-brown-10); } .to-brown-20 { --bgl-grad-to: var(--bgl-brown-20); } .to-brown-30 { --bgl-grad-to: var(--bgl-brown-30); } .to-brown-40 { --bgl-grad-to: var(--bgl-brown-40); } .to-brown-50 { --bgl-grad-to: var(--bgl-brown-50); } .to-brown-60 { --bgl-grad-to: var(--bgl-brown-60); } .to-brown-70 { --bgl-grad-to: var(--bgl-brown-70); } .to-brown-80 { --bgl-grad-to: var(--bgl-brown-80); } .to-brown-90 { --bgl-grad-to: var(--bgl-brown-90); } .to-brown-100 { --bgl-grad-to: var(--bgl-brown-100); } .to-brown-110 { --bgl-grad-to: var(--bgl-brown-110); } .to-brown-120 { --bgl-grad-to: var(--bgl-brown-120); } .to-brown-130 { --bgl-grad-to: var(--bgl-brown-130); }
.via-brown-10 { --bgl-grad-via: var(--bgl-brown-10), ; } .via-brown-20 { --bgl-grad-via: var(--bgl-brown-20), ; } .via-brown-30 { --bgl-grad-via: var(--bgl-brown-30), ; } .via-brown-40 { --bgl-grad-via: var(--bgl-brown-40), ; } .via-brown-50 { --bgl-grad-via: var(--bgl-brown-50), ; } .via-brown-60 { --bgl-grad-via: var(--bgl-brown-60), ; } .via-brown-70 { --bgl-grad-via: var(--bgl-brown-70), ; } .via-brown-80 { --bgl-grad-via: var(--bgl-brown-80), ; } .via-brown-90 { --bgl-grad-via: var(--bgl-brown-90), ; } .via-brown-100 { --bgl-grad-via: var(--bgl-brown-100), ; } .via-brown-110 { --bgl-grad-via: var(--bgl-brown-110), ; } .via-brown-120 { --bgl-grad-via: var(--bgl-brown-120), ; } .via-brown-130 { --bgl-grad-via: var(--bgl-brown-130), ; }
.from-orange-10 { --bgl-grad-from: var(--bgl-orange-10); } .from-orange-20 { --bgl-grad-from: var(--bgl-orange-20); } .from-orange-30 { --bgl-grad-from: var(--bgl-orange-30); } .from-orange-40 { --bgl-grad-from: var(--bgl-orange-40); } .from-orange-50 { --bgl-grad-from: var(--bgl-orange-50); } .from-orange-60 { --bgl-grad-from: var(--bgl-orange-60); } .from-orange-70 { --bgl-grad-from: var(--bgl-orange-70); } .from-orange-80 { --bgl-grad-from: var(--bgl-orange-80); } .from-orange-90 { --bgl-grad-from: var(--bgl-orange-90); } .from-orange-100 { --bgl-grad-from: var(--bgl-orange-100); } .from-orange-110 { --bgl-grad-from: var(--bgl-orange-110); } .from-orange-120 { --bgl-grad-from: var(--bgl-orange-120); } .from-orange-130 { --bgl-grad-from: var(--bgl-orange-130); }
.to-orange-10 { --bgl-grad-to: var(--bgl-orange-10); } .to-orange-20 { --bgl-grad-to: var(--bgl-orange-20); } .to-orange-30 { --bgl-grad-to: var(--bgl-orange-30); } .to-orange-40 { --bgl-grad-to: var(--bgl-orange-40); } .to-orange-50 { --bgl-grad-to: var(--bgl-orange-50); } .to-orange-60 { --bgl-grad-to: var(--bgl-orange-60); } .to-orange-70 { --bgl-grad-to: var(--bgl-orange-70); } .to-orange-80 { --bgl-grad-to: var(--bgl-orange-80); } .to-orange-90 { --bgl-grad-to: var(--bgl-orange-90); } .to-orange-100 { --bgl-grad-to: var(--bgl-orange-100); } .to-orange-110 { --bgl-grad-to: var(--bgl-orange-110); } .to-orange-120 { --bgl-grad-to: var(--bgl-orange-120); } .to-orange-130 { --bgl-grad-to: var(--bgl-orange-130); }
.via-orange-10 { --bgl-grad-via: var(--bgl-orange-10), ; } .via-orange-20 { --bgl-grad-via: var(--bgl-orange-20), ; } .via-orange-30 { --bgl-grad-via: var(--bgl-orange-30), ; } .via-orange-40 { --bgl-grad-via: var(--bgl-orange-40), ; } .via-orange-50 { --bgl-grad-via: var(--bgl-orange-50), ; } .via-orange-60 { --bgl-grad-via: var(--bgl-orange-60), ; } .via-orange-70 { --bgl-grad-via: var(--bgl-orange-70), ; } .via-orange-80 { --bgl-grad-via: var(--bgl-orange-80), ; } .via-orange-90 { --bgl-grad-via: var(--bgl-orange-90), ; } .via-orange-100 { --bgl-grad-via: var(--bgl-orange-100), ; } .via-orange-110 { --bgl-grad-via: var(--bgl-orange-110), ; } .via-orange-120 { --bgl-grad-via: var(--bgl-orange-120), ; } .via-orange-130 { --bgl-grad-via: var(--bgl-orange-130), ; }
.from-turquoise-10 { --bgl-grad-from: var(--bgl-turquoise-10); } .from-turquoise-20 { --bgl-grad-from: var(--bgl-turquoise-20); } .from-turquoise-30 { --bgl-grad-from: var(--bgl-turquoise-30); } .from-turquoise-40 { --bgl-grad-from: var(--bgl-turquoise-40); } .from-turquoise-50 { --bgl-grad-from: var(--bgl-turquoise-50); } .from-turquoise-60 { --bgl-grad-from: var(--bgl-turquoise-60); } .from-turquoise-70 { --bgl-grad-from: var(--bgl-turquoise-70); } .from-turquoise-80 { --bgl-grad-from: var(--bgl-turquoise-80); } .from-turquoise-90 { --bgl-grad-from: var(--bgl-turquoise-90); } .from-turquoise-100 { --bgl-grad-from: var(--bgl-turquoise-100); } .from-turquoise-110 { --bgl-grad-from: var(--bgl-turquoise-110); } .from-turquoise-120 { --bgl-grad-from: var(--bgl-turquoise-120); } .from-turquoise-130 { --bgl-grad-from: var(--bgl-turquoise-130); }
.to-turquoise-10 { --bgl-grad-to: var(--bgl-turquoise-10); } .to-turquoise-20 { --bgl-grad-to: var(--bgl-turquoise-20); } .to-turquoise-30 { --bgl-grad-to: var(--bgl-turquoise-30); } .to-turquoise-40 { --bgl-grad-to: var(--bgl-turquoise-40); } .to-turquoise-50 { --bgl-grad-to: var(--bgl-turquoise-50); } .to-turquoise-60 { --bgl-grad-to: var(--bgl-turquoise-60); } .to-turquoise-70 { --bgl-grad-to: var(--bgl-turquoise-70); } .to-turquoise-80 { --bgl-grad-to: var(--bgl-turquoise-80); } .to-turquoise-90 { --bgl-grad-to: var(--bgl-turquoise-90); } .to-turquoise-100 { --bgl-grad-to: var(--bgl-turquoise-100); } .to-turquoise-110 { --bgl-grad-to: var(--bgl-turquoise-110); } .to-turquoise-120 { --bgl-grad-to: var(--bgl-turquoise-120); } .to-turquoise-130 { --bgl-grad-to: var(--bgl-turquoise-130); }
.via-turquoise-10 { --bgl-grad-via: var(--bgl-turquoise-10), ; } .via-turquoise-20 { --bgl-grad-via: var(--bgl-turquoise-20), ; } .via-turquoise-30 { --bgl-grad-via: var(--bgl-turquoise-30), ; } .via-turquoise-40 { --bgl-grad-via: var(--bgl-turquoise-40), ; } .via-turquoise-50 { --bgl-grad-via: var(--bgl-turquoise-50), ; } .via-turquoise-60 { --bgl-grad-via: var(--bgl-turquoise-60), ; } .via-turquoise-70 { --bgl-grad-via: var(--bgl-turquoise-70), ; } .via-turquoise-80 { --bgl-grad-via: var(--bgl-turquoise-80), ; } .via-turquoise-90 { --bgl-grad-via: var(--bgl-turquoise-90), ; } .via-turquoise-100 { --bgl-grad-via: var(--bgl-turquoise-100), ; } .via-turquoise-110 { --bgl-grad-via: var(--bgl-turquoise-110), ; } .via-turquoise-120 { --bgl-grad-via: var(--bgl-turquoise-120), ; } .via-turquoise-130 { --bgl-grad-via: var(--bgl-turquoise-130), ; }
.from-pink-10 { --bgl-grad-from: var(--bgl-pink-10); } .from-pink-20 { --bgl-grad-from: var(--bgl-pink-20); } .from-pink-30 { --bgl-grad-from: var(--bgl-pink-30); } .from-pink-40 { --bgl-grad-from: var(--bgl-pink-40); } .from-pink-50 { --bgl-grad-from: var(--bgl-pink-50); } .from-pink-60 { --bgl-grad-from: var(--bgl-pink-60); } .from-pink-70 { --bgl-grad-from: var(--bgl-pink-70); } .from-pink-80 { --bgl-grad-from: var(--bgl-pink-80); } .from-pink-90 { --bgl-grad-from: var(--bgl-pink-90); } .from-pink-100 { --bgl-grad-from: var(--bgl-pink-100); } .from-pink-110 { --bgl-grad-from: var(--bgl-pink-110); } .from-pink-120 { --bgl-grad-from: var(--bgl-pink-120); } .from-pink-130 { --bgl-grad-from: var(--bgl-pink-130); }
.to-pink-10 { --bgl-grad-to: var(--bgl-pink-10); } .to-pink-20 { --bgl-grad-to: var(--bgl-pink-20); } .to-pink-30 { --bgl-grad-to: var(--bgl-pink-30); } .to-pink-40 { --bgl-grad-to: var(--bgl-pink-40); } .to-pink-50 { --bgl-grad-to: var(--bgl-pink-50); } .to-pink-60 { --bgl-grad-to: var(--bgl-pink-60); } .to-pink-70 { --bgl-grad-to: var(--bgl-pink-70); } .to-pink-80 { --bgl-grad-to: var(--bgl-pink-80); } .to-pink-90 { --bgl-grad-to: var(--bgl-pink-90); } .to-pink-100 { --bgl-grad-to: var(--bgl-pink-100); } .to-pink-110 { --bgl-grad-to: var(--bgl-pink-110); } .to-pink-120 { --bgl-grad-to: var(--bgl-pink-120); } .to-pink-130 { --bgl-grad-to: var(--bgl-pink-130); }
.via-pink-10 { --bgl-grad-via: var(--bgl-pink-10), ; } .via-pink-20 { --bgl-grad-via: var(--bgl-pink-20), ; } .via-pink-30 { --bgl-grad-via: var(--bgl-pink-30), ; } .via-pink-40 { --bgl-grad-via: var(--bgl-pink-40), ; } .via-pink-50 { --bgl-grad-via: var(--bgl-pink-50), ; } .via-pink-60 { --bgl-grad-via: var(--bgl-pink-60), ; } .via-pink-70 { --bgl-grad-via: var(--bgl-pink-70), ; } .via-pink-80 { --bgl-grad-via: var(--bgl-pink-80), ; } .via-pink-90 { --bgl-grad-via: var(--bgl-pink-90), ; } .via-pink-100 { --bgl-grad-via: var(--bgl-pink-100), ; } .via-pink-110 { --bgl-grad-via: var(--bgl-pink-110), ; } .via-pink-120 { --bgl-grad-via: var(--bgl-pink-120), ; } .via-pink-130 { --bgl-grad-via: var(--bgl-pink-130), ; }
.from-gray-10 { --bgl-grad-from: var(--bgl-gray-10); } .from-gray-20 { --bgl-grad-from: var(--bgl-gray-20); } .from-gray-30 { --bgl-grad-from: var(--bgl-gray-30); } .from-gray-40 { --bgl-grad-from: var(--bgl-gray-40); } .from-gray-50 { --bgl-grad-from: var(--bgl-gray-50); } .from-gray-60 { --bgl-grad-from: var(--bgl-gray-60); } .from-gray-70 { --bgl-grad-from: var(--bgl-gray-70); } .from-gray-80 { --bgl-grad-from: var(--bgl-gray-80); } .from-gray-90 { --bgl-grad-from: var(--bgl-gray-90); } .from-gray-100 { --bgl-grad-from: var(--bgl-gray-100); } .from-gray-110 { --bgl-grad-from: var(--bgl-gray-110); } .from-gray-120 { --bgl-grad-from: var(--bgl-gray-120); } .from-gray-130 { --bgl-grad-from: var(--bgl-gray-130); }
.to-gray-10 { --bgl-grad-to: var(--bgl-gray-10); } .to-gray-20 { --bgl-grad-to: var(--bgl-gray-20); } .to-gray-30 { --bgl-grad-to: var(--bgl-gray-30); } .to-gray-40 { --bgl-grad-to: var(--bgl-gray-40); } .to-gray-50 { --bgl-grad-to: var(--bgl-gray-50); } .to-gray-60 { --bgl-grad-to: var(--bgl-gray-60); } .to-gray-70 { --bgl-grad-to: var(--bgl-gray-70); } .to-gray-80 { --bgl-grad-to: var(--bgl-gray-80); } .to-gray-90 { --bgl-grad-to: var(--bgl-gray-90); } .to-gray-100 { --bgl-grad-to: var(--bgl-gray-100); } .to-gray-110 { --bgl-grad-to: var(--bgl-gray-110); } .to-gray-120 { --bgl-grad-to: var(--bgl-gray-120); } .to-gray-130 { --bgl-grad-to: var(--bgl-gray-130); }
.via-gray-10 { --bgl-grad-via: var(--bgl-gray-10), ; } .via-gray-20 { --bgl-grad-via: var(--bgl-gray-20), ; } .via-gray-30 { --bgl-grad-via: var(--bgl-gray-30), ; } .via-gray-40 { --bgl-grad-via: var(--bgl-gray-40), ; } .via-gray-50 { --bgl-grad-via: var(--bgl-gray-50), ; } .via-gray-60 { --bgl-grad-via: var(--bgl-gray-60), ; } .via-gray-70 { --bgl-grad-via: var(--bgl-gray-70), ; } .via-gray-80 { --bgl-grad-via: var(--bgl-gray-80), ; } .via-gray-90 { --bgl-grad-via: var(--bgl-gray-90), ; } .via-gray-100 { --bgl-grad-via: var(--bgl-gray-100), ; } .via-gray-110 { --bgl-grad-via: var(--bgl-gray-110), ; } .via-gray-120 { --bgl-grad-via: var(--bgl-gray-120), ; } .via-gray-130 { --bgl-grad-via: var(--bgl-gray-130), ; }
.from-black-10 { --bgl-grad-from: var(--bgl-black-10); } .from-black-20 { --bgl-grad-from: var(--bgl-black-20); } .from-black-30 { --bgl-grad-from: var(--bgl-black-30); } .from-black-40 { --bgl-grad-from: var(--bgl-black-40); } .from-black-50 { --bgl-grad-from: var(--bgl-black-50); } .from-black-60 { --bgl-grad-from: var(--bgl-black-60); } .from-black-70 { --bgl-grad-from: var(--bgl-black-70); } .from-black-80 { --bgl-grad-from: var(--bgl-black-80); } .from-black-90 { --bgl-grad-from: var(--bgl-black-90); } .from-black-100 { --bgl-grad-from: var(--bgl-black-100); } .from-black-110 { --bgl-grad-from: var(--bgl-black-110); } .from-black-120 { --bgl-grad-from: var(--bgl-black-120); } .from-black-130 { --bgl-grad-from: var(--bgl-black-130); }
.to-black-10 { --bgl-grad-to: var(--bgl-black-10); } .to-black-20 { --bgl-grad-to: var(--bgl-black-20); } .to-black-30 { --bgl-grad-to: var(--bgl-black-30); } .to-black-40 { --bgl-grad-to: var(--bgl-black-40); } .to-black-50 { --bgl-grad-to: var(--bgl-black-50); } .to-black-60 { --bgl-grad-to: var(--bgl-black-60); } .to-black-70 { --bgl-grad-to: var(--bgl-black-70); } .to-black-80 { --bgl-grad-to: var(--bgl-black-80); } .to-black-90 { --bgl-grad-to: var(--bgl-black-90); } .to-black-100 { --bgl-grad-to: var(--bgl-black-100); } .to-black-110 { --bgl-grad-to: var(--bgl-black-110); } .to-black-120 { --bgl-grad-to: var(--bgl-black-120); } .to-black-130 { --bgl-grad-to: var(--bgl-black-130); }
.via-black-10 { --bgl-grad-via: var(--bgl-black-10), ; } .via-black-20 { --bgl-grad-via: var(--bgl-black-20), ; } .via-black-30 { --bgl-grad-via: var(--bgl-black-30), ; } .via-black-40 { --bgl-grad-via: var(--bgl-black-40), ; } .via-black-50 { --bgl-grad-via: var(--bgl-black-50), ; } .via-black-60 { --bgl-grad-via: var(--bgl-black-60), ; } .via-black-70 { --bgl-grad-via: var(--bgl-black-70), ; } .via-black-80 { --bgl-grad-via: var(--bgl-black-80), ; } .via-black-90 { --bgl-grad-via: var(--bgl-black-90), ; } .via-black-100 { --bgl-grad-via: var(--bgl-black-100), ; } .via-black-110 { --bgl-grad-via: var(--bgl-black-110), ; } .via-black-120 { --bgl-grad-via: var(--bgl-black-120), ; } .via-black-130 { --bgl-grad-via: var(--bgl-black-130), ; }
.from-secondary-10 { --bgl-grad-from: var(--bgl-secondary-10); } .from-secondary-20 { --bgl-grad-from: var(--bgl-secondary-20); } .from-secondary-30 { --bgl-grad-from: var(--bgl-secondary-30); } .from-secondary-40 { --bgl-grad-from: var(--bgl-secondary-40); } .from-secondary-50 { --bgl-grad-from: var(--bgl-secondary-50); } .from-secondary-60 { --bgl-grad-from: var(--bgl-secondary-60); } .from-secondary-70 { --bgl-grad-from: var(--bgl-secondary-70); } .from-secondary-80 { --bgl-grad-from: var(--bgl-secondary-80); } .from-secondary-90 { --bgl-grad-from: var(--bgl-secondary-90); } .from-secondary-100 { --bgl-grad-from: var(--bgl-secondary-100); } .from-secondary-110 { --bgl-grad-from: var(--bgl-secondary-110); } .from-secondary-120 { --bgl-grad-from: var(--bgl-secondary-120); } .from-secondary-130 { --bgl-grad-from: var(--bgl-secondary-130); }
.to-secondary-10 { --bgl-grad-to: var(--bgl-secondary-10); } .to-secondary-20 { --bgl-grad-to: var(--bgl-secondary-20); } .to-secondary-30 { --bgl-grad-to: var(--bgl-secondary-30); } .to-secondary-40 { --bgl-grad-to: var(--bgl-secondary-40); } .to-secondary-50 { --bgl-grad-to: var(--bgl-secondary-50); } .to-secondary-60 { --bgl-grad-to: var(--bgl-secondary-60); } .to-secondary-70 { --bgl-grad-to: var(--bgl-secondary-70); } .to-secondary-80 { --bgl-grad-to: var(--bgl-secondary-80); } .to-secondary-90 { --bgl-grad-to: var(--bgl-secondary-90); } .to-secondary-100 { --bgl-grad-to: var(--bgl-secondary-100); } .to-secondary-110 { --bgl-grad-to: var(--bgl-secondary-110); } .to-secondary-120 { --bgl-grad-to: var(--bgl-secondary-120); } .to-secondary-130 { --bgl-grad-to: var(--bgl-secondary-130); }
.via-secondary-10 { --bgl-grad-via: var(--bgl-secondary-10), ; } .via-secondary-20 { --bgl-grad-via: var(--bgl-secondary-20), ; } .via-secondary-30 { --bgl-grad-via: var(--bgl-secondary-30), ; } .via-secondary-40 { --bgl-grad-via: var(--bgl-secondary-40), ; } .via-secondary-50 { --bgl-grad-via: var(--bgl-secondary-50), ; } .via-secondary-60 { --bgl-grad-via: var(--bgl-secondary-60), ; } .via-secondary-70 { --bgl-grad-via: var(--bgl-secondary-70), ; } .via-secondary-80 { --bgl-grad-via: var(--bgl-secondary-80), ; } .via-secondary-90 { --bgl-grad-via: var(--bgl-secondary-90), ; } .via-secondary-100 { --bgl-grad-via: var(--bgl-secondary-100), ; } .via-secondary-110 { --bgl-grad-via: var(--bgl-secondary-110), ; } .via-secondary-120 { --bgl-grad-via: var(--bgl-secondary-120), ; } .via-secondary-130 { --bgl-grad-via: var(--bgl-secondary-130), ; }
.from-tertiary-10 { --bgl-grad-from: var(--bgl-tertiary-10); } .from-tertiary-20 { --bgl-grad-from: var(--bgl-tertiary-20); } .from-tertiary-30 { --bgl-grad-from: var(--bgl-tertiary-30); } .from-tertiary-40 { --bgl-grad-from: var(--bgl-tertiary-40); } .from-tertiary-50 { --bgl-grad-from: var(--bgl-tertiary-50); } .from-tertiary-60 { --bgl-grad-from: var(--bgl-tertiary-60); } .from-tertiary-70 { --bgl-grad-from: var(--bgl-tertiary-70); } .from-tertiary-80 { --bgl-grad-from: var(--bgl-tertiary-80); } .from-tertiary-90 { --bgl-grad-from: var(--bgl-tertiary-90); } .from-tertiary-100 { --bgl-grad-from: var(--bgl-tertiary-100); } .from-tertiary-110 { --bgl-grad-from: var(--bgl-tertiary-110); } .from-tertiary-120 { --bgl-grad-from: var(--bgl-tertiary-120); } .from-tertiary-130 { --bgl-grad-from: var(--bgl-tertiary-130); }
.to-tertiary-10 { --bgl-grad-to: var(--bgl-tertiary-10); } .to-tertiary-20 { --bgl-grad-to: var(--bgl-tertiary-20); } .to-tertiary-30 { --bgl-grad-to: var(--bgl-tertiary-30); } .to-tertiary-40 { --bgl-grad-to: var(--bgl-tertiary-40); } .to-tertiary-50 { --bgl-grad-to: var(--bgl-tertiary-50); } .to-tertiary-60 { --bgl-grad-to: var(--bgl-tertiary-60); } .to-tertiary-70 { --bgl-grad-to: var(--bgl-tertiary-70); } .to-tertiary-80 { --bgl-grad-to: var(--bgl-tertiary-80); } .to-tertiary-90 { --bgl-grad-to: var(--bgl-tertiary-90); } .to-tertiary-100 { --bgl-grad-to: var(--bgl-tertiary-100); } .to-tertiary-110 { --bgl-grad-to: var(--bgl-tertiary-110); } .to-tertiary-120 { --bgl-grad-to: var(--bgl-tertiary-120); } .to-tertiary-130 { --bgl-grad-to: var(--bgl-tertiary-130); }
.via-tertiary-10 { --bgl-grad-via: var(--bgl-tertiary-10), ; } .via-tertiary-20 { --bgl-grad-via: var(--bgl-tertiary-20), ; } .via-tertiary-30 { --bgl-grad-via: var(--bgl-tertiary-30), ; } .via-tertiary-40 { --bgl-grad-via: var(--bgl-tertiary-40), ; } .via-tertiary-50 { --bgl-grad-via: var(--bgl-tertiary-50), ; } .via-tertiary-60 { --bgl-grad-via: var(--bgl-tertiary-60), ; } .via-tertiary-70 { --bgl-grad-via: var(--bgl-tertiary-70), ; } .via-tertiary-80 { --bgl-grad-via: var(--bgl-tertiary-80), ; } .via-tertiary-90 { --bgl-grad-via: var(--bgl-tertiary-90), ; } .via-tertiary-100 { --bgl-grad-via: var(--bgl-tertiary-100), ; } .via-tertiary-110 { --bgl-grad-via: var(--bgl-tertiary-110), ; } .via-tertiary-120 { --bgl-grad-via: var(--bgl-tertiary-120), ; } .via-tertiary-130 { --bgl-grad-via: var(--bgl-tertiary-130), ; }
.from-quaternary-10 { --bgl-grad-from: var(--bgl-quaternary-10); } .from-quaternary-20 { --bgl-grad-from: var(--bgl-quaternary-20); } .from-quaternary-30 { --bgl-grad-from: var(--bgl-quaternary-30); } .from-quaternary-40 { --bgl-grad-from: var(--bgl-quaternary-40); } .from-quaternary-50 { --bgl-grad-from: var(--bgl-quaternary-50); } .from-quaternary-60 { --bgl-grad-from: var(--bgl-quaternary-60); } .from-quaternary-70 { --bgl-grad-from: var(--bgl-quaternary-70); } .from-quaternary-80 { --bgl-grad-from: var(--bgl-quaternary-80); } .from-quaternary-90 { --bgl-grad-from: var(--bgl-quaternary-90); } .from-quaternary-100 { --bgl-grad-from: var(--bgl-quaternary-100); } .from-quaternary-110 { --bgl-grad-from: var(--bgl-quaternary-110); } .from-quaternary-120 { --bgl-grad-from: var(--bgl-quaternary-120); } .from-quaternary-130 { --bgl-grad-from: var(--bgl-quaternary-130); }
.to-quaternary-10 { --bgl-grad-to: var(--bgl-quaternary-10); } .to-quaternary-20 { --bgl-grad-to: var(--bgl-quaternary-20); } .to-quaternary-30 { --bgl-grad-to: var(--bgl-quaternary-30); } .to-quaternary-40 { --bgl-grad-to: var(--bgl-quaternary-40); } .to-quaternary-50 { --bgl-grad-to: var(--bgl-quaternary-50); } .to-quaternary-60 { --bgl-grad-to: var(--bgl-quaternary-60); } .to-quaternary-70 { --bgl-grad-to: var(--bgl-quaternary-70); } .to-quaternary-80 { --bgl-grad-to: var(--bgl-quaternary-80); } .to-quaternary-90 { --bgl-grad-to: var(--bgl-quaternary-90); } .to-quaternary-100 { --bgl-grad-to: var(--bgl-quaternary-100); } .to-quaternary-110 { --bgl-grad-to: var(--bgl-quaternary-110); } .to-quaternary-120 { --bgl-grad-to: var(--bgl-quaternary-120); } .to-quaternary-130 { --bgl-grad-to: var(--bgl-quaternary-130); }
.via-quaternary-10 { --bgl-grad-via: var(--bgl-quaternary-10), ; } .via-quaternary-20 { --bgl-grad-via: var(--bgl-quaternary-20), ; } .via-quaternary-30 { --bgl-grad-via: var(--bgl-quaternary-30), ; } .via-quaternary-40 { --bgl-grad-via: var(--bgl-quaternary-40), ; } .via-quaternary-50 { --bgl-grad-via: var(--bgl-quaternary-50), ; } .via-quaternary-60 { --bgl-grad-via: var(--bgl-quaternary-60), ; } .via-quaternary-70 { --bgl-grad-via: var(--bgl-quaternary-70), ; } .via-quaternary-80 { --bgl-grad-via: var(--bgl-quaternary-80), ; } .via-quaternary-90 { --bgl-grad-via: var(--bgl-quaternary-90), ; } .via-quaternary-100 { --bgl-grad-via: var(--bgl-quaternary-100), ; } .via-quaternary-110 { --bgl-grad-via: var(--bgl-quaternary-110), ; } .via-quaternary-120 { --bgl-grad-via: var(--bgl-quaternary-120), ; } .via-quaternary-130 { --bgl-grad-via: var(--bgl-quaternary-130), ; }

/* ── Named presets — the gorgeous, copy-pasted brand sweeps, tokenized ──────── */
.bg-gradient-brand {
	background-image: linear-gradient(135deg, var(--bgl-primary), var(--bgl-purple)) !important;
}
.bg-gradient-sunset {
	background-image: linear-gradient(135deg, var(--bgl-orange), var(--bgl-pink)) !important;
}
.bg-gradient-ocean {
	background-image: linear-gradient(135deg, var(--bgl-blue), var(--bgl-turquoise)) !important;
}
.bg-gradient-dusk {
	background-image: linear-gradient(135deg, var(--bgl-purple), var(--bgl-blue)) !important;
}
.bg-gradient-citrus {
	background-image: linear-gradient(135deg, var(--bgl-yellow), var(--bgl-orange)) !important;
}
/* Subtle surface sweep for cards/panels — dark-mode aware via tokens. */
.bg-gradient-surface {
	background-image: linear-gradient(160deg,
		color-mix(in srgb, var(--bgl-box-bg) 100%, transparent),
		color-mix(in srgb, var(--bgl-primary) 6%, var(--bgl-box-bg))) !important;
}
/* Multi-radial "mesh" hero background built from the brand palette. */
.bg-gradient-mesh {
	background-color: var(--bgl-box-bg) !important;
	background-image:
		radial-gradient(at 0% 0%, color-mix(in srgb, var(--bgl-primary) 35%, transparent) 0px, transparent 50%),
		radial-gradient(at 100% 0%, color-mix(in srgb, var(--bgl-purple) 30%, transparent) 0px, transparent 50%),
		radial-gradient(at 100% 100%, color-mix(in srgb, var(--bgl-turquoise) 25%, transparent) 0px, transparent 50%),
		radial-gradient(at 0% 100%, color-mix(in srgb, var(--bgl-pink) 25%, transparent) 0px, transparent 50%) !important;
}

/* Soft fade for chart/sparkline fills: tone at top → transparent. Pair with a
   from-<tone> and a direction, e.g. `bg-gradient-fade to-b from-blue`. */
.bg-gradient-fade {
	--bgl-grad-to: transparent;
	background-image: linear-gradient(var(--bgl-grad-angle),
		color-mix(in srgb, var(--bgl-grad-from) 22%, transparent),
		transparent) !important;
}

@media (prefers-reduced-motion: no-preference) {
	.bg-gradient-animate {
		background-size: 200% 200% !important;
		animation: bgl-grad-pan 8s ease infinite;
	}
}
@keyframes bgl-grad-pan {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}