/*
 * am-backgrounds — background-only utility classes, decoupled from am-section's
 * padding. Put one on ANY Elementor Container (set it Full Width so the colour spans
 * edge to edge) and control the padding yourself — unlike am-section, these carry no
 * vertical padding of their own. Use am-section for the bundled band (bg + rhythm),
 * these when you want a background but your own spacing.
 *
 * Five nuances, light → dark (all from decided palette tokens):
 *   am-bg          page (warm off-white)
 *   am-bg-surface  crisp white
 *   am-bg-alt      warm beige (the standard alternating surface)
 *   am-bg-soft     soft warm tint (a gentle highlight band)
 *   am-bg-inverse  dark warm ink — remaps tokens so children adapt (see below)
 */

.am-bg          { background-color: var(--am-color-bg); }
.am-bg-surface  { background-color: var(--am-color-surface); }
.am-bg-alt      { background-color: var(--am-color-surface-alt); }
.am-bg-soft     { background-color: var(--am-color-surface-soft); }

/*
 * The dark/inverse treatment — shared by the utility AND am-section--inverse so the
 * token remap lives in ONE place. Remaps the semantic colour tokens for the subtree,
 * so any am-card / am-cta / link inside adapts to orange-on-dark automatically — no
 * dark variant per component. Values still come from tokens.css; only the mapping flips.
 */
.am-bg-inverse,
.am-section--inverse {
	background-color: var(--am-color-bg-inverse);

	--am-color-bg:           var(--am-color-bg-inverse);
	--am-color-surface:      var(--am-neutral-800);
	--am-color-surface-alt:  var(--am-neutral-800);
	--am-color-surface-soft: var(--am-neutral-800);
	--am-color-text:         var(--am-color-text-inverse);
	--am-color-text-muted:   var(--am-neutral-300);
	--am-color-heading:      var(--am-color-text-inverse);
	--am-color-border:       var(--am-neutral-700);
	--am-color-accent:       var(--am-color-accent-inverse);
	--am-color-accent-hover: var(--am-color-accent-inverse);
	--am-color-cta:          var(--am-color-cta-inverse);
	--am-color-cta-hover:    var(--am-color-accent-inverse);
	--am-color-on-accent:    var(--am-color-on-cta-inverse);

	color: var(--am-color-text);
}