/*
 * Fertigation Systems design tokens — NEUTRAL STARTER VALUES.
 *
 * Replace every value marked TBC with the client's design system once it is
 * supplied (01-design/). Keep the --ff-* names: docs/design-standards.md, the
 * widgets and sections.css refer to them. Mirror colours and fonts into the
 * Elementor Site Kit globals so the client edits the same values from the editor.
 *
 * Fonts: self-hosted woff2 only (no Google CDN). Add @font-face rules here when
 * the brand fonts are in assets/fonts/, and list the above-the-fold files in the
 * preload array in functions.php.
 */

:root {
	/* ---- Colour (TBC: client palette) ------------------------------------ */
	--ff-color-light: #FFFFFF;
	--ff-color-muted: #F2F5F7;
	--ff-color-brand: #0B4F6C;   /* TBC */
	--ff-color-brand-dark: #083B51; /* TBC: hover/pressed for the brand colour */
	--ff-color-accent: #F2A541;  /* TBC */
	--ff-color-dark: #14212B;
	--ff-color-line: #D7DEE3;
	--ff-color-text: var(--ff-color-dark);
	--ff-color-text-soft: #4A5A66; /* ≥ 4.5:1 on light and muted */

	/* ---- Type (TBC: brand fonts) ----------------------------------------- */
	--ff-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ff-font-display: var(--ff-font-body);
	--ff-weight-body: 400;
	--ff-weight-strong: 600;
	--ff-weight-display: 700;

	/* One modular scale, six sizes site-wide (lesson: Hello's H1 default is 40px
	   at every width, so every heading class sets its size explicitly). */
	--ff-fs-display: clamp(40px, 6vw, 80px);
	--ff-fs-h2: clamp(30px, 4vw, 52px);
	--ff-fs-h3: clamp(20px, 1.8vw, 26px);
	--ff-fs-lead: clamp(18px, 1.4vw, 21px);
	--ff-fs-body: 17px;
	--ff-fs-small: 14px;
	--ff-lh-display: 1.05;
	--ff-lh-heading: 1.15;
	--ff-lh-body: 1.6;
	--ff-tracking-display: -0.02em;
	--ff-tracking-eyebrow: 0.08em;

	/* ---- Space: 8px grid ------------------------------------------------- */
	--ff-space-1: 4px;
	--ff-space-2: 8px;
	--ff-space-3: 12px;
	--ff-space-4: 16px;
	--ff-space-5: 24px;
	--ff-space-6: 32px;
	--ff-space-7: 48px;
	--ff-space-8: 64px;
	--ff-space-9: 96px;
	--ff-space-10: 128px;
	--ff-space-section: clamp(var(--ff-space-8), 8vw, var(--ff-space-9));

	/* ---- Layout ---------------------------------------------------------- */
	--ff-container: 1280px;
	--ff-gutter: clamp(20px, 4vw, 48px);
	--ff-measure: 65ch;

	/* ---- Shape ----------------------------------------------------------- */
	--ff-radius-sm: 6px;
	--ff-radius: 12px;
	--ff-radius-lg: 24px;
	--ff-radius-pill: 999px;
	--ff-shadow: 0 2px 12px rgba(20, 33, 43, 0.08);
	--ff-shadow-raised: 0 8px 28px rgba(20, 33, 43, 0.12);
	--ff-focus: 0 0 0 3px var(--ff-color-brand);

	/* ---- Motion ---------------------------------------------------------- */
	--ff-ease: cubic-bezier(0.2, 0, 0, 1);
	--ff-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ff-dur-fast: 120ms;
	--ff-dur: 200ms;
	--ff-dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ff-dur-fast: 0ms;
		--ff-dur: 0ms;
		--ff-dur-slow: 0ms;
	}
}