/* ---------------------------------------------------------
   Bloom Gutenberg — design tokens & reset.
   theme.json drives the WP CSS custom properties; this file
   adds layout/utility tokens and a tiny reset.
   --------------------------------------------------------- */

:root {
	--bloom-container-max: 1240px;
	--bloom-container-pad: clamp(1rem, 4vw, 1.5rem);
	--bloom-section-y:    clamp(3rem, 7vw, 6rem);

	--bloom-radius-sm: 4px;
	--bloom-radius-md: 8px;
	--bloom-radius-lg: 16px;
	--bloom-radius-pill: 999px;

	--bloom-shadow-sm: 0 1px 2px 0 rgba(45,43,43,0.06);
	--bloom-shadow-md: 0 4px 12px -2px rgba(45,43,43,0.10);
	--bloom-shadow-lg: 0 12px 32px -4px rgba(45,43,43,0.14);

	--bloom-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Section utility — patterns wrap top-level sections in this for consistent y-padding */
.bloom-section {
	padding-block: var(--bloom-section-y);
}
.bloom-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.bloom-section--flush { padding-block: 0; }

/* Container utility */
.bloom-container {
	width: 100%;
	max-width: var(--bloom-container-max);
	margin-inline: auto;
	padding-inline: var(--bloom-container-pad);
}

/* Eyebrow label (above h2 in many sections) */
.bloom-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}