/* ==========================================================================
   Tokens
   The single source of truth for colour, type, spacing, radii, shadows and
   motion. No other stylesheet uses a raw colour value or magic number.
   ========================================================================== */

:root {
	/* --- Brand green --------------------------------------------------------
	   Sampled pixel-by-pixel from the client's logo, which is a gradient.
	   No green here is invented; the tints are the same hue on white.

	   Logo gradient stops (top-left → bottom-right):
	     #6AB937 → #49A231 → #2C802E → #0C5E2C

	   #2C802E is the primary action colour: it is the logo's own 70% stop and
	   the first one to pass WCAG AA with white text (4.96:1). The wordmark
	   mid-tone #358C2D reaches only 4.25:1, so it is not used behind text.  */

	--green-300: #6AB937;              /* logo, light end — highlights only */
	--green-400: #49A231;              /* logo, mid */
	--green-500: #2C802E;              /* logo, 70% — buttons, links, icons */
	--green-600: #1D702E;              /* logo, 85% — hover */
	--green-700: #0C5E2C;              /* logo, dark end — deep surfaces */

	--green-50:  #F3F8F2;              /* tints of green-500 on white */
	--green-100: #E7F1E6;
	--green-200: #CFE4CD;

	/* Small text on deep green. The logo's light end (#6AB937) is only 3.2:1
	   on #0C5E2C; this is that same green at 50% on white — 5.1:1. */
	--green-glow: #B5DC9B;

	--brand-gradient: linear-gradient(135deg, #6AB937 0%, #49A231 36%, #2C802E 68%, #0C5E2C 100%);
	/* Deep surfaces: the logo's dark end, lit by its own 70% stop. */
	--brand-deep: radial-gradient(120% 90% at 85% 0%, #2C802E 0%, rgb(44 128 46 / 0) 55%),
		radial-gradient(90% 80% at 0% 100%, #1D702E 0%, rgb(29 112 46 / 0) 60%),
		#0C5E2C;
	/* Text-heavy deep surfaces (footer): same idea, lit far more gently so
	   small text keeps its contrast everywhere on it. */
	--brand-deep-quiet: radial-gradient(70% 70% at 100% 0%, rgb(44 128 46 / 0.5) 0%, rgb(44 128 46 / 0) 70%),
		#0C5E2C;

	/* --- Neutrals — faintly green-biased so greys sit with the brand ---- */

	--ink-900: #0F1A12;                /* headings            17.6:1 */
	--ink-700: #2E3A31;                /* body copy           11.9:1 */
	--ink-500: #5B675E;                /* secondary text       5.9:1 */
	--ink-450: #69756C;                /* small secondary text 4.8:1 (4.5:1 on surface-2) */
	--ink-400: #7F8A81;                /* non-text / large     3.5:1 */

	--white:        #FFFFFF;
	--surface:      #FFFFFF;
	--surface-2:    #F6F8F5;           /* the only off-white section tone */
	--line:         #E4EAE3;
	--line-strong:  #D0D9CF;

	/* Product photography ground — the median of the 16 client photos'
	   studio sweeps, so a plate never shows a seam around its image. */
	--plate: #F1EAE2;

	--star: #F4B400;                   /* rating stars only */
	--pending: #FFF1A8;                /* "[confirm: …]" highlight, off unless a developer turns it on */

	/* Form errors only. Not a brand colour: red is the universal "fix this"
	   signal, and errors must not look like the green actions. 6.5:1 on white. */
	--danger:    #B42318;
	--danger-bg: #FEF3F2;

	/* --- Typography -------------------------------------------------------- */

	--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-hero:    clamp(2.125rem, 1.35rem + 2.5vw, 3.625rem);
	--fs-h2:      clamp(1.875rem, 1.35rem + 1.75vw, 3rem);
	--fs-h3:      clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	--fs-lead:    clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
	--fs-body:    1.0625rem;
	--fs-sm:      0.9375rem;
	--fs-xs:      0.8125rem;
	--fs-eyebrow: 0.78125rem;

	--lh-tight: 1.06;
	--lh-snug:  1.22;
	--lh-body:  1.65;

	--track-tight: -0.034em;
	--track-snug:  -0.018em;
	--track-wide:  0.14em;

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;
	--fw-heavy:   800;

	/* --- Spacing ----------------------------------------------------------- */

	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  3rem;
	--space-8:  4rem;
	--space-9:  6rem;

	--section-y: clamp(4rem, 2.6rem + 3.8vw, 6.75rem);
	--gutter:    clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
	--container: 1320px;
	--header-h:  80px;

	/* --- Shape ------------------------------------------------------------- */

	--radius-xs:   8px;
	--radius-sm:   12px;
	--radius-md:   18px;
	--radius-lg:   24px;
	--radius-xl:   32px;
	--radius-2xl:  40px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgb(15 26 18 / 0.06);
	--shadow-sm: 0 2px 6px -1px rgb(15 26 18 / 0.08), 0 1px 2px rgb(15 26 18 / 0.05);
	--shadow-md: 0 16px 36px -16px rgb(15 26 18 / 0.22), 0 4px 10px -4px rgb(15 26 18 / 0.07);
	--shadow-lg: 0 40px 80px -32px rgb(12 94 44 / 0.34), 0 12px 28px -12px rgb(15 26 18 / 0.16);
	--ring:      0 0 0 3px rgb(44 128 46 / 0.38);

	/* --- Motion ------------------------------------------------------------ */

	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-1: 160ms;
	--dur-2: 260ms;
	--dur-3: 480ms;
	--dur-4: 820ms;
}