/**
 * Design tokens.
 *
 * These exist so the CSS layer never hardcodes a value that Elementor already
 * owns. Colours and fonts are aliased to the active Elementor kit in
 * inc/elementor.php; change them in Site Settings, not here.
 *
 * Only add a token when a value is reused by three or more components.
 */

:root {
	/* Spacing — matches Elementor's default container gaps so the CSS layer
	   never fights the padding controls in the panel. */
	--hbc-space-2xs: 0.25rem;
	--hbc-space-xs: 0.5rem;
	--hbc-space-sm: 0.75rem;
	--hbc-space-md: 1.25rem;
	--hbc-space-lg: 2rem;
	--hbc-space-xl: 3.5rem;
	--hbc-space-2xl: 5rem;

	/* Surface */
	--hbc-radius-sm: 4px;
	--hbc-radius-md: 10px;
	--hbc-radius-lg: 20px;
	--hbc-radius-pill: 999px;
	--hbc-border: 1px solid color-mix(in srgb, var(--hbc-color-text, #3e4c59) 14%, transparent);
	--hbc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--hbc-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
	--hbc-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

	/* Motion — one duration and one easing keeps transitions coherent across
	   components that Elementor animates independently. */
	--hbc-duration: 220ms;
	--hbc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hbc-transition: var(--hbc-duration) var(--hbc-ease);

	/* Layout */
	--hbc-content-width: 1200px;
	--hbc-grid-min: 260px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--hbc-duration: 0.01ms;
	}
}