/*
 * Design tokens — the computed Automatic.css values from the live site (fluid clamps between
 * 320px and 1440px viewports). Names match ACSS so Bricks values carry over 1:1.
 * Root font size is 62.5% → 1rem = 10px.
 */

:root {
	/* Brand */
	--primary: #214f39;
	--primary-hover: #265b41;
	--action: #00975f;
	--action-hover: #00b06f;
	--action-pressed: #007c51;
	--secondary: #b6f3ce;
	--accent: #effdf5;
	--neutral: #effdf5;
	--base: #002b1b;
	--base-hover: #002f1e;
	--base-ultra-dark: #003320;
	--shade: #000;
	--shade-ultra-light: #f2f2f2;
	--white: #fff;
	--black: #000;
	--muted: #8a9d96;
	--hero-bg: #eef4f7;
	--card-shadow: 0 0 10px 0 rgba(0, 43, 27, 0.12);
	--card-radius: 0.8rem 0.8rem 8rem 0.8rem;

	/* Type — the whole site is set in Bebas Neue Pro Middle; Open Sans is applied per element. */
	--font-display: 'Bebas Neue Pro', 'Oswald', 'Arial Narrow', sans-serif;
	--font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--text-color: #003320;

	--text-xs: clamp(1.3rem, calc(0.0892857143vw + 1.2714285714rem), 1.4rem);
	--text-s: clamp(1.4rem, calc(0.1785714286vw + 1.3428571429rem), 1.6rem);
	--text-m: clamp(1.6rem, calc(0.1785714286vw + 1.5428571429rem), 1.8rem);
	--text-l: clamp(1.92rem, calc(0.4280357143vw + 1.7830285714rem), 2.3994rem);
	--text-xl: clamp(2.304rem, calc(0.7985716071vw + 2.0484570857rem), 3.1984002rem);
	--text-xxl: clamp(2.7648rem, calc(1.3380959523vw + 2.3366092953rem), 4.2634674666rem);

	--h1: clamp(2.7648rem, calc(3.5582142857vw + 1.6261714286rem), 6.75rem);
	--h2: clamp(2.304rem, calc(1.9607142857vw + 1.6765714286rem), 4.5rem);
	--h3: clamp(1.92rem, calc(0.9642857143vw + 1.6114285714rem), 3rem);
	--h4: clamp(1.6rem, calc(0.3571428571vw + 1.4857142857rem), 2rem);
	--h5: clamp(1.6rem, calc(0.1785714286vw + 1.5428571429rem), 1.8rem);
	--h6: clamp(1.4rem, calc(0.1785714286vw + 1.3428571429rem), 1.6rem);

	/* Spacing */
	--space-xs: clamp(1.0666666667rem, calc(0.2380952381vw + 0.9904761905rem), 1.3333333333rem);
	--space-s: clamp(1.6rem, calc(0.3571428571vw + 1.4857142857rem), 2rem);
	--space-m: clamp(2.4rem, calc(0.5357142857vw + 2.2285714286rem), 3rem);
	--space-l: clamp(3.1992rem, calc(1.1614285714vw + 2.8275428571rem), 4.5rem);
	--space-xl: clamp(4.2645336rem, calc(2.2191664286vw + 3.5544003429rem), 6.75rem);
	--space-xxl: clamp(5.6846232888rem, calc(3.9646220636vw + 4.4159442285rem), 10.125rem);

	--section-space-xs: clamp(2.1333333333rem, calc(1.6666666667vw + 1.6rem), 4rem);
	--section-space-s: clamp(3.2rem, calc(2.5vw + 2.4rem), 6rem);
	--section-space-m: clamp(4.8rem, calc(3.75vw + 3.6rem), 9rem);
	--section-space-l: clamp(6.3984rem, calc(6.3407142857vw + 4.3693714286rem), 13.5rem);
	--section-space-xl: clamp(8.5290672rem, calc(10.4651185714vw + 5.1802292571rem), 20.25rem);

	--content-gap: clamp(2.4rem, calc(0.5357142857vw + 2.2285714286rem), 3rem);
	--container-gap: clamp(4.2645336rem, calc(2.2191664286vw + 3.5544003429rem), 6.75rem);
	--grid-gap: clamp(2.4rem, calc(0.5357142857vw + 2.2285714286rem), 3rem);

	/* Layout: content up to 1440px, padded by the fluid gutter (60px at 1440). */
	--width-content: 144rem;
	--gutter: clamp(1.6rem, calc(3.9285714286vw + 0.3428571429rem), 6rem);

	/* Radii */
	--radius-xs: 0.4444444444rem;
	--radius-s: 0.6666666667rem;
	--radius-m: 1rem;
	--radius-l: 1.5rem;
	--radius-xl: 2.25rem;
	--radius-xxl: 3.375rem;
	--radius-pill: 3rem;
	--radius-circle: 50%;

	/* Breakpoints (Bricks): laptop 1240px · tablet 991px · mobile landscape 767px · mobile 478px */

	--transition: 0.3s ease;
}