/*
 * Design tokens. The only place raw colour, size and spacing values live.
 * Source: docs/design-measurements.md. Values are normalised to a coherent system, not copied
 * pixel-for-pixel from the PNGs; intentional normalisations are noted inline.
 * Design reference widths: 1440px desktop, 390px mobile. Rem values assume a 16px root.
 */

:root {
	/* ---- Colour ---------------------------------------------------------------------- */
	--colour-red: #e21b23;            /* Brand red: buttons, rules, dashes, graphic accents. */
	--colour-red-text: #c8151d;       /* Accessible red for text/links: 4.9:1 or better on every surface below.
	                                     The brand red is only 3.9-4.4:1 on the warm backgrounds. */
	--colour-red-hover: #c8151d;      /* Button hover; white text stays 5.9:1. */
	--colour-charcoal: #1c1c1a;       /* Headings, primary text, dark bands, footer. */
	--colour-text: var(--colour-charcoal);
	--colour-text-secondary: #595652; /* Body and descriptions: 6.1:1 or better on every surface. */
	--colour-white: #ffffff;

	--colour-surface-paper: #f7f5f0;  /* Hero, closing bands. */
	--colour-surface: #f3f1ec;        /* Alternating mid band. */
	--colour-surface-deep: #eeeae2;   /* Accreditation bands. */

	--colour-border: #d7d2ca;         /* The one border/rule colour. */

	--colour-on-dark: var(--colour-white);
	--colour-on-dark-muted: #a8a6a0;  /* Footer headings; 7:1 on charcoal. Estimate (design value not sampled). */

	--colour-focus: var(--colour-charcoal); /* Focus ring; set to white inside dark surfaces. */

	/* ---- Typography ------------------------------------------------------------------ */
	--font-heading: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/*
	 * Fluid sizes, 390px -> 1440px viewport. Desktop sizes were confirmed by rendering the fonts and
	 * matching text widths in the PNGs (H1 60, H2 42, intro 28.8, card title 28, body 16, small 14).
	 * Mobile sizes: H1 38, H2 30, intro 23 matched the same way; the others are estimates.
	 */
	--text-h1: clamp(2.375rem, 1.864rem + 2.095vw, 3.75rem);    /* 38 -> 60 */
	--text-h2: clamp(1.875rem, 1.596rem + 1.143vw, 2.625rem);   /* 30 -> 42 */
	--text-intro: clamp(1.4375rem, 1.303rem + 0.552vw, 1.8rem); /* 23 -> 28.8, large lead paragraph */
	--text-h3: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);      /* 24 -> 28, card titles, timeline years (mobile estimated) */
	--text-h4: clamp(1.25rem, 1.18rem + 0.286vw, 1.4375rem);    /* 20 -> 23, small titles and steps (mobile estimated) */
	--text-lead: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);   /* 18 -> 20, hero and page lead (mobile estimated) */
	--text-body: 1rem;                                          /* 16 */
	--text-small: 0.875rem;                                     /* 14: descriptions, buttons, strip */
	--text-label: 0.8125rem;                                    /* 13: uppercase footer headings */
	--text-footer: 0.9375rem;                                   /* 15: footer text (estimate) */

	/* Normalised: measured pitches were 1.02-1.12 for headings and 1.56-1.65 for text. */
	--lh-display: 1.02;
	--lh-heading: 1.15;
	--lh-snug: 1.3;
	--lh-intro: 1.4;
	--lh-lead: 1.55;
	--lh-body: 1.6;

	--tracking-label: 0.04em;

	/* ---- Spacing (4px base) ---------------------------------------------------------- */
	--space-1: 0.25rem; /* 4 */
	--space-2: 0.5rem;  /* 8 */
	--space-3: 0.75rem; /* 12 */
	--space-4: 1rem;    /* 16 */
	--space-5: 1.5rem;  /* 24 */
	--space-6: 2rem;    /* 32 */
	--space-7: 2.5rem;  /* 40 */
	--space-8: 3rem;    /* 48 */
	--space-9: 3.5rem;  /* 56 */
	--space-10: 4rem;   /* 64 */
	--space-11: 5rem;   /* 80 */
	--space-12: 6rem;   /* 96 */

	/*
	 * Section padding. Measured ink distances (77-97px desktop, 53px mobile) include text leading,
	 * so the true values are normalised to 96/72 desktop and 56 mobile.
	 */
	--section-pad: clamp(3.5rem, 2.57rem + 3.81vw, 6rem);         /* 56 -> 96 */
	--section-pad-compact: clamp(3.5rem, 3.13rem + 1.524vw, 4.5rem); /* 56 -> 72 */

	--gutter: clamp(1.5rem, 0.2rem + 5.333vw, 5rem);              /* 24 -> 80 */
	--card-padding: 1.75rem;                                      /* 28 */

	/* ---- Widths ---------------------------------------------------------------------- */
	--content-width: 80rem;       /* 1280: all content in the designs spans x=80 to x=1360 at 1440. */
	--content-width-wide: 90rem;  /* 1440: full-bleed design width (header, full-width bands). */
	--content-width-narrow: 50rem; /* 800: text-only hero and long-form copy. */
	--measure: 65ch;              /* Paragraph line length. */

	/* ---- Shape, border, motion ------------------------------------------------------- */
	--radius: 2px;       /* Estimate: corners are close to square. */
	--radius-round: 9999px; /* Icon bubbles, round marks. */
	--border: 1px solid var(--colour-border);

	--transition-fast: 150ms ease-out;
	--transition: 200ms ease-out;

	/* ---- Header (layout built in Phase 2; dimensions fixed here) --------------------- */
	--header-height: 7rem;           /* 112: initial desktop header (111px + 1px border in the page designs). */
	--header-height-compact: 6rem;   /* 96: compact sticky/scrolled state (the Menu design). */
	--header-height-mobile: 5.25rem; /* 84: mobile header (83px + 1px border); no compact state on mobile. */
	--logo-width: 18.375rem;         /* 294: logo display width on desktop in the designs. */
	--logo-width-mobile: 13.5rem;    /* 216 */

	/* ---- Breakpoints -------------------------------------------------------------------
	 * Custom properties cannot be used inside @media. These exist for documentation and for
	 * JavaScript (getComputedStyle). Media queries must use the same values as literals (em):
	 *   sm 600px = 37.5em    md 900px = 56.25em    lg 1200px = 75em
	 */
	--bp-sm: 600px;
	--bp-md: 900px;
	--bp-lg: 1200px;
}