@layer reset, tokens, utilities, components;

@layer tokens {

	:root {
		--valid-color: #8AC74C; /* { readonly: true } */
		--invalid-color: #F34039; /* { readonly: true } */
		--highlight-color: #0066EE; /* { readonly: true } */

		--black: #000000;

		/* -- Backward-compat aliases ------------------------------------------- */
		/* Used by make.css, buttons.css hover states, and other inherited rules  */

		--main-bg:       var(--lt-bg);
		--main-bg-alt:   var(--dk-bg);
		--inner-bg:      var(--lt-alt-bg);
		--inner-bg-alt:  var(--dk-alt-bg);
		--text:          var(--lt-txt);
		--text-alt:      var(--dk-btn-pry-txt); /* white — used for btn text & hover */
		--link-alt:      var(--dk-lnk);
		--buttons:       var(--lt-btn-pry);

		/* -- Shape Colors ------------------------------------------------------ */
		/* References contextual palette vars; scopes override per theme context  */

		--shape-clr-1-dyn: var(--lt-accent);
		--shape-clr-2-dyn: var(--lt-callout);
		--shape-clr-1-alt: #ffffff;
	}


	/* ══════════════════════════════════════════════════════════════════════ */
	/* Palette contexts                                                        */
	/* Each [data-colors] value is a complete, self-contained palette. Nesting */
	/* one inside another "just works" — custom properties inherit and the     */
	/* nearest [data-colors] wins. No flip classes, no path enumeration.       */
	/* To shift an inner panel to another palette, set its own data-colors.    */
	/* ══════════════════════════════════════════════════════════════════════ */

	/* -- Primary Light ------------------------------------------------------- */
	[data-colors="primary-light"] {
		/* Palette identity */
		--pal-id:        var(--lt-id);
		--pal-name:      var(--lt-name);
		--pal-creative:  var(--lt-creative);

		/* Backgrounds */
		--background:    var(--lt-bg);
		--inner-theme:   var(--lt-alt-bg);

		/* Form fields */
		--frm-fld-bdr:   hsl(from var(--lt-txt) h s l / var(--frm-bdr-o));

		/* Text */
		--text-color:    var(--lt-txt);
		--link-color:    var(--lt-lnk);
		--link-hover:    var(--lt-lnk-hov);

		/* Headings */
		--fnt-t-big:  var(--lt-h1);
		--fnt-t-co:   var(--lt-callout);
		--fnt-t-k:    var(--lt-callout);
		--fnt-t-1:    var(--lt-h1);
		--fnt-t-2:    var(--lt-h2);
		--fnt-t-3:    var(--lt-h3);
		--fnt-t-4:    var(--lt-h4);
		--fnt-t-5:    var(--lt-h5);
		--fnt-t-6:    var(--lt-h5);
		--fnt-t-itm:  var(--lt-h1);
		--fnt-t-nt:   var(--lt-txt);
		--fnt-qte:    var(--lt-lnk);
		--fnt-atr:    var(--lt-txt);
		--fnt-phn:    var(--lt-h1);

		/* Accent & callout */
		--accent:        var(--lt-accent);
		--callout:       var(--lt-callout);

		/* Buttons */
		--btn-pry:       var(--lt-btn-pry);
		--btn-pry-txt:   var(--lt-btn-pry-txt);
		--btn-sec:       var(--lt-btn-sec);
		--btn-sec-txt:   var(--lt-btn-sec-txt);
		--btn-trt-txt:   var(--lt-btn-trt-txt);

		/* Button Hover */
		--btn-hvr-pry:  var(--dk-bg);
		--btn-hvr-pry-txt: var(--dk-txt);

		/* Compat — buttons.css / make.css */
		--buttons:            var(--lt-btn-pry);
		--btn-bg-clr-lt:      var(--lt-btn-pry);
		--btn-txt-clr-lt:     var(--lt-btn-pry-txt);
		--btn-bg-clr-lt-alt:  var(--dk-btn-pry);
		--btn-txt-clr-lt-alt: var(--dk-btn-pry-txt);
		--main-bg:            var(--lt-bg);
		--main-bg-alt:        var(--dk-bg);
		--text-alt:           var(--dk-btn-pry-txt);

		/* Border */
		--bdr-clr:       var(--lt-bdr);
		--bg-bx-bdr-clr: var(--lt-txt);

		/* Shapes */
		--shape-clr-1-dyn: var(--btn-pry-txt);
		--shape-clr-2-dyn: var(--lt-callout);
		--shape-clr-1-alt: #ffffff;

		/* Flair */
		--flr-hdr-clr:   var(--lt-btn-pry);

		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}

	/* -- Alternate Light ----------------------------------------------------- */
	[data-colors="alternate-light"] {
		--pal-id:        var(--lt-alt-id);
		--pal-name:      var(--lt-alt-name);
		--pal-creative:  var(--lt-alt-creative);

		--background:    var(--lt-alt-bg);
		--inner-theme:   var(--lt-bg);

		--frm-fld-bdr:   hsl(from var(--lt-txt) h s l / var(--frm-bdr-o));

		--text-color:    var(--lt-alt-txt);
		--link-color:    var(--lt-alt-lnk);
		--link-hover:    var(--lt-alt-lnk-hov);

		--fnt-t-big:  var(--lt-alt-h1);
		--fnt-t-co:   var(--lt-alt-callout);
		--fnt-t-k:    var(--lt-alt-callout);
		--fnt-t-1:    var(--lt-alt-h1);
		--fnt-t-2:    var(--lt-alt-h2);
		--fnt-t-3:    var(--lt-alt-h3);
		--fnt-t-4:    var(--lt-alt-h4);
		--fnt-t-5:    var(--lt-alt-h5);
		--fnt-t-6:    var(--lt-alt-h5);
		--fnt-t-itm:  var(--lt-alt-h1);
		--fnt-t-nt:   var(--lt-alt-txt);
		--fnt-qte:    var(--lt-alt-lnk);
		--fnt-atr:    var(--lt-alt-txt);
		--fnt-phn:    var(--lt-alt-h1);

		--accent:        var(--lt-alt-accent);
		--callout:       var(--lt-alt-callout);

		--btn-pry:       var(--lt-alt-btn-pry);
		--btn-pry-txt:   var(--lt-alt-btn-pry-txt);
		--btn-sec:       var(--lt-alt-btn-sec);
		--btn-sec-txt:   var(--lt-alt-btn-sec-txt);
		--btn-trt-txt:   var(--lt-alt-btn-trt-txt);

		--btn-hvr-pry:  var(--dk-alt-bg);
		--btn-hvr-pry-txt: var(--dk-alt-txt);

		--buttons:            var(--lt-alt-btn-pry);
		--btn-bg-clr-dk:      var(--lt-alt-btn-pry);
		--btn-txt-clr-dk:     var(--lt-alt-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--dk-alt-bg);
		--btn-txt-clr-dk-alt: var(--dk-alt-btn-pry-txt);
		--main-bg:            var(--lt-alt-bg);
		--main-bg-alt:        var(--dk-alt-bg);
		--text-alt:           var(--dk-alt-txt);

		--bdr-clr:       var(--lt-alt-bdr);
		--bg-bx-bdr-clr: var(--lt-alt-txt);

		--shape-clr-1-dyn: var(--btn-pry-txt);
		--shape-clr-2-dyn: var(--lt-alt-callout);
		--shape-clr-1-alt: #ffffff;

		--flr-hdr-clr:   var(--lt-alt-btn-pry);

		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}

	/* -- Primary Dark -------------------------------------------------------- */
	[data-colors="primary-dark"] {
		/* Palette identity */
		--pal-id:        var(--dk-id);
		--pal-name:      var(--dk-name);
		--pal-creative:  var(--dk-creative);

		/* Backgrounds */
		--background:    var(--dk-bg);
		--inner-theme:   var(--dk-alt-bg);

		/* Form fields */
		--frm-fld-bdr:   transparent;

		/* Text */
		--text-color:    var(--dk-txt);
		--link-color:    var(--dk-lnk);
		--link-hover:    var(--dk-lnk-hov);

		/* Headings */
		--fnt-t-big:  var(--dk-h1);
		--fnt-t-co:   var(--dk-callout);
		--fnt-t-k:    var(--dk-callout);
		--fnt-t-1:    var(--dk-h1);
		--fnt-t-2:    var(--dk-h2);
		--fnt-t-3:    var(--dk-h3);
		--fnt-t-4:    var(--dk-h4);
		--fnt-t-5:    var(--dk-h5);
		--fnt-t-6:    var(--dk-h5);
		--fnt-t-itm:  var(--dk-h4);
		--fnt-t-nt:   var(--dk-txt);
		--fnt-qte:    var(--dk-lnk);
		--fnt-atr:    var(--dk-txt);
		--fnt-phn:    var(--dk-h1);

		/* Accent & callout */
		--accent:        var(--dk-accent);
		--callout:       var(--dk-callout);

		/* Buttons */
		--btn-pry:       var(--dk-btn-pry);
		--btn-pry-txt:   var(--dk-btn-pry-txt);
		--btn-sec:       var(--dk-btn-sec);
		--btn-sec-txt:   var(--dk-btn-sec-txt);
		--btn-trt-txt:   var(--dk-btn-trt-txt);

		/* Button Hover */
		--btn-hvr-pry:  var(--lt-bg);
		--btn-hvr-pry-txt: var(--lt-txt);

		/* Compat */
		--buttons:            var(--dk-btn-pry);
		--btn-bg-clr-dk:      var(--dk-btn-pry);
		--btn-txt-clr-dk:     var(--dk-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--lt-bg);
		--btn-txt-clr-dk-alt: var(--lt-btn-pry-txt);
		--main-bg:            var(--dk-bg);
		--main-bg-alt:        var(--lt-bg);
		--text-alt:           var(--lt-txt);

		/* Border */
		--bdr-clr:       var(--dk-bdr);
		--bg-bx-bdr-clr: var(--dk-bdr);

		/* Shapes */
		--shape-clr-1-dyn: var(--dk-accent);
		--shape-clr-2-dyn: var(--dk-callout);
		--shape-clr-1-alt: #ffffff;

		/* Flair */
		--flr-hdr-clr:   var(--shape-clr-1-dyn);

		.btn-clr {
			--background: var(--btn-pry);
			--text-color: var(--btn-pry-txt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--lt-txt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--lt-txt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}

	/* -- Alternate Dark ------------------------------------------------------ */
	[data-colors="alternate-dark"] {
		--pal-id:        var(--dk-alt-id);
		--pal-name:      var(--dk-alt-name);
		--pal-creative:  var(--dk-alt-creative);

		--background:    var(--dk-alt-bg);
		--inner-theme:   var(--dk-bg);

		--frm-fld-bdr:   transparent;

		--text-color:    var(--dk-alt-txt);
		--link-color:    var(--dk-alt-lnk);
		--link-hover:    var(--dk-alt-lnk-hov);

		--fnt-t-big:  var(--dk-alt-h1);
		--fnt-t-co:   var(--dk-alt-callout);
		--fnt-t-k:    var(--dk-alt-callout);
		--fnt-t-1:    var(--dk-alt-h1);
		--fnt-t-2:    var(--dk-alt-h2);
		--fnt-t-3:    var(--dk-alt-h3);
		--fnt-t-4:    var(--dk-alt-h4);
		--fnt-t-5:    var(--dk-alt-h5);
		--fnt-t-6:    var(--dk-alt-h5);
		--fnt-t-itm:  var(--dk-alt-h4);
		--fnt-t-nt:   var(--dk-alt-txt);
		--fnt-qte:    var(--dk-alt-lnk);
		--fnt-atr:    var(--dk-alt-txt);
		--fnt-phn:    var(--dk-alt-h1);

		--accent:        var(--dk-alt-accent);
		--callout:       var(--dk-alt-callout);

		--btn-pry:       var(--dk-alt-btn-pry);
		--btn-pry-txt:   var(--dk-alt-btn-pry-txt);
		--btn-sec:       var(--dk-alt-btn-sec);
		--btn-sec-txt:   var(--dk-alt-btn-sec-txt);
		--btn-trt-txt:   var(--dk-alt-btn-trt-txt);

		--btn-hvr-pry:  var(--lt-alt-bg);
		--btn-hvr-pry-txt: var(--lt-alt-txt);

		--buttons:            var(--dk-alt-btn-pry);
		--btn-bg-clr-dk:      var(--dk-alt-btn-pry);
		--btn-txt-clr-dk:     var(--dk-alt-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--lt-alt-bg);
		--btn-txt-clr-dk-alt: var(--lt-alt-btn-pry-txt);
		--main-bg:            var(--dk-alt-bg);
		--main-bg-alt:        var(--lt-alt-bg);
		--text-alt:           var(--lt-alt-txt);

		--bdr-clr:       var(--dk-alt-bdr);
		--bg-bx-bdr-clr: var(--dk-alt-bdr);

		--shape-clr-1-dyn: var(--dk-alt-accent);
		--shape-clr-2-dyn: var(--dk-alt-callout);
		--shape-clr-1-alt: #ffffff;

		--flr-hdr-clr:   var(--shape-clr-1-dyn);

		.btn-clr {
			--background: var(--btn-pry);
			--text-color: var(--btn-pry-txt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--lt-txt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--lt-txt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}


} /* end @layer tokens */


/* -- Apply It ------------------------------------------------------------- */
/* `.flp-bg` applies here too: a flipped panel renders as a full palette      */
/* context, exactly like an element pinned with `data-colors`.                */
:is([data-colors], .flp-bg) {
	--blt-clr: var(--buttons);

	background-color: var(--background);
	color: var(--text-color);

	a, button {
		color: var(--link-color);
	}

	a.clr-swp, button.clr-swp {
		color: var(--text-color);
	}

	/* The palette blocks define .clr-pry/-sec/-acc/-blk as --text-color rebinds only.
	   Without this they never paint: `color` is applied on the [data-colors] element
	   itself, so a nested utility span keeps inheriting the section color. Links are
	   excluded — `a, button` above owns them (and .clr-lnk resolves to --link-color
	   through that rule already). */
	:is(.clr-pry, .clr-sec, .clr-acc, .clr-blk):not(a, button) {
		color: var(--text-color);
	}

	.flr_hd {
		color: var(--flr-hdr-clr);
	}

	:is( h1, h2, h3, h4, h5, h6, [class*='fnt_']:not(a), header > *:first-child:not(a) ) {
		color: var(--title-color);
	}

	.fnt_t-big {
		--title-color: var(--fnt-t-big);
	}

	.fnt_t-co {
		--title-color: var(--fnt-t-co);
	}

	:where(h1 > em, .fnt_t-k) {
		--title-color: var(--fnt-t-k);
	}

	h1,
	.fnt_t-1,
	header > *:first-child:not( a, [class*='fnt_t'] ),
	.cnt-stl:not(.xpnd) > :first-child:is( h1, h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-1);
	}

	h2,
	.fnt_t-2,
	header > *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd),
	.cnt-stl > :nth-child(2):is( h1, h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-2);
	}

	h3, .fnt_t-3 {
		--title-color: var(--fnt-t-3);
	}

	h4, .fnt_t-4 {
		--title-color: var(--fnt-t-4);
	}

	h5, .fnt_t-5 {
		--title-color: var(--fnt-t-5);
	}

	h6, .fnt_t-6 {
		--title-color: var(--fnt-t-6);
	}

	.fnt_t-itm {
		--title-color: var(--fnt-t-itm);
	}

	.fnt_t-nt {
		--title-color: var(--fnt-t-nt);
	}

	.fnt_qte {
		--title-color: var(--fnt-qte);
	}

	.fnt_atr {
		--title-color: var(--fnt-atr);
	}

	[href^=tel]:not([class*="btn"]) {
		--link-color: var(--fnt-phn);
		--link-hover: var(--fnt-phn);
	}


	.btn-clr {
		background-color: var(--background);
		color: var(--text-color);
		transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s;
	}


	[data-role="arrows"] button {
		color: var(--link-color);
	}

	@media (hover: hover) and (pointer: fine) {

		a:is(:hover, :focus-visible):not(.btn),
		button:is(:hover, :focus-visible),
		[data-role="arrows"] button:is(:hover, :focus-visible) {
			color: var(--link-hover);
		}

		a.clr-swp:is(:hover, :focus-visible):not(.btn),
		button.clr-swp:is(:hover, :focus-visible):not(.btn) {
			color: var(--link-color);
		}
	}

	select option {
		color: var(--text-color);
	}
}

/* Adopt a palette's colors (text, links, --background var for gradients, etc.)
   WITHOUT painting a solid surface — for text/scrims that sit over media. */
:is([data-colors], .flp-bg).no-bg {
	background-color: transparent;
}


/* -- Palette flip -------------------------------------------------------- */
/* `.flp-bg` is the LIGHTNESS FLIP primitive: an inner panel that adopts its  */
/* section palette's light/dark counterpart, keeping the family. It replaces  */
/* the per-module `innerTheme` expression, which had to hardcode a guess at    */
/* the section default and silently drifted out of sync. Nothing in a template */
/* names a palette any more: write `class="bg-bx flp-bg"` and the cascade      */
/* resolves the counterpart from whatever palette is actually in scope.        */
/*                                                                            */
/* Each block below is the VERBATIM body of the counterpart palette above, so  */
/* a flipped panel is indistinguishable from one pinned with `data-colors`.    */
/* Adding a token to a palette block means adding it to its counterpart's      */
/* flip block too; the parity check is a diff of the two bodies.               */
/*                                                                            */
/* `to ([data-colors])` makes each scope stop at the next explicit palette     */
/* pin, so the NEAREST palette context wins for a flip inside a nested island. */
/* KNOWN LIMIT: a `.flp-bg` inside another `.flp-bg` does not flip back (a     */
/* class cannot re-baseline a scope). Pin the inner one with `data-colors`.    */
/* An explicit `data-colors` on the flip element itself always wins — the      */
/* `:not([data-colors])` guard means the two can never both apply.            */
/* ------------------------------------------------------------------------- */

/* A flip inside primary-light adopts primary-dark. */
@scope ([data-colors="primary-light"]) to ([data-colors]) {
	.flp-bg:not([data-colors]) {
		/* Palette identity */
		--pal-id:        var(--dk-id);
		--pal-name:      var(--dk-name);
		--pal-creative:  var(--dk-creative);

		/* Backgrounds */
		--background:    var(--dk-bg);
		--inner-theme:   var(--dk-alt-bg);

		/* Form fields */
		--frm-fld-bdr:   transparent;

		/* Text */
		--text-color:    var(--dk-txt);
		--link-color:    var(--dk-lnk);
		--link-hover:    var(--dk-lnk-hov);

		/* Headings */
		--fnt-t-big:  var(--dk-h1);
		--fnt-t-co:   var(--dk-callout);
		--fnt-t-k:    var(--dk-callout);
		--fnt-t-1:    var(--dk-h1);
		--fnt-t-2:    var(--dk-h2);
		--fnt-t-3:    var(--dk-h3);
		--fnt-t-4:    var(--dk-h4);
		--fnt-t-5:    var(--dk-h5);
		--fnt-t-6:    var(--dk-h5);
		--fnt-t-itm:  var(--dk-h4);
		--fnt-t-nt:   var(--dk-txt);
		--fnt-qte:    var(--dk-lnk);
		--fnt-atr:    var(--dk-txt);
		--fnt-phn:    var(--dk-h1);

		/* Accent & callout */
		--accent:        var(--dk-accent);
		--callout:       var(--dk-callout);

		/* Buttons */
		--btn-pry:       var(--dk-btn-pry);
		--btn-pry-txt:   var(--dk-btn-pry-txt);
		--btn-sec:       var(--dk-btn-sec);
		--btn-sec-txt:   var(--dk-btn-sec-txt);
		--btn-trt-txt:   var(--dk-btn-trt-txt);

		/* Button Hover */
		--btn-hvr-pry:  var(--lt-bg);
		--btn-hvr-pry-txt: var(--lt-txt);

		/* Compat */
		--buttons:            var(--dk-btn-pry);
		--btn-bg-clr-dk:      var(--dk-btn-pry);
		--btn-txt-clr-dk:     var(--dk-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--lt-bg);
		--btn-txt-clr-dk-alt: var(--lt-btn-pry-txt);
		--main-bg:            var(--dk-bg);
		--main-bg-alt:        var(--lt-bg);
		--text-alt:           var(--lt-txt);

		/* Border */
		--bdr-clr:       var(--dk-bdr);
		--bg-bx-bdr-clr: var(--dk-bdr);

		/* Shapes */
		--shape-clr-1-dyn: var(--dk-accent);
		--shape-clr-2-dyn: var(--dk-callout);
		--shape-clr-1-alt: #ffffff;

		/* Flair */
		--flr-hdr-clr:   var(--shape-clr-1-dyn);

		.btn-clr {
			--background: var(--btn-pry);
			--text-color: var(--btn-pry-txt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--lt-txt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--lt-txt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}
}

/* A flip inside alternate-light adopts alternate-dark. */
@scope ([data-colors="alternate-light"]) to ([data-colors]) {
	.flp-bg:not([data-colors]) {
		--pal-id:        var(--dk-alt-id);
		--pal-name:      var(--dk-alt-name);
		--pal-creative:  var(--dk-alt-creative);

		--background:    var(--dk-alt-bg);
		--inner-theme:   var(--dk-bg);

		--frm-fld-bdr:   transparent;

		--text-color:    var(--dk-alt-txt);
		--link-color:    var(--dk-alt-lnk);
		--link-hover:    var(--dk-alt-lnk-hov);

		--fnt-t-big:  var(--dk-alt-h1);
		--fnt-t-co:   var(--dk-alt-callout);
		--fnt-t-k:    var(--dk-alt-callout);
		--fnt-t-1:    var(--dk-alt-h1);
		--fnt-t-2:    var(--dk-alt-h2);
		--fnt-t-3:    var(--dk-alt-h3);
		--fnt-t-4:    var(--dk-alt-h4);
		--fnt-t-5:    var(--dk-alt-h5);
		--fnt-t-6:    var(--dk-alt-h5);
		--fnt-t-itm:  var(--dk-alt-h4);
		--fnt-t-nt:   var(--dk-alt-txt);
		--fnt-qte:    var(--dk-alt-lnk);
		--fnt-atr:    var(--dk-alt-txt);
		--fnt-phn:    var(--dk-alt-h1);

		--accent:        var(--dk-alt-accent);
		--callout:       var(--dk-alt-callout);

		--btn-pry:       var(--dk-alt-btn-pry);
		--btn-pry-txt:   var(--dk-alt-btn-pry-txt);
		--btn-sec:       var(--dk-alt-btn-sec);
		--btn-sec-txt:   var(--dk-alt-btn-sec-txt);
		--btn-trt-txt:   var(--dk-alt-btn-trt-txt);

		--btn-hvr-pry:  var(--lt-alt-bg);
		--btn-hvr-pry-txt: var(--lt-alt-txt);

		--buttons:            var(--dk-alt-btn-pry);
		--btn-bg-clr-dk:      var(--dk-alt-btn-pry);
		--btn-txt-clr-dk:     var(--dk-alt-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--lt-alt-bg);
		--btn-txt-clr-dk-alt: var(--lt-alt-btn-pry-txt);
		--main-bg:            var(--dk-alt-bg);
		--main-bg-alt:        var(--lt-alt-bg);
		--text-alt:           var(--lt-alt-txt);

		--bdr-clr:       var(--dk-alt-bdr);
		--bg-bx-bdr-clr: var(--dk-alt-bdr);

		--shape-clr-1-dyn: var(--dk-alt-accent);
		--shape-clr-2-dyn: var(--dk-alt-callout);
		--shape-clr-1-alt: #ffffff;

		--flr-hdr-clr:   var(--shape-clr-1-dyn);

		.btn-clr {
			--background: var(--btn-pry);
			--text-color: var(--btn-pry-txt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--lt-txt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--lt-txt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}
}

/* A flip inside primary-dark adopts primary-light. */
@scope ([data-colors="primary-dark"]) to ([data-colors]) {
	.flp-bg:not([data-colors]) {
		/* Palette identity */
		--pal-id:        var(--lt-id);
		--pal-name:      var(--lt-name);
		--pal-creative:  var(--lt-creative);

		/* Backgrounds */
		--background:    var(--lt-bg);
		--inner-theme:   var(--lt-alt-bg);

		/* Form fields */
		--frm-fld-bdr:   hsl(from var(--lt-txt) h s l / var(--frm-bdr-o));

		/* Text */
		--text-color:    var(--lt-txt);
		--link-color:    var(--lt-lnk);
		--link-hover:    var(--lt-lnk-hov);

		/* Headings */
		--fnt-t-big:  var(--lt-h1);
		--fnt-t-co:   var(--lt-callout);
		--fnt-t-k:    var(--lt-callout);
		--fnt-t-1:    var(--lt-h1);
		--fnt-t-2:    var(--lt-h2);
		--fnt-t-3:    var(--lt-h3);
		--fnt-t-4:    var(--lt-h4);
		--fnt-t-5:    var(--lt-h5);
		--fnt-t-6:    var(--lt-h5);
		--fnt-t-itm:  var(--lt-h1);
		--fnt-t-nt:   var(--lt-txt);
		--fnt-qte:    var(--lt-lnk);
		--fnt-atr:    var(--lt-txt);
		--fnt-phn:    var(--lt-h1);

		/* Accent & callout */
		--accent:        var(--lt-accent);
		--callout:       var(--lt-callout);

		/* Buttons */
		--btn-pry:       var(--lt-btn-pry);
		--btn-pry-txt:   var(--lt-btn-pry-txt);
		--btn-sec:       var(--lt-btn-sec);
		--btn-sec-txt:   var(--lt-btn-sec-txt);
		--btn-trt-txt:   var(--lt-btn-trt-txt);

		/* Button Hover */
		--btn-hvr-pry:  var(--dk-bg);
		--btn-hvr-pry-txt: var(--dk-txt);

		/* Compat — buttons.css / make.css */
		--buttons:            var(--lt-btn-pry);
		--btn-bg-clr-lt:      var(--lt-btn-pry);
		--btn-txt-clr-lt:     var(--lt-btn-pry-txt);
		--btn-bg-clr-lt-alt:  var(--dk-btn-pry);
		--btn-txt-clr-lt-alt: var(--dk-btn-pry-txt);
		--main-bg:            var(--lt-bg);
		--main-bg-alt:        var(--dk-bg);
		--text-alt:           var(--dk-btn-pry-txt);

		/* Border */
		--bdr-clr:       var(--lt-bdr);
		--bg-bx-bdr-clr: var(--lt-txt);

		/* Shapes */
		--shape-clr-1-dyn: var(--btn-pry-txt);
		--shape-clr-2-dyn: var(--lt-callout);
		--shape-clr-1-alt: #ffffff;

		/* Flair */
		--flr-hdr-clr:   var(--lt-btn-pry);

		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}
}

/* A flip inside alternate-dark adopts alternate-light. */
@scope ([data-colors="alternate-dark"]) to ([data-colors]) {
	.flp-bg:not([data-colors]) {
		--pal-id:        var(--lt-alt-id);
		--pal-name:      var(--lt-alt-name);
		--pal-creative:  var(--lt-alt-creative);

		--background:    var(--lt-alt-bg);
		--inner-theme:   var(--lt-bg);

		--frm-fld-bdr:   hsl(from var(--lt-txt) h s l / var(--frm-bdr-o));

		--text-color:    var(--lt-alt-txt);
		--link-color:    var(--lt-alt-lnk);
		--link-hover:    var(--lt-alt-lnk-hov);

		--fnt-t-big:  var(--lt-alt-h1);
		--fnt-t-co:   var(--lt-alt-callout);
		--fnt-t-k:    var(--lt-alt-callout);
		--fnt-t-1:    var(--lt-alt-h1);
		--fnt-t-2:    var(--lt-alt-h2);
		--fnt-t-3:    var(--lt-alt-h3);
		--fnt-t-4:    var(--lt-alt-h4);
		--fnt-t-5:    var(--lt-alt-h5);
		--fnt-t-6:    var(--lt-alt-h5);
		--fnt-t-itm:  var(--lt-alt-h1);
		--fnt-t-nt:   var(--lt-alt-txt);
		--fnt-qte:    var(--lt-alt-lnk);
		--fnt-atr:    var(--lt-alt-txt);
		--fnt-phn:    var(--lt-alt-h1);

		--accent:        var(--lt-alt-accent);
		--callout:       var(--lt-alt-callout);

		--btn-pry:       var(--lt-alt-btn-pry);
		--btn-pry-txt:   var(--lt-alt-btn-pry-txt);
		--btn-sec:       var(--lt-alt-btn-sec);
		--btn-sec-txt:   var(--lt-alt-btn-sec-txt);
		--btn-trt-txt:   var(--lt-alt-btn-trt-txt);

		--btn-hvr-pry:  var(--dk-alt-bg);
		--btn-hvr-pry-txt: var(--dk-alt-txt);

		--buttons:            var(--lt-alt-btn-pry);
		--btn-bg-clr-dk:      var(--lt-alt-btn-pry);
		--btn-txt-clr-dk:     var(--lt-alt-btn-pry-txt);
		--btn-bg-clr-dk-alt:  var(--dk-alt-bg);
		--btn-txt-clr-dk-alt: var(--dk-alt-btn-pry-txt);
		--main-bg:            var(--lt-alt-bg);
		--main-bg-alt:        var(--dk-alt-bg);
		--text-alt:           var(--dk-alt-txt);

		--bdr-clr:       var(--lt-alt-bdr);
		--bg-bx-bdr-clr: var(--lt-alt-txt);

		--shape-clr-1-dyn: var(--btn-pry-txt);
		--shape-clr-2-dyn: var(--lt-alt-callout);
		--shape-clr-1-alt: #ffffff;

		--flr-hdr-clr:   var(--lt-alt-btn-pry);

		.btn-clr {
			--background: var(--buttons);
			--text-color: var(--text-alt);

			&.active {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
			}

			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				&:is(button:hover,button:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}

		.clr-pry { --text-color: var(--fnt-t-1); }
		.clr-sec { --text-color: var(--fnt-t-2); }
		.clr-acc { --text-color: var(--accent); }
		.clr-lnk { --text-color: var(--link-color); }
		.clr-blk { --text-color: var(--black); }
	}
}

/* -- Background boxes ----------------------------------------------------- */
/* A .bg-bx is the cheap "surface tint" primitive: it keeps the parent's     */
/* text/palette and only paints the inner-theme surface. If a box declares   */
/* its own data-colors, it becomes a full palette context instead — the      */
/* surface-flip steps aside (the :not([data-colors]) guard) and the palette  */
/* paints --background directly.                                             */
.bg-bx:not([data-colors], .flp-bg) {
	color: var(--text-color);

	&:not(.no-bg, .bdr-bg) {
		background-color: var(--inner-theme);
	}
}

/* Nested surface boxes alternate back to the section surface — but only      */
/* within a single palette context. A nested [data-colors] re-baselines the   */
/* alternation, so the donut scope stops at that boundary.                    */
@scope (.bg-bx:not([data-colors], .flp-bg)) to ([data-colors], .flp-bg) {
	:scope .bg-bx:not([data-colors], .flp-bg) {
		--inner-theme: var(--background);
	}
}


/* -- Kicker overrides ----------------------------------------------------- */
/* Unlayered on purpose so these beat the @layer tokens palettes above.       */
/* Castle Windows: light-palette kicker (#3b4046) differs from callout        */
/* (#1e2329) — derive from the link token. Dark palettes: kicker == callout,  */
/* so no override needed.                                                     */

[data-colors='primary-light'] {
	--fnt-t-k: var(--lt-lnk);
}

[data-colors='alternate-light'] {
	--fnt-t-k: var(--lt-alt-lnk);
}