/**
 * Surface-context rules.
 *
 * theme.json styles cannot express ancestor-dependent selectors, so anything
 * whose correct value depends on the surface it sits on has to live here.
 *
 * These are an accessibility floor, not styling. They apply automatically
 * whenever an editor picks a dark background, so there is nothing to remember
 * and nothing to tick. Every ratio below is measured; see README.md.
 *
 * An explicit color set in the editor still wins — core emits preset color
 * classes with !important, so these are defaults, not locks.
 */

/* --------------------------------------------------------------------------
 * Headings
 * theme.json sets headings to `contrast` (#153841), which is the same value as
 * `surface-dark`. Without this, a heading on a Deep Tide band is invisible.
 * h1/h2 take body-on-dark; h3/h4 take Rim Light, mirroring Deep Teal on light.
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color :is(h1, h2, h5, h6),
.has-surface-deep-background-color :is(h1, h2, h5, h6) {
	color: var(--wp--preset--color--text-on-dark);
}

.has-surface-dark-background-color :is(h3, h4),
.has-surface-deep-background-color :is(h3, h4) {
	color: var(--wp--preset--color--accent-on-dark);
}

/* --------------------------------------------------------------------------
 * Kicker
 * The variation hard-codes Deep Teal, which measures 1.67:1 on Deep Tide.
 * Rim Light gives 5.49:1 on Deep Tide and 7.20:1 on Abyss.
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color .is-style-kicker,
.has-surface-deep-background-color .is-style-kicker {
	color: var(--wp--preset--color--accent-on-dark);
}

/* --------------------------------------------------------------------------
 * Links
 * Sea Teal measures 2.36:1 on Deep Tide. Hover in Deep Teal is worse at 1.67:1,
 * so the hover has to lighten on dark where it darkens on light.
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color a:where(:not(.wp-element-button)),
.has-surface-deep-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-on-dark);
}

.has-surface-dark-background-color a:where(:not(.wp-element-button)):hover,
.has-surface-deep-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--text-on-dark);
}

/* --------------------------------------------------------------------------
 * Buttons
 * Rim Light fill with Abyss text: 7.20:1 text, 5.49:1 against the band.
 * Hover lightens to body-on-dark rather than darkening.
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color :is(.wp-element-button, .wp-block-button__link),
.has-surface-deep-background-color :is(.wp-element-button, .wp-block-button__link) {
	background-color: var(--wp--preset--color--accent-on-dark);
	color: var(--wp--preset--color--surface-deep);
}

.has-surface-dark-background-color :is(.wp-element-button, .wp-block-button__link):hover,
.has-surface-deep-background-color :is(.wp-element-button, .wp-block-button__link):hover {
	background-color: var(--wp--preset--color--text-on-dark);
	color: var(--wp--preset--color--surface-deep);
}

/* --------------------------------------------------------------------------
 * Focus ring
 * Sea Teal measures 2.36:1 against Deep Tide, below the 3:1 WCAG requires for
 * non-text. Rim Light gives 5.49:1. Width and offset stay per the brand.
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color :focus-visible,
.has-surface-deep-background-color :focus-visible {
	outline-color: var(--wp--preset--color--accent-on-dark);
	outline-style: solid;
	outline-width: 2px;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Hairlines
 * -------------------------------------------------------------------------- */
.has-surface-dark-background-color hr.wp-block-separator,
.has-surface-deep-background-color hr.wp-block-separator {
	color: var(--wp--preset--color--hairline-dark);
}