// This CSS is usually generated by Global Styles.
// However when a colors is not defined, the CSS for that color isn't output.
// This means that when users switch between themes colors set in one theme won't be carried over to another.
// By including all this CSS in every theme we ensure that these colors work across themes.
// The difference between this and the Global Styles CSS is that we reference the custom variables not the preset ones.
// This means that undefined colors are mapped to defined ones.

.has-primary-background-color {
	background-color: var(--wp--custom--color--primary);
}

.has-secondary-background-color {
	background-color: var(--wp--custom--color--secondary);
}

.has-foreground-background-color {
	background-color: var(--wp--custom--color--foreground);
}

.has-background-background-color {
	background-color: var(--wp--custom--color--background);
}

.has-tertiary-background-color {
	background-color: var(--wp--custom--color--tertiary);
}

.has-primary-color {
	color: var(--wp--custom--color--primary);
}

.has-secondary-color {
	color: var(--wp--custom--color--secondary);
}

.has-foreground-color {
	color: var(--wp--custom--color--foreground);
}

.has-background-color {
	color: var(--wp--custom--color--background);
}

.has-tertiary-color {
	color: var(--wp--custom--color--tertiary);
}