/**
 * Design tokens — extracted verbatim from the live seamfix.com Elementor global kit
 * (wp-content/uploads/elementor/css/post-6.css, kit ID 6) and from computed styles
 * on the production homepage. Audited 18 August 2026.
 *
 * These values are the contract with the existing brand. Changing them changes the
 * look of the site; changing anything else does not.
 */

:root {
	/* ---- Brand: Elementor global colours ------------------------------- */
	--sfx-green:          #06D565;  /* --e-global-color-primary   */
	--sfx-ink:            #161616;  /* --e-global-color-text      */
	--sfx-white:          #FFFFFF;  /* --e-global-color-secondary */
	--sfx-surface:        #F5F5F5;  /* --e-global-color-accent    */

	/* ---- Green scale: observed in hero, stat rows, link affordances ----- */
	--sfx-green-bright:   #00FF88;
	--sfx-green-mid:      #00D46F;
	--sfx-green-soft:     #69F4A2;
	--sfx-green-dim:      #38C172;
	--sfx-teal:           #00BDA5;

	/* Accessible green for text on light grounds. #06D565 on #FFFFFF is ~1.8:1
	   and fails WCAG AA for body copy; it is retained for large display type,
	   rules, icons and fills only. --sfx-green-text is the compliant substitute. */
	--sfx-green-text:     #04773A;

	/* ---- Ink scale ------------------------------------------------------ */
	--sfx-black:          #050607;  /* deep section ground   */
	--sfx-ink-900:        #111111;
	--sfx-ink-700:        #333333;
	--sfx-ink-500:        #2E3235;
	--sfx-ink-300:        #51555B;

	/* ---- Neutrals ------------------------------------------------------- */
	--sfx-grey-100:       #F9F9F9;
	--sfx-grey-200:       #E4E4E4;
	--sfx-grey-300:       #D2D2D2;
	--sfx-grey-400:       #B6B6B6;

	/* ---- Semantic surfaces ---------------------------------------------- */
	--sfx-bg:             var(--sfx-white);
	--sfx-bg-alt:         var(--sfx-surface);
	--sfx-bg-dark:        var(--sfx-ink);
	--sfx-bg-deep:        var(--sfx-black);
	--sfx-text:           var(--sfx-ink);
	--sfx-text-muted:     var(--sfx-ink-700);
	--sfx-text-invert:    var(--sfx-white);
	--sfx-text-invert-muted: var(--sfx-grey-300);
	--sfx-hairline:       rgba(255, 255, 255, 0.24);
	--sfx-hairline-dark:  rgba(22, 22, 22, 0.12);

	/* ---- Typography ----------------------------------------------------- */
	--sfx-font: "Parkinsans", -apple-system, "system-ui", "Segoe UI", Roboto,
	            "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	/* Parkinsans is a variable font, axis wght 300..800. The production site
	   declares weight 100 for its "accent" role; the browser clamps that to 300,
	   so 300 is the true light. */
	--sfx-w-light:        300;
	--sfx-w-regular:      400;
	--sfx-w-medium:       500;
	--sfx-w-semibold:     600;
	--sfx-w-bold:         700;
	--sfx-w-black:        800;

	/* Measured on the production homepage at 1440px. */
	--sfx-fs-display:     48px;
	--sfx-fs-h1:          43px;
	--sfx-fs-h2:          34px;
	--sfx-fs-h2-compact:  28px;
	--sfx-fs-h2-invert:   38.4px;
	--sfx-fs-h3:          24px;
	--sfx-fs-h4:          20px;
	--sfx-fs-stat:        32px;
	--sfx-fs-eyebrow:     18px;
	--sfx-fs-body:        16px;
	--sfx-fs-small:       14px;
	--sfx-fs-fine:        13px;

	--sfx-lh-display:     1.5;
	--sfx-lh-heading:     1.5;
	--sfx-lh-tight:       1.1;
	--sfx-lh-body:        1.6;
	--sfx-ls-eyebrow:     4px;

	/* ---- Layout --------------------------------------------------------- */
	--sfx-container:      100%;
	--sfx-container-wide: 1320px;
	--sfx-measure:        68ch;   /* readable line length for answer prose */
/* 	--sfx-gutter:         50px; */
	--sfx-gutter-sm:      20px;
	--sfx-section-y:      120px;
	--sfx-section-y-lg:   160px;
	--sfx-section-y-sm:   70px;
	--sfx-stack:          20px;   /* Elementor --widgets-spacing */

	/* ---- Form ----------------------------------------------------------- */
	--sfx-radius:         6px;
	--sfx-radius-sm:      3px;
	--sfx-radius-pill:    999px;

	/* ---- Motion --------------------------------------------------------- */
	--sfx-ease:           cubic-bezier(0.4, 0, 0.2, 1);
	--sfx-dur:            240ms;
}

/* Tablet — matches the existing kit breakpoint so nothing reflows differently. */
@media (max-width: 1024px) {
	:root {
		--sfx-container:    1024px;
		--sfx-fs-display:   38px;
		--sfx-fs-h1:        34px;
		--sfx-fs-h2:        28px;
		--sfx-fs-h2-invert: 30px;
		--sfx-gutter:       32px;
		--sfx-section-y:    90px;
		--sfx-section-y-lg: 110px;
	}
}

/* Mobile — matches the existing kit breakpoint. */
@media (max-width: 767px) {
	:root {
		--sfx-container:    767px;
		--sfx-fs-display:   30px;
		--sfx-fs-h1:        28px;
		--sfx-fs-h2:        24px;
		--sfx-fs-h2-compact:22px;
		--sfx-fs-h2-invert: 24px;
		--sfx-fs-h3:        20px;
		--sfx-fs-stat:      26px;
		--sfx-fs-eyebrow:   14px;
		--sfx-ls-eyebrow:   3px;
		--sfx-gutter:       20px;
		--sfx-section-y:    64px;
		--sfx-section-y-lg: 72px;
		--sfx-section-y-sm: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --sfx-dur: 1ms; }
}