/**
 * Colour schemes for a whole section: Soft, Accent and Dark.
 *
 * Patterns are written against the light palette. Rather than rewriting every
 * colour a pattern sets, a scheme re-points the palette's variables inside the
 * section it is on, so a heading written as "pc-headings" is still that, and
 * pc-headings simply means something else in here. Explicit colours, section
 * styles, the global heading, link and button rules all read the same
 * variables, so they all follow.
 *
 * Swapping two variables on one element would make each depend on the other,
 * so the palette is first copied into --pc-base-* where WordPress declares it.
 * Those are resolved there and inherited as plain colours.
 *
 * Covers are put back to the base palette. Their colours are chosen against
 * their own image and overlay, which a scheme knows nothing about.
 *
 * Loaded by Page Core itself rather than the Design Library module, because the
 * class stays on content after the module is switched off.
 */

:root,
.editor-styles-wrapper {
	--pc-base-accent: var(--wp--preset--color--pc-accent);
	--pc-base-accent-dark: var(--wp--preset--color--pc-accent-dark);
	--pc-base-accent-light: var(--wp--preset--color--pc-accent-light);
	--pc-base-accent-text: var(--wp--preset--color--pc-accent-text);
	--pc-base-background: var(--wp--preset--color--pc-background);
	--pc-base-section: var(--wp--preset--color--pc-section);
	--pc-base-border: var(--wp--preset--color--pc-border);
	--pc-base-headings: var(--wp--preset--color--pc-headings);
	--pc-base-text: var(--wp--preset--color--pc-text);
	--pc-base-link: var(--wp--preset--color--pc-link);
}

/* Soft: the section tint behind, white cards on it. */
.pc-scheme-soft {
	--wp--preset--color--pc-background: var(--pc-base-section);
	--wp--preset--color--pc-section: var(--pc-base-background);
}

/* Dark: the headings colour behind, the light end of the palette on top. */
.pc-scheme-dark {
	--wp--preset--color--pc-background: var(--pc-base-headings);
	--wp--preset--color--pc-section: color-mix(in srgb, var(--pc-base-headings) 88%, var(--pc-base-background));
	--wp--preset--color--pc-border: color-mix(in srgb, var(--pc-base-headings) 78%, var(--pc-base-background));
	--wp--preset--color--pc-headings: var(--pc-base-background);
	--wp--preset--color--pc-text: color-mix(in srgb, var(--pc-base-background) 78%, var(--pc-base-headings));
	--wp--preset--color--pc-link: var(--pc-base-accent-light);
	--wp--preset--color--pc-accent-light: color-mix(in srgb, var(--pc-base-accent) 30%, var(--pc-base-headings));
}

/* Accent: the accent behind, so buttons turn over to stay visible on it. */
.pc-scheme-accent {
	--wp--preset--color--pc-background: var(--pc-base-accent);
	--wp--preset--color--pc-section: var(--pc-base-accent-dark);
	--wp--preset--color--pc-border: color-mix(in srgb, var(--pc-base-accent-text) 28%, var(--pc-base-accent));
	--wp--preset--color--pc-headings: var(--pc-base-accent-text);
	--wp--preset--color--pc-text: color-mix(in srgb, var(--pc-base-accent-text) 85%, var(--pc-base-accent));
	--wp--preset--color--pc-link: var(--pc-base-accent-text);
	--wp--preset--color--pc-accent: var(--pc-base-accent-text);
	--wp--preset--color--pc-accent-text: var(--pc-base-accent);
	--wp--preset--color--pc-accent-dark: color-mix(in srgb, var(--pc-base-accent-text) 85%, var(--pc-base-accent));
	--wp--preset--color--pc-accent-light: color-mix(in srgb, var(--pc-base-accent-text) 18%, var(--pc-base-accent));
}

/*
 * The section's own surface. Doubled up on the block class so it outranks a
 * background the pattern set on the same group, which is written for the
 * light palette and is exactly what the scheme is replacing.
 */
.wp-block-group.pc-scheme-soft,
.wp-block-group.pc-scheme-dark,
.wp-block-group.pc-scheme-accent {
	background-color: var(--wp--preset--color--pc-background) !important;
	color: var(--wp--preset--color--pc-text);
}

.pc-scheme-soft .wp-block-cover,
.pc-scheme-dark .wp-block-cover,
.pc-scheme-accent .wp-block-cover {
	--wp--preset--color--pc-accent: var(--pc-base-accent);
	--wp--preset--color--pc-accent-dark: var(--pc-base-accent-dark);
	--wp--preset--color--pc-accent-light: var(--pc-base-accent-light);
	--wp--preset--color--pc-accent-text: var(--pc-base-accent-text);
	--wp--preset--color--pc-background: var(--pc-base-background);
	--wp--preset--color--pc-section: var(--pc-base-section);
	--wp--preset--color--pc-border: var(--pc-base-border);
	--wp--preset--color--pc-headings: var(--pc-base-headings);
	--wp--preset--color--pc-text: var(--pc-base-text);
	--wp--preset--color--pc-link: var(--pc-base-link);
}