@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;
	}


	/* ══════════════════════════════════════════════════════════════════════ */
	/* Light Colors                                                           */
	/* ══════════════════════════════════════════════════════════════════════ */
	@scope ( [data-colors="primary-light"], [data-colors="alternate-light"] .lk-bg, [data-colors="primary-dark"] .ulk-bg ) {

		:scope {
			/* 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);

			/* 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-accent);
			--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-txt);
			--fnt-t-itm:  var(--lt-h1);
			--fnt-t-nt:   var(--lt-txt);
			--fnt-qte:    var(--lt-lnk);
			--fnt-atr:    var(--lt-lnk);
			--fnt-phn:    var(--lt-txt);

			/* 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(--lt-accent);
			--shape-clr-2-dyn: var(--lt-callout);
			--shape-clr-1-alt: #ffffff;

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

		&.lk-bg, &.ulk-bg {
			--background:    var(--lt-alt-bg);
			--inner-theme:   var(--lt-bg);
		}

		.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); }

	}

		/* ══════════════════════════════════════════════════════════════════════ */
	/* Light Colors                                                           */
	/* ══════════════════════════════════════════════════════════════════════ */
	@scope ( [data-colors="alternate-light"], [data-colors="primary-light"] .lk-bg, [data-colors="alternate-dark"] .ulk-bg ) {

		:scope {
			--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);

			--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-accent);
			--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-txt);
			--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-lnk);
			--fnt-phn:    var(--lt-alt-txt);

			--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-lt:      var(--lt-alt-btn-pry);
			--btn-txt-clr-lt:     var(--lt-alt-btn-pry-txt);
			--btn-bg-clr-lt-alt:  var(--dk-bg);
			--btn-txt-clr-lt-alt: var(--dk-btn-pry-txt);

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

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

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

		&.lk-bg {
			--background:    var(--lt-bg);
			--inner-theme:   var(--lt-alt-bg);
		}

		.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); }

	}


	/* ══════════════════════════════════════════════════════════════════════ */
	/* Dark Colors                                                            */
	/* ══════════════════════════════════════════════════════════════════════ */
	@scope ( [data-colors="primary-dark"], [data-colors="alternate-dark"] .lk-bg, [data-colors="primary-light"] .ulk-bg ) {

		:scope {
			/* 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);

			/* 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-accent);
			--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-txt);
			--fnt-t-itm:  var(--dk-h1);
			--fnt-t-nt:   var(--dk-txt);
			--fnt-qte:    var(--dk-txt);
			--fnt-atr:    var(--dk-txt);
			--fnt-phn:    var(--dk-txt);

			/* 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 - review this!! */
			--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-btn-pry-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; /* Review this */

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

		&.lk-bg, &.ulk-bg {
			--background:    var(--dk-alt-bg);
			--inner-theme:   var(--dk-bg);
		}
	
		/* Review all of this */
		.ulk-bg, .alt-bg {
			.btn-clr {
				@media (hover: hover) and (pointer: fine) {
					&:is(a:hover,a:focus-visible),
					a:is(:hover,:focus-visible) {
						--background: var(--main-bg-alt);
						--text-color: var(--dk-txt);
						--link-hover: var(--text-color);
					}
				}
			}
		}

		.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(--dk-txt);
					--link-hover: var(--text-color);
				}
			}
		}

	}

		/* ══════════════════════════════════════════════════════════════════════ */
	/* Dark Colors                                                            */
	/* ══════════════════════════════════════════════════════════════════════ */
	@scope ( [data-colors="alternate-dark"], [data-colors="primary-dark"] .lk-bg, [data-colors="alternate-light"] .ulk-bg ) {

		:scope {
			--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);

			--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-accent);
			--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-txt);
			--fnt-t-itm:  var(--dk-alt-h1);
			--fnt-t-nt:   var(--dk-alt-txt);
			--fnt-qte:    var(--dk-alt-txt);
			--fnt-atr:    var(--dk-alt-txt);
			--fnt-phn:    var(--dk-alt-txt);

			--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-bg);
			--btn-txt-clr-dk-alt: var(--lt-btn-pry-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);
		}

		&.lk-bg {
			--background:    var(--dk-bg);
			--inner-theme:   var(--dk-alt-bg);
		}

		/* Review all of this */
		.ulk-bg, .alt-bg {
			.btn-clr {
				@media (hover: hover) and (pointer: fine) {
					&:is(a:hover,a:focus-visible),
					a:is(:hover,:focus-visible) {
						--background: var(--main-bg-alt);
						--text-color: var(--dk-txt);
						--link-hover: var(--text-color);
					}
				}
			}
		}

	

		.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(--dk-txt);
					--link-hover: var(--text-color);
				}
			}
		}

	}


/* ══════════════════════════════════════════════════════════════════════ */
	/* Two-flip overrides                                                     */
	/* When a .bg-bx has two nested flip classes in its ancestry within a     */
	/* [data-colors] root, it lands at a cumulative destination palette.      */
	/* Two semantics combined here:                                           */
	/*   * Interleave (ulk + lk in either order): diagonal of starting palette*/
	/*   * Same-class double (ulk² or lk²): equivalent to a single flip of    */
	/*     the opposite class (ulk² = lk, lk² = ulk)                          */
	/* Each block below lands its element directly at the terminal palette,  */
	/* beating the one-flip scopes above by source order and specificity.    */
	/* No re-flip block — already at the destination.                         */
	/* ══════════════════════════════════════════════════════════════════════ */

	/* All paths landing at alternate-light (A_L):                          */
	/*   primary-dark  > ulk/lk  > lk/ulk    (interleave / diagonal)         */
	/*   primary-light > ulk     > ulk       (ulk² = lk)                     */
	/*   alternate-dark > lk     > lk        (lk² = ulk)                     */
	@scope ( [data-colors="primary-dark"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="primary-light"] .ulk-bg .ulk-bg, [data-colors="alternate-dark"] .lk-bg .lk-bg ) {

		:scope {
			--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);

			--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(--lt-alt-accent);
			--shape-clr-2-dyn: var(--lt-alt-callout);
			--shape-clr-1-alt: #ffffff;

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

	}

	/* All paths landing at primary-light (P_L):                            */
	/*   alternate-dark  > ulk/lk  > lk/ulk  (interleave / diagonal)         */
	/*   alternate-light > ulk     > ulk     (ulk² = lk)                     */
	/*   primary-dark    > lk      > lk      (lk² = ulk)                     */
	@scope ( [data-colors="alternate-dark"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="alternate-light"] .ulk-bg .ulk-bg, [data-colors="primary-dark"] .lk-bg .lk-bg ) {

		:scope {
			--pal-id:        var(--lt-id);
			--pal-name:      var(--lt-name);
			--pal-creative:  var(--lt-creative);

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

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

			--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:        var(--lt-accent);
			--callout:       var(--lt-callout);

			--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);

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

			--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);

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

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

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

	}

	/* All paths landing at alternate-dark (A_D):                           */
	/*   primary-light   > ulk/lk  > lk/ulk  (interleave / diagonal)         */
	/*   primary-dark    > ulk     > ulk     (ulk² = lk)                     */
	/*   alternate-light > lk      > lk      (lk² = ulk)                     */
	@scope ( [data-colors="primary-light"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="primary-dark"] .ulk-bg .ulk-bg, [data-colors="alternate-light"] .lk-bg .lk-bg ) {

		:scope {
			--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);

			--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);
		}

	}

	/* All paths landing at primary-dark (P_D):                             */
	/*   alternate-light > ulk/lk  > lk/ulk  (interleave / diagonal)         */
	/*   alternate-dark  > ulk     > ulk     (ulk² = lk)                     */
	/*   primary-light   > lk      > lk      (lk² = ulk)                     */
	@scope ( [data-colors="alternate-light"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="alternate-dark"] .ulk-bg .ulk-bg, [data-colors="primary-light"] .lk-bg .lk-bg ) {

		:scope {
			--pal-id:        var(--dk-id);
			--pal-name:      var(--dk-name);
			--pal-creative:  var(--dk-creative);

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

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

			--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:        var(--dk-accent);
			--callout:       var(--dk-callout);

			--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);

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

			--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);

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

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

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

	}


} /* end @layer tokens */


/* ── Apply It ───────────────────────────────────────────────────────────── */
[data-colors] {
	--blt-clr: var(--buttons);

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

	.bg-bx {
		color: var(--text-color);

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

		.bg-bx {
			--inner-theme: var(--background);
		}
	}

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

	a.clr-swp, button.clr-swp {
		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);
		em, strong {
			--title-color: var(--accent);
			color: var(--title-color);
			font-style: normal;
			font-weight: inherit;
		}
	}

	.fnt_t-co {
		--title-color: var(--fnt-t-co);
		em, strong {
			--title-color: var(--accent);
			color: var(--title-color);
			font-style: normal;
			font-weight: inherit;
		}
	}

	:where(h1 > em, .fnt_t-k),
	header > *:first-child:not( a, [class*='fnt_t'] ) :is(strong, em) {
		--title-color: var(--fnt-t-k);
		color: var(--title-color);
	}

	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);
		em, strong {
			--title-color: var(--accent);
			color: var(--title-color);
			font-style: normal;
			font-weight: inherit;
		}
	}
	
	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);
		em, strong {
			--title-color: var(--accent);
			color: var(--title-color);
			font-style: normal;
			font-weight: inherit;
		}
	}

	header:has(*:first-child > :is(strong, em)) > *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd) {
		--title-color: var(--fnt-t-1);
	}

	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);
	}

	.cnt-stl ul li:before {
		background-color: var(--blt-clr);
	}

	.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);
	}
}

[data-colors="alternate-dark"] {
	background: linear-gradient(to bottom, var(--background), var(--inner-theme));
}