/**
 * .is-inverted — per-section color-scheme inversion.
 *
 * Remaps the theme's color-ROLE custom properties within an `.is-inverted`
 * subtree, so a whole section flips light <-> dark WITHOUT editing pattern
 * markup. Palette-agnostic: it references role variables only (never hex), so it
 * works with every theme.json style variation.
 *
 * Used by the Site Generator: when a page carries a second banner and no other
 * banner fits the brief, the closing banner reuses the same pattern with this
 * class applied (see Page_Assembler::apply_inverted_class).
 *
 * WHY THE `--le-src-*` SNAPSHOT TIER: reassigning a role to another role that is
 * ALSO reassigned on the same element (e.g. background <- ink AND ink <-
 * background) is a CSS custom-property dependency CYCLE, which the spec resolves
 * to the guaranteed-invalid value — colors would blank out, not swap. The
 * snapshot tier captures the ACTIVE palette once on an ancestor, so the role
 * remaps below reference the ORIGINAL values and no cycle forms. This yields
 * exactly the intended swap.
 *
 * Loaded in BOTH the editor and the front end (functions.php: add_editor_style
 * + wp_enqueue_style) so the editor matches the front end (Philosophy 2.9).
 */

/* Stable snapshot of the active palette. Declared where the palette lives in
   each context — :root on the front end, the editor canvas wrapper in the
   iframed editor — so `.is-inverted` (always a descendant) inherits the
   original values. */
:root,
.editor-styles-wrapper {
	--le-src-background: var(--wp--preset--color--background);
	--le-src-surface:    var(--wp--preset--color--surface);
	--le-src-ink:        var(--wp--preset--color--ink);
	--le-src-primary:    var(--wp--preset--color--primary);
	--le-src-secondary:  var(--wp--preset--color--secondary);
	--le-src-text-muted: var(--wp--preset--color--text-muted);
}

.is-inverted {
	--wp--preset--color--background: var(--le-src-ink);
	--wp--preset--color--ink:        var(--le-src-background);
	--wp--preset--color--surface:    var(--le-src-ink);
	--wp--preset--color--text-muted: var(--le-src-secondary);
	--wp--preset--color--secondary:  var(--le-src-primary);
	--wp--preset--color--primary:    var(--le-src-background);
	/* accent and hairline (border): unchanged */

	/* Ground + text for a section whose root paints nothing itself. A transparent
	   root (8 of the 10 contact patterns) shows the PAGE ground, so the token remap
	   above changes no pixel there; and `color` reaches it from body as a COMPUTED
	   value, so the remapped `ink` token is never re-read by plain paragraphs. Both
	   are re-declared here, NON-important: a root with an explicit preset class
	   (`has-*-background-color` / `has-*-color`, always !important) still wins and
	   flips through the token remap exactly as before. */
	background-color: var(--le-src-ink);
	color: var(--wp--preset--color--ink);
}

/* surface -> ink makes surface panels blend into the inverted base, leaving only
   their border visible (the outline-card effect). Guarantee an outline so a
   borderless surface panel still reads as a bounded panel. */
.is-inverted .has-surface-background-color {
	border: 1px solid var(--wp--preset--color--hairline);
}

/**
 * Buttons opt OUT of the inversion entirely.
 *
 * A button is a self-contained figure — a fill and a label color chosen together —
 * so re-pointing the roles underneath it breaks that pair rather than adapting it.
 * theme.json styles every button `background: primary` / `text: background`, and
 * the remap above moves those two roles in OPPOSITE directions: `primary` becomes
 * the light background while `background` becomes dark ink. The fill turns light,
 * and the rule that used to live here then forced the label to `ink` — also light
 * under inversion — painting the same color twice and erasing the label.
 *
 * Restoring the whole snapshot ON THE BUTTON is what "leave buttons alone" means in
 * a token system: every role the button might reference, its own preset classes
 * included, resolves to the value it carries everywhere else, so a button inside an
 * inverted section renders identically to the same button outside one. Declared on
 * the element itself, so it beats the ancestor's remap whatever the specificity.
 *
 * `accent` and `hairline` are absent deliberately — inversion never remaps them.
 * CF7 submits are NOT covered: they are `.themed-form input[type=submit]` driven by
 * the plugin's own `--cfsp-submit-*` variables, outside this token path entirely.
 */
.is-inverted .wp-element-button,
.is-inverted .wp-block-button__link {
	--wp--preset--color--background: var(--le-src-background);
	--wp--preset--color--surface:    var(--le-src-surface);
	--wp--preset--color--ink:        var(--le-src-ink);
	--wp--preset--color--primary:    var(--le-src-primary);
	--wp--preset--color--secondary:  var(--le-src-secondary);
	--wp--preset--color--text-muted: var(--le-src-text-muted);
}

/**
 * .is-alt-surface — a LIGHTER swap: only background <-> surface (NOT the full
 * dark flip). Used by the Site Generator to differentiate two adjacent
 * light-neutral sections for visual separation (see Selection_Engine::
 * apply_background_scheme). Everything except those two neutral tones is
 * untouched (ink text, primary, accent, etc. stay put).
 *
 * The last declaration is a NON-important fallback so a section with NO explicit
 * background (transparent, showing the page's `background`) still gets a surface
 * fill; a section with an explicit `has-background-background-color` /
 * `has-surface-background-color` (both `!important`) instead flips via the token
 * remap above and the fallback is harmlessly overridden.
 */
.is-alt-surface {
	--wp--preset--color--background: var(--le-src-surface);
	--wp--preset--color--surface:    var(--le-src-background);
	background-color: var(--le-src-surface);
}

/**
 * Both together — `.is-inverted.is-alt-surface` — is the inversion landing on the
 * SURFACE light instead of the BACKGROUND light: an ink-based section flipped light
 * whose neighbor above is already `background`. It is the third ground an ink section
 * can reach, which is what lets the last section before the footer always differ from
 * both the section above it and the footer (see Selection_Engine::
 * apply_background_scheme). Written out explicitly because the two single-class rules
 * fight over `--background` by source order: `.is-alt-surface` would win and put the
 * inverted section's light text on a light ground. The combined selector out-ranks
 * both. `--text-muted` / `--secondary` / `--primary` still come from `.is-inverted`.
 */
.is-inverted.is-alt-surface {
	--wp--preset--color--background: var(--le-src-ink);
	--wp--preset--color--ink:        var(--le-src-surface);
	--wp--preset--color--surface:    var(--le-src-ink);
	background-color: var(--le-src-surface);
}