/* Design tokens from the Figma design system.
   Font: Manrope. Palette: #000 / #F9F9F9 / #D9D9D9 / #fff.
   Typography anchored at mobile (375) → desktop (1920).
   Section padding: 150px at 1920. */

:root {
	/* Palette (from Figma design system). */
	--c-ink:           #000000;
	--c-bg:            #ffffff;
	--c-surface:       #F9F9F9;
	--c-line:          #D9D9D9;
	--c-muted:         #6b6b6b;

	/* Brand — overridden at runtime via Theme Settings (ACF). */
	--c-primary:       #000000;
	--c-primary-ink:   #ffffff;
	--c-accent:        #000000;
	--c-accent-ink:    #ffffff;

	/* Fluid typography — mobile (375) → desktop (1920).
	   Each clamp goes (mob → xl via vw-interp → 1920).
	   Generated from: y = m*vw + b, where
	     m = (max - min) / (1920 - 375)
	     b = min - m*375
	*/
	/* Mobile floors raised so phone copy is readable (16 px body
	   instead of 12 px). Desktop ceilings unchanged — only the floor
	   of each clamp() is touched; the fluid middle term still hits
	   the same max at ≈1920 vw. */
	--fs-h1:    clamp(2rem,     0.68rem + 2.85vw,  4.5rem);    /* 32 → 72 */
	--fs-h2:    clamp(1.75rem,  0.73rem + 1.81vw,  3.25rem);   /* 28 → 52 */
	--fs-h3:    clamp(1.5rem,   0.67rem + 1.30vw,  2.625rem);  /* 24 → 42 */
	--fs-h4:    clamp(1.375rem, 0.87rem + 0.78vw,  2rem);      /* 22 → 32 */
	--fs-h5:    clamp(1.125rem, 0.81rem + 0.52vw,  1.5rem);    /* 18 → 24 */
	--fs-p:     clamp(1rem,     0.66rem + 0.39vw,  1.125rem);  /* 16 → 18 */
	--fs-sm:    clamp(0.875rem, 0.66rem + 0.26vw,  1rem);      /* 14 → 16 */
	--fs-xs:    clamp(0.75rem,  0.66rem + 0.13vw,  0.875rem);  /* 12 → 14 */

	/* Base body text size (used by html). */
	--fs-root: 16px;

	/* Section rhythm — 150px desktop → 48px mobile. */
	--section-pad-y: clamp(3rem, 1.12rem + 5vw, 9.375rem);
	--section-pad-x: clamp(1.25rem, 0.5rem + 3.5vw, 5rem);

	/* Spacing scale — fluid rems. */
	--sp-1:  clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
	--sp-2:  clamp(0.5rem,  0.4rem + 0.3vw, 0.85rem);
	--sp-3:  clamp(0.75rem, 0.6rem + 0.4vw, 1.2rem);
	--sp-4:  clamp(1rem,    0.85rem + 0.6vw, 1.75rem);
	--sp-5:  clamp(1.5rem,  1.15rem + 1vw, 2.75rem);
	--sp-6:  clamp(2rem,    1.5rem + 1.6vw, 4rem);
	--sp-7:  clamp(3rem,    2.2rem + 2.6vw, 6rem);
	--sp-8:  clamp(4rem,    3rem + 3.5vw, 8rem);

	/* Layout. */
	--container-max:    88rem;     /* ~1408px at 16px */
	--container-max-tv: 120rem;
	--container-pad:    var(--section-pad-x);

	/* Radii & elevation. */
	--r-sm: 0.375rem;
	--r-md: 0.75rem;
	--r-lg: 1.25rem;
	--r-pill: 999px;
	--shadow-sm: 0 0.1rem 0.5rem rgba(0,0,0,0.06);
	--shadow-md: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
	--shadow-lg: 0 1rem 3rem rgba(0,0,0,0.12);

	/* Motion. */
	--ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
	--dur-1: 0.25s;
	--dur-2: 0.5s;
	--dur-3: 0.85s;
}

html { font-size: var(--fs-root); }
body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: var(--fs-p);
	font-weight: 400;
	line-height: 1.55;
}

h1, h2, h3, h4, h5 { font-family: inherit; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.22; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
h5 { font-size: var(--fs-h5); line-height: 1.35; font-weight: 500; }
p  { font-size: var(--fs-p); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
	:root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
	[data-ffb-animate], [data-ffb-fade], [data-ffb-stagger] > * { opacity: 1 !important; transform: none !important; }
}