/* Design tokens: the single source for colour, type and spacing. */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

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

:root {
	/* Brand */
	--th-blue: #0097e1;
	--th-navy: #021b5b;
	--th-navy-dark: #0f1a45;
	--th-green: #14532d;

	/* Text */
	--th-text: #1a2033;
	--th-text-muted: #4a5368;
	--th-text-panel: #3a4458;
	--th-eyebrow: #1f7fad;

	/* Surfaces */
	--th-white: #fff;
	--th-surface-light: #f7f9fc;
	--th-surface-sand: #f4f2ec;
	--th-surface-blue: #eaf2fb;
	--th-surface-green: #e9f6ef;
	--th-placeholder: #d6def0;
	--th-star: #b86e00; /* review stars: 3:1+ on white and light grey */

	/* Lines */
	--th-border: #e3e8f0;
	--th-border-strong: #c9d3e6;
	--th-border-dashed: #a9b4c8;

	/* Form feedback */
	--th-error: #b42318;
	--th-error-bg: #fef3f2;
	--th-success: #14532d;
	--th-success-bg: #e9f6ef;

	/* On navy backgrounds */
	--th-on-dark: #fff;
	--th-on-dark-text: #d6def0;
	--th-on-dark-muted: #c3cee8;
	--th-on-dark-faint: #a9b8dd;
	--th-on-dark-line: #3a4c8a;
	--th-on-dark-outline: #8fa3d1;

	/* Type */
	--th-font-heading: "Manrope", system-ui, sans-serif;
	--th-font-body: "Inter", system-ui, sans-serif;

	--th-fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.625rem);     /* 36 → 58 */
	--th-fs-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);      /* 26 → 40 */
	--th-fs-h2-sm: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);    /* 24 → 36 */
	--th-fs-h3: 1.3125rem;                                       /* 21 */
	--th-fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);      /* 17 → 20 */
	--th-fs-body-lg: 1.0625rem;                                  /* 17 */
	--th-fs-body: 1rem;
	--th-fs-sm: 0.9375rem;                                       /* 15 */
	--th-fs-xs: 0.8125rem;                                       /* 13 */

	/* Layout */
	--th-container: 1200px;
	--th-container-narrow: 900px;
	--th-measure: 760px;
	--th-gutter: clamp(16px, 4vw, 24px);
	--th-section-y: clamp(56px, 8vw, 88px);
	--th-radius: 12px;
	--th-radius-sm: 8px;
	--th-radius-lg: 14px;
	--th-focus: 3px solid var(--th-blue);
}