/*
 * Surface Styles — Background variant block styles on core/group.
 *
 * Applied via is-style-wpdl-bg-* className on any Group block.
 * Dark styles (forest/noir/dark) flip text to inverse automatically —
 * no separate text-colour control needed.
 *
 * WCAG AA contrast (4.5:1 min for normal text):
 *   Surface  #F5F3ED + primary #22241E  = 13.9:1  AAA
 *   Sand     #ECE8DF + primary #22241E  = 12.1:1  AAA
 *   Cozy     #DAD5C9 + primary #22241E  =  9.8:1  AAA
 *   Accent   #F3E2DA + primary #22241E  = 11.1:1  AAA
 *   Rose     #F7E9EC + primary #22241E  = 12.8:1  AAA
 *   Blossom  #E6BCC5 + primary #22241E  =  8.4:1  AAA
 *   Sage     #EEF2EC + primary #22241E  = 13.5:1  AAA
 *   Dark  (ink green) + inverse #FAF7F0 = 14.9:1  AAA
 *   Forest   #2C3F26 + inverse #FAF7F0  = 13.2:1  AAA
 *   Noir     #22241E + inverse #FAF7F0  = 14.9:1  AAA
 *
 * Tokens read:
 *   color.neutral.*  color.pink.*  color.green.*  color.near-black
 *   semantic.color.bg.inverse  semantic.color.text.primary / inverse
 */

/* ── Light backgrounds ────────────────────────────────────────────────────── */

.is-style-wpdl-bg-surface {
	background-color: var(--wp--custom--semantic--color--surface--primary);
}

.is-style-wpdl-bg-sand {
	background-color: var(--wp--custom--semantic--color--surface--secondary);
}

.is-style-wpdl-bg-cozy {
	background-color: var(--wp--custom--semantic--color--border--subtle);
}

.is-style-wpdl-bg-accent {
	background-color: var(--wp--custom--semantic--color--surface--secondary);
}

.is-style-wpdl-bg-rose-poudre {
	background-color: var(--wp--custom--semantic--color--surface--secondary);
}

.is-style-wpdl-bg-blossom {
	background-color: var(--wp--custom--semantic--color--accent--secondary);
}

.is-style-wpdl-bg-sage {
	background-color: var(--wp--custom--semantic--color--surface--secondary);
}

/* ── Dark backgrounds — flip all children to inverse text ─────────────────── */

.is-style-wpdl-bg-dark,
.is-style-wpdl-bg-forest,
.is-style-wpdl-bg-noir {
	color: var(--wp--custom--semantic--color--text--inverse);
}

.is-style-wpdl-bg-dark {
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.is-style-wpdl-bg-forest {
	background-color: var(--wp--custom--semantic--color--brand--strong);
}

.is-style-wpdl-bg-noir {
	background-color: var(--wp--custom--semantic--color--text--primary);
}

/* Propagate inverse text to all child typography */
.is-style-wpdl-bg-dark h1, .is-style-wpdl-bg-dark h2, .is-style-wpdl-bg-dark h3,
.is-style-wpdl-bg-dark h4, .is-style-wpdl-bg-dark h5, .is-style-wpdl-bg-dark h6,
.is-style-wpdl-bg-dark p, .is-style-wpdl-bg-dark li, .is-style-wpdl-bg-dark a,
.is-style-wpdl-bg-forest h1, .is-style-wpdl-bg-forest h2, .is-style-wpdl-bg-forest h3,
.is-style-wpdl-bg-forest h4, .is-style-wpdl-bg-forest h5, .is-style-wpdl-bg-forest h6,
.is-style-wpdl-bg-forest p, .is-style-wpdl-bg-forest li, .is-style-wpdl-bg-forest a,
.is-style-wpdl-bg-noir h1, .is-style-wpdl-bg-noir h2, .is-style-wpdl-bg-noir h3,
.is-style-wpdl-bg-noir h4, .is-style-wpdl-bg-noir h5, .is-style-wpdl-bg-noir h6,
.is-style-wpdl-bg-noir p, .is-style-wpdl-bg-noir li, .is-style-wpdl-bg-noir a {
	color: var(--wp--custom--semantic--color--text--inverse);
}

.is-style-wpdl-bg-dark a:hover,
.is-style-wpdl-bg-forest a:hover,
.is-style-wpdl-bg-noir a:hover {
	opacity: 0.75;
}

/* Dividers inside dark sections */
.is-style-wpdl-bg-dark hr, .is-style-wpdl-bg-dark .wp-block-separator,
.is-style-wpdl-bg-forest hr, .is-style-wpdl-bg-forest .wp-block-separator,
.is-style-wpdl-bg-noir hr, .is-style-wpdl-bg-noir .wp-block-separator {
	border-color: rgb(255 255 255 / 15%);
	opacity: 1;
}