/*
 * Elementor bridge.
 *
 * Elementor keeps its own global colors and fonts in CSS variables set on
 * the <body> (--e-global-color-*). Pointing them at our tokens means any
 * widget that uses a Global Color follows the dark theme automatically.
 *
 * The selector is deliberately a bit stronger than Elementor's own, so it
 * wins without !important. If colors in the editor look wrong after an
 * Elementor update, check these names under Site Settings > Global Colors.
 */
body[class*="elementor-kit-"] {
	--e-global-color-primary:   var(--sol-text);
	--e-global-color-secondary: var(--sol-muted);
	--e-global-color-text:      var(--sol-text);
	--e-global-color-accent:    var(--sol-accent);

	--e-global-typography-primary-font-family:   var(--sol-font-serif);
	--e-global-typography-secondary-font-family: var(--sol-font-serif);
	--e-global-typography-text-font-family:      var(--sol-font-sans);
	--e-global-typography-accent-font-family:    var(--sol-font-sans);
}

/* Sections that should follow the page background. */
.elementor-section.sol-surface,
.e-con.sol-surface {
	background-color: var(--sol-surface);
}

.elementor-section.sol-sand,
.e-con.sol-sand {
	background-color: var(--sol-surface-alt);
}