/**
 * UN ChromaLab — Tint utility classes.
 *
 * Drop-in classes that colour any element from the currently-selected ChromaLab
 * filter colour. The colour is mirrored into the `--un-chroma-color` custom
 * property on :root by assets/js/un-chroma-tint.js (driven by the `chromalab:color`
 * event). While no colour is active the property is unset and each element falls
 * back to its natural colour — or to an author-supplied `--un-chroma-fallback`.
 *
 * Usage (Elementor → Advanced → CSS Classes, or any theme-part markup):
 *   .un-chroma-fg      → text colour
 *   .un-chroma-bg      → background colour
 *   .un-chroma-fill    → SVG fill (e.g. the header logo)
 *   .un-chroma-border  → border colour
 *
 * Per-element idle colour: set `--un-chroma-fallback: <color>` on the element.
 * Sticky-header example: target `.is-sticky .un-chroma-fill` to tint the logo
 * only once the header detaches (the sticky class is toggled by un-site-logo.js).
 *
 * Self-contained: no dependency on tokens.css, so it is safe to load site-wide.
 */

.un-chroma-fg {
	color: var(--un-chroma-color, var(--un-chroma-fallback, inherit));
	transition: color 0.25s ease;
}

.un-chroma-bg {
	background-color: var(--un-chroma-color, var(--un-chroma-fallback, transparent));
	transition: background-color 0.25s ease;
}

.un-chroma-fill {
	fill: var(--un-chroma-color, var(--un-chroma-fallback, currentColor));
	transition: fill 0.25s ease;
}

.un-chroma-fill path,
.un-chroma-fill rect,
.un-chroma-fill circle,
.un-chroma-fill polygon {
	fill: inherit;
	transition: fill 0.25s ease;
}

.un-chroma-border {
	border-color: var(--un-chroma-color, var(--un-chroma-fallback, currentColor));
	transition: border-color 0.25s ease;
}