/**
 * Design tokens.
 *
 * theme.json is the source of truth for anything the block editor needs to know
 * about. This file re-exposes those values as --fx-* custom properties so plain
 * CSS can use them, with literal fallbacks for contexts where WordPress has not
 * printed its global styles (the login screen, for example).
 *
 * Change a colour or a size HERE and in theme.json, never in a component rule.
 */

:root {
	/* ---- Colour: surfaces ------------------------------------------------ */
	--fx-bone:         var(--wp--preset--color--bone, #F7F8F4);        /* page background */
	--fx-surface:      var(--wp--preset--color--surface, #FFFFFF);     /* cards, white bands */
	--fx-surface-alt:  var(--wp--preset--color--surface-alt, #EFF1EA); /* image wells */
	--fx-forest:       var(--wp--preset--color--forest, #0C1A12);      /* dark bands, hero */
	--fx-forest-deep:  var(--wp--preset--color--forest-deep, #08110C); /* footer */

	/* ---- Colour: brand ---------------------------------------------------
	 * The design's green is #4E9E2E. It carries white button text at 3.36:1 and
	 * reads on the bone background at 3.15:1 — both short of the 4.5:1 that
	 * WCAG 2.1 AA asks of normal-size text, and this green is the fill behind
	 * every primary call to action. Darkened by 7.5% lightness, which clears
	 * 4.5:1 both ways and is all but indistinguishable side by side. Revert to
	 * #4E9E2E here if the client would rather match the comp exactly.
	 */
	--fx-brand:        var(--wp--preset--color--brand, #3F8025);       /* primary green */
	--fx-brand-dark:   var(--wp--preset--color--brand-dark, #2F6B1C);  /* links on light */
	--fx-brand-light:  var(--wp--preset--color--brand-light, #7BC043); /* accents on dark */
	--fx-brand-lift:   var(--wp--preset--color--brand-lift, #9BD46A);  /* highlights on dark */
	--fx-brand-wash:   #C8E6A0;                                        /* ::selection */
	--fx-amber:        var(--wp--preset--color--amber, #E4B33C);       /* thresholds, warnings */

	/* ---- Colour: text ---------------------------------------------------- */
	--fx-ink:          var(--wp--preset--color--ink, #111512);         /* headings, primary */
	--fx-ink-strong:   var(--wp--preset--color--ink-strong, #22291E);  /* lead paragraphs */
	--fx-ink-nav:      #3A4234;                                        /* nav links */
	--fx-ink-muted:    var(--wp--preset--color--ink-muted, #5A6357);   /* body copy */
	--fx-ink-subtle:   var(--wp--preset--color--ink-subtle, #8A9280);  /* labels */
	--fx-ink-faint:    #A8B09C;                                        /* decorative numerals only — never body text */
	--fx-ink-placeholder: #6D7464;                                     /* field placeholders — every field also has a visible label */

	/* ---- Colour: lines --------------------------------------------------- */
	--fx-line:         var(--wp--preset--color--line, #DDE1D6);        /* grid rules, card edges */
	--fx-line-soft:    var(--wp--preset--color--line-soft, #E2E6DA);   /* band edges on white */

	/* ---- Colour: on dark ------------------------------------------------- */
	--fx-on-dark:            #FFFFFF;
	--fx-on-dark-80:         rgba(255, 255, 255, 0.78);
	--fx-on-dark-70:         rgba(255, 255, 255, 0.7);
	--fx-on-dark-66:         rgba(255, 255, 255, 0.66);
	--fx-on-dark-60:         rgba(255, 255, 255, 0.6);
	--fx-on-dark-45:         rgba(255, 255, 255, 0.5);
	--fx-on-dark-35:         rgba(255, 255, 255, 0.5);
	--fx-line-dark:          rgba(255, 255, 255, 0.14);
	--fx-line-dark-soft:     rgba(255, 255, 255, 0.09);
	--fx-line-dark-strong:   rgba(255, 255, 255, 0.22);
	--fx-fill-dark:          rgba(255, 255, 255, 0.035);
	--fx-fill-dark-hover:    rgba(255, 255, 255, 0.07);

	/* ---- Type families --------------------------------------------------- */
	/* The "* Fallback" families are metric-matched stand-ins defined in
	   fonts.css; they hold the layout steady until the real face loads. */
	--fx-font-display: var(--wp--preset--font-family--display, 'Archivo', 'Archivo Fallback', system-ui, sans-serif);
	--fx-font-sans:    var(--wp--preset--font-family--sans, 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--fx-font-mono:    var(--wp--preset--font-family--mono, 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	/* ---- Type scale ------------------------------------------------------
	 * Fluid between a 360px phone and the 1360px design width, so every step
	 * lands on its drawn size at full width and stays readable below it.
	 */
	/* The banner headline is the one size that has to answer to viewport
	   HEIGHT as well as width: sized only by width it stayed at 74px on a
	   900px-tall laptop, ran to four lines, and pushed the statistics strip
	   135px below the fold. min() takes whichever of the two is smaller, so a
	   short screen gets smaller type without touching wide-and-tall ones. */
	--fx-text-hero:    clamp(2.5rem, min(6.58vw, 7.3vh), 4.5rem);   /* 40 → 72 */
	--fx-text-h1:      clamp(2.25rem, 1.24rem + 4.51vw, 3.625rem);  /* 36 → 58 */
	--fx-text-h2:      clamp(1.875rem, 1.19rem + 3.05vw, 2.875rem); /* 30 → 46 */
	--fx-text-h2-sm:   clamp(1.625rem, 1.15rem + 2.11vw, 2.375rem); /* 26 → 38 */
	--fx-text-h3:      clamp(1.375rem, 1.11rem + 1.18vw, 1.75rem);  /* 22 → 28 */
	--fx-text-h4:      clamp(1.1875rem, 1.06rem + 0.56vw, 1.375rem);/* 19 → 22 */
	--fx-text-h5:      1.25rem;                                     /* 20 */
	--fx-text-h6:      1.0625rem;                                   /* 17 */

	--fx-text-lead:    clamp(1.0625rem, 0.96rem + 0.47vw, 1.3125rem); /* 17 → 21 */
	--fx-text-intro:   clamp(1.0625rem, 0.99rem + 0.33vw, 1.15625rem);/* 17 → 18.5 */
	--fx-text-body:    1.03125rem;   /* 16.5 */
	--fx-text-base:    0.96875rem;   /* 15.5 */
	--fx-text-sm:      0.9375rem;    /* 15 */
	--fx-text-xs:      0.90625rem;   /* 14.5 */
	--fx-text-2xs:     0.84375rem;   /* 13.5 */
	--fx-text-3xs:     0.8125rem;    /* 13 */

	--fx-mono-lg:      0.71875rem;   /* 11.5 — section eyebrows */
	--fx-mono:         0.6875rem;    /* 11   — card eyebrows */
	--fx-mono-sm:      0.65625rem;   /* 10.5 — field labels */
	--fx-mono-xs:      0.59375rem;   /* 9.5  — data tables */

	/* ---- Type detail ----------------------------------------------------- */
	--fx-lh-tight:     1.05;
	--fx-lh-heading:   1.1;
	--fx-lh-snug:      1.4;
	--fx-lh-body:      1.65;
	--fx-lh-loose:     1.75;

	--fx-ls-hero:      -0.035em;
	--fx-ls-h2:        -0.032em;
	--fx-ls-h3:        -0.02em;
	--fx-ls-eyebrow:   0.18em;
	--fx-ls-label:     0.16em;
	--fx-ls-mono:      0.14em;

	/* ---- Layout ---------------------------------------------------------- */
	--fx-max:          1360px;
	--fx-content:      760px;
	--fx-gutter:       clamp(1.25rem, 4vw, 3rem);   /* 20 → 48 */

	/* Vertical rhythm for full-bleed marketing bands. */
	--fx-band:         clamp(4rem, 2.3rem + 7.5vw, 8rem);      /* 64 → 128 */
	--fx-band-sm:      clamp(3.5rem, 2.4rem + 4.9vw, 6.5rem);  /* 56 → 104 */
	--fx-band-xs:      clamp(3rem, 2.3rem + 3.1vw, 5.75rem);   /* 48 → 92  */

	/* ---- Space ----------------------------------------------------------- */
	--fx-space-1: 0.5rem;
	--fx-space-2: 1rem;
	--fx-space-3: 1.5rem;
	--fx-space-4: 2.5rem;
	--fx-space-5: 4rem;
	--fx-space-6: 6rem;

	/* Gap between a section's left rail and its body copy. */
	--fx-rail-gap:     clamp(2.5rem, 1.1rem + 6.1vw, 6rem);   /* 40 → 96 */
	--fx-rail-width:   340px;

	/* ---- Shape ----------------------------------------------------------- */
	--fx-radius-sm: 2px;    /* buttons, chips — the design is deliberately square */
	--fx-radius:    3px;    /* cards */
	--fx-radius-lg: 4px;    /* the dashboard frame */
	--fx-radius-pill: 999px;

	/* ---- Elevation ------------------------------------------------------- */
	--fx-shadow-sm: 0 1px 2px rgb(14 23 18 / 6%);
	--fx-shadow-md: 0 6px 20px rgb(14 23 18 / 8%);
	--fx-shadow-lg: 0 18px 48px rgb(14 23 18 / 12%);
	--fx-focus-ring: 0 0 0 3px rgba(78, 158, 46, 0.13);

	/* ---- Motion ---------------------------------------------------------- */
	--fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fx-duration: 200ms;
	--fx-duration-fast: 180ms;

	/* ---- Chrome ---------------------------------------------------------- */
	--fx-header-height: 78px;
	--fx-utility-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
	:root { --fx-duration: 1ms; --fx-duration-fast: 1ms; }
}