/**
 * Colour mode semantic tokens + button style helpers.
 *
 * Mode classes come from Group block styles: is-style-mode-{light|dark|blue|yellow}.
 * Button styles: Yellow/fill (default), Blue, Outline, Underline — colours from tokens.
 */

:root {
	--sohk--color--background: var(--wp--preset--color--white);
	--sohk--color--heading: var(--wp--preset--color--slate);
	--sohk--color--text: var(--wp--preset--color--slate);
	--sohk--color--highlight: var(--wp--preset--color--yellow);
	--sohk--color--highlight-alt: var(--wp--preset--color--blue);
	--sohk--color--button-background: var(--wp--preset--color--yellow);
	--sohk--color--button-text: var(--wp--preset--color--slate);
	--sohk--color--button-blue-background: var(--wp--preset--color--blue);
	--sohk--color--button-blue-text: var(--wp--preset--color--white);
	--sohk--color--button-outline-border: var(--wp--preset--color--yellow);
	--sohk--color--button-outline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-line: var(--wp--preset--color--yellow);
	--sohk--color--heading-highlight: var(--wp--preset--color--white);
	--sohk--color--border: var(--wp--preset--color--light-grey);
	--sohk--color--placeholder: var(--wp--preset--color--light-grey);
}

.is-style-mode-light {
	--sohk--color--background: var(--wp--preset--color--white);
	--sohk--color--heading: var(--wp--preset--color--slate);
	--sohk--color--text: var(--wp--preset--color--slate);
	--sohk--color--highlight: var(--wp--preset--color--yellow);
	--sohk--color--highlight-alt: var(--wp--preset--color--blue);
	--sohk--color--button-background: var(--wp--preset--color--yellow);
	--sohk--color--button-text: var(--wp--preset--color--slate);
	--sohk--color--button-blue-background: var(--wp--preset--color--blue);
	--sohk--color--button-blue-text: var(--wp--preset--color--white);
	--sohk--color--button-outline-border: var(--wp--preset--color--yellow);
	--sohk--color--button-outline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-line: var(--wp--preset--color--blue);
	--sohk--color--heading-highlight: var(--wp--preset--color--white);
	--sohk--color--border: var(--wp--preset--color--light-grey);
	--sohk--color--placeholder: var(--wp--preset--color--light-grey);
}

.is-style-mode-dark {
	--sohk--color--background: var(--wp--preset--color--slate);
	--sohk--color--heading: var(--wp--preset--color--yellow);
	--sohk--color--text: var(--wp--preset--color--white);
	--sohk--color--highlight: var(--wp--preset--color--yellow);
	--sohk--color--highlight-alt: var(--wp--preset--color--yellow);
	--sohk--color--button-background: var(--wp--preset--color--yellow);
	--sohk--color--button-text: var(--wp--preset--color--slate);
	--sohk--color--button-blue-background: var(--wp--preset--color--blue);
	--sohk--color--button-blue-text: var(--wp--preset--color--white);
	--sohk--color--button-outline-border: var(--wp--preset--color--yellow);
	--sohk--color--button-outline-text: var(--wp--preset--color--white);
	--sohk--color--button-underline-text: var(--wp--preset--color--white);
	--sohk--color--button-underline-line: var(--wp--preset--color--yellow);
	--sohk--color--heading-highlight: var(--wp--preset--color--white);
	--sohk--color--border: var(--wp--preset--color--slate);
	--sohk--color--placeholder: var(--wp--preset--color--light-grey);
}

.is-style-mode-blue {
	--sohk--color--background: var(--wp--preset--color--blue);
	--sohk--color--heading: var(--wp--preset--color--white);
	--sohk--color--text: var(--wp--preset--color--white);
	--sohk--color--highlight: var(--wp--preset--color--yellow);
	--sohk--color--highlight-alt: var(--wp--preset--color--yellow);
	--sohk--color--button-background: var(--wp--preset--color--yellow);
	--sohk--color--button-text: var(--wp--preset--color--slate);
	--sohk--color--button-blue-background: var(--wp--preset--color--white);
	--sohk--color--button-blue-text: var(--wp--preset--color--slate);
	--sohk--color--button-outline-border: var(--wp--preset--color--yellow);
	--sohk--color--button-outline-text: var(--wp--preset--color--white);
	--sohk--color--button-underline-text: var(--wp--preset--color--white);
	--sohk--color--button-underline-line: var(--wp--preset--color--yellow);
	--sohk--color--heading-highlight: var(--wp--preset--color--white);
	--sohk--color--border: var(--wp--preset--color--slate);
	--sohk--color--placeholder: var(--wp--preset--color--light-grey);
}

.is-style-mode-yellow {
	--sohk--color--background: var(--wp--preset--color--yellow);
	--sohk--color--heading: var(--wp--preset--color--slate);
	--sohk--color--text: var(--wp--preset--color--slate);
	--sohk--color--highlight: var(--wp--preset--color--yellow);
	--sohk--color--highlight-alt: var(--wp--preset--color--blue);
	--sohk--color--button-background: var(--wp--preset--color--blue);
	--sohk--color--button-text: var(--wp--preset--color--white);
	--sohk--color--button-blue-background: var(--wp--preset--color--white);
	--sohk--color--button-blue-text: var(--wp--preset--color--slate);
	--sohk--color--button-outline-border: var(--wp--preset--color--blue);
	--sohk--color--button-outline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-text: var(--wp--preset--color--slate);
	--sohk--color--button-underline-line: var(--wp--preset--color--blue);
	--sohk--color--heading-highlight: var(--wp--preset--color--white);
	--sohk--color--border: var(--wp--preset--color--slate);
	--sohk--color--placeholder: var(--wp--preset--color--light-grey);
}

/* Inline highlight (core highlight / mark). */
mark {
	background-color: var(--sohk--color--highlight);
	color: var(--sohk--color--button-text);
}

/* Optional heading highlight helper class for spans. */
.has-heading-highlight {
	background-color: var(--sohk--color--heading-highlight);
	color: var(--sohk--color--heading);
}