/**
 * Design tokens.
 *
 * Colours and fonts are aliased to the active Elementor kit in
 * inc/elementor.php — change them in Site Settings, never here. What lives here
 * is the geometry and motion the Elementor panel cannot express as one value.
 */

:root {
	/* Spacing scale */
	--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: 6px;
	--hbc-radius-md: 12px;
	--hbc-radius-lg: 20px;
	--hbc-radius-pill: 999px;

	/* A single, quiet shadow family. Three steps, all low-contrast: heavy
	   shadows are what make a florist site look cheap. */
	--hbc-shadow-xs: 0 1px 2px rgba(35, 31, 38, 0.04);
	--hbc-shadow-sm: 0 2px 8px rgba(35, 31, 38, 0.06);
	--hbc-shadow-md: 0 8px 24px rgba(35, 31, 38, 0.08);
	--hbc-shadow-lg: 0 18px 44px rgba(35, 31, 38, 0.12);

	/* Motion */
	--hbc-duration: 240ms;
	--hbc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hbc-transition: var(--hbc-duration) var(--hbc-ease);

	/*
	 * Layout shell — one width for the whole site.
	 *
	 * The site runs near full width and breathes through the gutter rather than
	 * sitting in a narrow box. Everything routes through these two values:
	 * Elementor's boxed containers, Hello Biz's .site-main and the shop grid,
	 * so a page built in the builder and a WooCommerce archive line up exactly.
	 */
	--hbc-shell: 1560px;
	--hbc-gutter: clamp(1rem, 3.5vw, 3.25rem);
	--hbc-grid-gap: clamp(1rem, 2vw, 1.75rem);

}

/*
 * Tinted surfaces derive from the brand colour, so they are declared on body,
 * where the Elementor kit variable actually resolves (see inc/elementor.php).
 */
body {
	--hbc-tint: color-mix(in srgb, var(--hbc-color-primary, #d6117a) 5%, #fff);
	--hbc-tint-strong: color-mix(in srgb, var(--hbc-color-primary, #d6117a) 12%, #fff);
	--hbc-hairline: color-mix(in srgb, var(--hbc-color-primary, #d6117a) 14%, transparent);
}

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