/* ==========================================================================
   DESIGN TOKENS
   Extracted verbatim from the Framer build at fintech.alphaobs.com.
   Do not invent values here — every token below was measured from the
   original. See tools/README.md for the extraction method.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------------------
	   COLOUR
	   Framer exposed the accent as design token 276ae762-7e76-488a-bc48-1cd74a585c71.
	   NOTE: rgb(0,153,255) appears 253x in the Framer HTML but is Framer's
	   editor placeholder colour, NOT a brand colour. It is deliberately absent.
	   --------------------------------------------------------------------- */
	--c-ink: #1b1d1f;           /* dark sections, footer */
	--c-accent: #e8481c;        /* nav hover, eyebrow labels, CTA */
	--c-body: #222222;          /* default text */
	--c-body-80: rgba(34, 34, 34, 0.8);
	--c-body-20: rgba(34, 34, 34, 0.2);
	--c-muted: #999999;         /* meta text */
	--c-surface: #ffffff;
	--c-ink-80: rgba(27, 29, 31, 0.8);
	--c-ink-20: rgba(27, 29, 31, 0.2);
	--c-white-70: rgba(255, 255, 255, 0.7);
	--c-white-50: rgba(255, 255, 255, 0.5);
	--c-white-05: rgba(255, 255, 255, 0.05);
	--c-transparent: rgba(0, 0, 0, 0);

	/* ---------------------------------------------------------------------
	   TYPOGRAPHY
	   Two families, both loaded self-hosted. Inter is Framer's fallback only.
	   --------------------------------------------------------------------- */
	--font-display: 'Instrument Sans', 'Instrument Sans Fallback', sans-serif;
	--font-body: 'DM Sans', 'DM Sans Fallback', sans-serif;

	/* Framer uses FIXED sizes per breakpoint, not fluid clamp().
	   Fluid type would break pixel-parity, so the scale is static and
	   overridden wholesale at each breakpoint below. */
	--fs-140: 140px;  /* hero display, desktop only */
	--fs-84: 84px;
	--fs-72: 72px;
	--fs-64: 64px;
	--fs-60: 60px;
	--fs-54: 54px;
	--fs-42: 42px;
	--fs-38: 38px;
	--fs-36: 36px;
	--fs-34: 34px;
	--fs-32: 32px;
	--fs-28: 28px;
	--fs-26: 26px;
	--fs-24: 24px;
	--fs-22: 22px;
	--fs-20: 20px;
	--fs-18: 18px;
	--fs-16: 16px;
	--fs-14: 14px;
	--fs-13: 13px;
	--fs-12: 12px;

	/* Verified against computed values on the live site:
	   140px display -> 154px (1.1em); all other headings -> 1.2em;
	   body 16px -> 22.4px (1.4em). */
	--lh-tight: 1.1em;   /* 140px display only */
	--lh-snug: 1.2em;    /* all other headings */
	--lh-body: 1.4em;    /* body copy */

	/* Only three tracking values exist in the original. */
	--ls-0: 0em;
	--ls-2: 0.02em;
	--ls-4: 0.04em;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* ---------------------------------------------------------------------
	   RADII — measured frequency: 40px (6), 10px (3), 50px (3), 100px, 1000px
	   --------------------------------------------------------------------- */
	--r-sm: 10px;
	--r-md: 40px;
	--r-lg: 50px;
	--r-xl: 100px;
	--r-pill: 1000px;

	/* ---------------------------------------------------------------------
	   LAYOUT
	   --------------------------------------------------------------------- */
	--container-max: 1200px;
	--gutter: 30px;          /* derived from Framer's calc(... - 30px) / 2 */
	--header-h: 80px;

	/* ---------------------------------------------------------------------
	   MOTION
	   CSS transitions for state changes (header, hover, accordion icon).
	   The hero ticker's curve could not be expressed as a cubic-bezier and
	   is registered as a GSAP CustomEase in animations/ticker.js instead.
	   --------------------------------------------------------------------- */
	--ease-out: cubic-bezier(0.44, 0, 0.09, 1);
	--ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
	--dur-fast: 0.15s;
	--dur-base: 0.4s;
	--dur-slow: 0.8s;

	--z-header: 100;
	--z-menu: 200;
	--z-cursor: 300;
}

/* ==========================================================================
   BREAKPOINT OVERRIDES
   Framer's exact 3-tier system. These boundaries are non-negotiable for
   pixel-parity — 809.98 / 810 / 1199.98 / 1200 are the original values.
   ========================================================================== */

/*
 * The values below are MEASURED from the live site at 900px and 390px, not
 * interpolated. Framer's computed heading scale across the three tiers:
 *
 *   h1  64 -> 54 -> 42      h4  36 -> 32 -> 28
 *   h2  54 -> 42 -> 38      h5  28 -> 26 -> 24
 *   h3  42 -> 38 -> 34      h6  24 -> 22 -> 20
 *   display 140 -> 72 -> 64
 *
 * Body copy does NOT scale: DM Sans renders at 18/16/14/13 identically at
 * every breakpoint, so those tokens are deliberately absent below.
 */

/* Tablet: 810px – 1199.98px */
@media (min-width: 810px) and (max-width: 1199.98px) {
	:root {
		--fs-140: 72px;   /* display / footer wordmark */
		--fs-84: 64px;
		--fs-72: 60px;
		--fs-64: 54px;    /* h1 */
		--fs-60: 50px;
		--fs-54: 42px;    /* h2, hero ticker */
		--fs-42: 38px;    /* h3, service title */
		--fs-38: 34px;
		--fs-36: 32px;    /* h4, testimonial quote */
		--fs-34: 30px;
		--fs-32: 28px;
		--fs-28: 26px;    /* h5 */
		--fs-26: 24px;
		--fs-24: 22px;    /* h6 */

		/* Measured section padding at 900px: 80px 30px. */
		--gutter: 30px;
		--container-max: 100%;
	}
}

/* Phone: <= 809.98px */
@media (max-width: 809.98px) {
	:root {
		--fs-140: 64px;   /* display / footer wordmark */
		--fs-84: 54px;
		--fs-72: 48px;
		--fs-64: 42px;    /* h1 */
		--fs-60: 44px;
		--fs-54: 38px;    /* h2, hero ticker */
		--fs-42: 34px;    /* h3, service title */
		--fs-38: 30px;
		--fs-36: 28px;    /* h4, testimonial quote */
		--fs-34: 28px;
		--fs-32: 26px;
		--fs-28: 24px;    /* h5 */
		--fs-26: 22px;
		--fs-24: 20px;    /* h6 */

		/* Measured section padding at 390px: 60px 20px. */
		--gutter: 20px;
		--container-max: 100%;
		--header-h: 64px;
	}
}