/**/
/*** COLOR ***/
/**/

.background-none {
	background: transparent;
	color: inherit;
}

.background-reliable-red {
	background-color: var(--color-reliable-red);
	color: var(--color-true-black);
}

.background-observant-orange {
	background-color: var(--color-observant-orange);
	color: var(--color-new-growth-navy);
}

.background-youthful-yellow {
	background-color: var(--color-youthful-yellow);
	color: var(--color-new-growth-navy);
}

.background-building-block-blue {
	background-color: var(--color-building-block-blue);
	color: var(--color-new-growth-navy);
}

.background-guided-green {
	background-color: var(--color-guided-green);
	color: var(--color-new-growth-navy);
}

.background-versatile-violet {
	background-color: var(--color-versatile-violet);
	color: var(--color-true-black);
}

.background-new-growth-navy {
	background-color: var(--color-new-growth-navy);
	color: var(--color-curious-cream);
}

.background-curious-cream {
	background-color: var(--color-curious-cream);
	color: var(--color-new-growth-navy);
}

.background-true-black {
	background-color: var(--color-true-black);
	color: var(--color-true-white);
}

.background-true-white {
	background-color: var(--color-true-white);
	color: var(--color-true-black);
}

[class*="background-"] a {
	color: inherit;
}

.background-new-growth-navy a:focus-visible,
.background-true-black a:focus-visible {
	outline-color: var(--color-curious-cream);
}
