/* ==========================================================================
   Design tokens — the single source of truth for colour, type, spacing.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Typeface */
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Brand colours */
	--teal-900: #005c5a;
	--teal: #007775;
	--teal-500: #329d9c;
	--teal-300: #86c4c3;
	--teal-100: #d4eded;
	--teal-50: #eaf7f7;
	--orange: #f59c00;
	--orange-500: #fabe4b;
	--orange-300: #fddc99;
	--orange-100: #fef4d9;
	--orange-50: #fef9eb;

	/* Neutrals */
	--black: #000;
	--ink: #1e1e1e;
	--text: #424241;
	--muted: #757575;
	--line: #d9d9d9;
	--line-strong: #b2b2b2;
	--soft: #f5f5f5;
	--softer: #fafafa;
	--cream: #fdf6ec;
	--white: #fff;

	/* Feedback */
	--error: #cc2929;
	--success: #237804;

	/* Tints used as section backgrounds */
	--teal-tint: rgb(0 119 117 / 0.1);
	--orange-tint: rgb(245 156 0 / 0.1);

	/* Type scale (fluid between mobile and desktop) */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.25rem;
	--fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	--fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-body: 1.55;
	--tracking: -0.02em;

	/* Spacing scale (4px base) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--section-y: clamp(2rem, 1.2rem + 2vw, 3rem);
	--gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);

	/* Layout */
	--container: 72.375rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--header-h: 4.5rem;
	--header-gap: 2rem;

	/* Shape */
	--radius-sm: 0.5rem;
	--radius: 0.75rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-sm: 0 0 8px rgb(0 119 117 / 0.24);
	--shadow: 0 4px 4px rgb(0 119 117 / 0.24);
	--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

	/* Motion */
	--ease: 0.3s ease;
}