/**
 * HAP design tokens.
 *
 * Single source of truth for the HAP design system. This file only defines
 * custom properties; nothing here styles an element, so loading it has no
 * visual effect. Tokens are applied in later phases by base.css,
 * elementor.css, components.css and report.css.
 *
 * Elementor's colour and font pickers cannot read CSS variables, so the
 * values Elementor needs are mirrored by hand in Site Settings. Keep both in
 * sync and record every change in elementor/CHANGELOG.md.
 *
 * Breakpoints are not tokens (custom properties cannot be used in media
 * queries). They follow Elementor's Site Settings: mobile ≤ 767px,
 * tablet ≤ 1024px.
 *
 * Reference: docs/design-system.md
 */

:root {
	/* ------------------------------------------------------------------
	 * Colour
	 * Contrast ratios are against --hap-color-surface (#FFFFFF).
	 * ------------------------------------------------------------------ */

	/* Ink: headings, primary buttons. 16.2:1 */
	--hap-color-ink: #1a1f36;
	/* Deep ink: footer, dark bands. White text on it is 18.0:1 */
	--hap-color-ink-deep: #11152a;
	/* Lighter end of the plain page-head gradient (0.7.0). */
	--hap-color-ink-soft: #222a47;
	/* Body text. 13.1:1 */
	--hap-color-text: #2b3040;
	/* Captions, metadata, sources. 6.1:1 (5.7:1 on surface-alt) */
	--hap-color-text-muted: #5b6275;
	/* Text on ink / ink-deep backgrounds */
	--hap-color-text-inverse: #ffffff;
	/* Secondary text on ink-deep. 9.8:1 */
	--hap-color-text-inverse-muted: #b8bfcc;
	/* Lead text and the second headline line over photographs (0.6.0). */
	--hap-color-text-inverse-soft: #e1e6ee;
	--hap-color-text-inverse-subtle: #cfd6e3;

	/* Hairline dividers and table rules */
	--hap-color-rule: #d9dde3;

	/* Surfaces */
	--hap-color-surface: #ffffff;
	--hap-color-surface-alt: #f5f7f9;
	/* Blue-grey ground for the homepage PMD band (0.6.0). */
	--hap-color-mist: #eef1f5;

	/* Accent: links, key figures, one accent per view. 5.0:1 */
	--hap-color-accent: #2c7a7b;
	/* Link and button hover. 7.4:1 */
	--hap-color-accent-strong: #1f5e5f;
	/* Highlighted rows, callout backgrounds. Use ink or accent-strong text on it, not accent. */
	--hap-color-accent-tint: #e8f1f1;
	/* Teal for eyebrows on navy and over photographs (0.6.0). */
	--hap-color-accent-light: #8ccaca;

	/* PMD scorecard flags only. Hard 7.5:1, soft 5.5:1 */
	--hap-color-flag-hard: #9b2c2c;
	--hap-color-flag-soft: #975a16;

	/* Focus ring (accent on light surfaces, white on ink) */
	--hap-color-focus: var(--hap-color-accent);
	--hap-color-focus-inverse: var(--hap-color-text-inverse);

	/* ------------------------------------------------------------------
	 * Typography
	 * Montserrat: headings, navigation, buttons, labels, statistics, UI.
	 * Open Sans:  body copy and long-form Insights articles.
	 * Both are already self-hosted by Elementor.
	 * ------------------------------------------------------------------ */

	--hap-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--hap-font-ui: var(--hap-font-display);
	--hap-font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

	--hap-font-weight-regular: 400;
	--hap-font-weight-medium: 500;
	--hap-font-weight-semibold: 600;
	--hap-font-weight-bold: 700;

	/* Fluid sizes: min at 360px viewport, max at 1440px viewport */
	--hap-fs-display: clamp(2.5rem, 2rem + 2.222vw, 4rem);          /* 40 → 64 */
	--hap-fs-h1: clamp(2.25rem, 1.917rem + 1.481vw, 3.25rem);          /* 36 → 52 */
	--hap-fs-h2: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);             /* 28 → 40 */
	--hap-fs-h3: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);          /* 22 → 28 */
	--hap-fs-h4: 1.25rem;                                              /* 20 */
	--hap-fs-h5: 1.0625rem;                                            /* 17 */
	--hap-fs-h6: 0.9375rem;                                            /* 15 */
	--hap-fs-lead: clamp(1.125rem, 1.063rem + 0.278vw, 1.3125rem);     /* 18 → 21 */
	--hap-fs-body: 1.0625rem;                                          /* 17 */
	--hap-fs-small: 0.9375rem;                                         /* 15 */
	--hap-fs-caption: 0.8125rem;                                       /* 13 */
	--hap-fs-eyebrow: 0.75rem;                                         /* 12 */
	--hap-fs-stat: clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem);          /* 40 → 56 */

	--hap-lh-display: 1.1;
	--hap-lh-heading: 1.2;
	--hap-lh-body: 1.65;
	--hap-lh-ui: 1.3;

	--hap-tracking-heading: -0.015em;
	--hap-tracking-eyebrow: 0.14em;
	--hap-tracking-button: 0.02em;

	/* ------------------------------------------------------------------
	 * Spacing (4px base)
	 * ------------------------------------------------------------------ */

	--hap-space-1: 0.25rem;   /* 4 */
	--hap-space-2: 0.5rem;    /* 8 */
	--hap-space-3: 0.75rem;   /* 12 */
	--hap-space-4: 1rem;      /* 16 */
	--hap-space-5: 1.5rem;    /* 24 */
	--hap-space-6: 2rem;      /* 32 */
	--hap-space-7: 3rem;      /* 48 */
	--hap-space-8: 4rem;      /* 64 */
	--hap-space-9: 6rem;      /* 96 */
	--hap-space-10: 8rem;     /* 128 */

	/* Vertical padding for page sections: 64 → 120 */
	--hap-section-y: clamp(4rem, 2.833rem + 5.185vw, 7.5rem);
	/* Horizontal page gutter: 16 → 32 */
	--hap-gutter: clamp(1rem, 0.667rem + 1.481vw, 2rem);
	/* Default gap between stacked blocks */
	--hap-stack: var(--hap-space-5);

	/* ------------------------------------------------------------------
	 * Widths
	 * ------------------------------------------------------------------ */

	--hap-container: 1200px;
	--hap-container-wide: 1320px;
	/* Long-form reading width */
	--hap-measure: 68ch;
	--hap-measure-narrow: 35rem; /* 560 */

	/* ------------------------------------------------------------------
	 * Borders, radius, elevation
	 * Flat surfaces and hairline rules; one shadow for the sticky header.
	 * ------------------------------------------------------------------ */

	--hap-border-width: 1px;
	--hap-rule: var(--hap-border-width) solid var(--hap-color-rule);
	--hap-rule-strong: 2px solid var(--hap-color-ink);

	--hap-radius-0: 0;
	--hap-radius-sm: 2px;  /* buttons, inputs */
	--hap-radius-md: 4px;  /* maximum anywhere */

	--hap-shadow-header: 0 1px 0 var(--hap-color-rule), 0 4px 16px rgba(17, 21, 42, 0.06);

	/* ------------------------------------------------------------------
	 * Header, mobile menu and footer (site chrome)
	 * ------------------------------------------------------------------ */

	--hap-header-height: 88px;          /* desktop header, ≥ 1280px */
	--hap-header-height-compact: 64px;  /* logo + menu button, < 1280px */
	--hap-header-width: var(--hap-container-wide);
	/* Hairline on ink-deep (footer) */
	--hap-color-rule-inverse: rgba(255, 255, 255, 0.14);
	/* Backdrop behind the mobile menu panel */
	--hap-color-overlay: rgba(17, 21, 42, 0.72);

	/* ------------------------------------------------------------------
	 * Buttons
	 * Variants: primary (solid ink), secondary (ink outline), text (link + arrow).
	 * Sentence case — no uppercase.
	 * ------------------------------------------------------------------ */

	--hap-btn-font-family: var(--hap-font-ui);
	--hap-btn-font-size: 0.875rem; /* 14 */
	--hap-btn-font-weight: var(--hap-font-weight-semibold);
	--hap-btn-tracking: var(--hap-tracking-button);
	--hap-btn-padding: 0.875rem 1.5rem; /* 14 24 */
	--hap-btn-min-height: 48px;
	--hap-btn-radius: var(--hap-radius-sm);
	--hap-btn-border-width: var(--hap-border-width);

	--hap-btn-primary-bg: var(--hap-color-ink);
	--hap-btn-primary-fg: var(--hap-color-text-inverse);
	--hap-btn-primary-bg-hover: var(--hap-color-accent-strong);
	--hap-btn-primary-fg-hover: var(--hap-color-text-inverse);

	--hap-btn-secondary-bg: transparent;
	--hap-btn-secondary-fg: var(--hap-color-ink);
	--hap-btn-secondary-border: var(--hap-color-ink);
	--hap-btn-secondary-bg-hover: var(--hap-color-accent-tint);
	--hap-btn-secondary-fg-hover: var(--hap-color-ink);

	/* Primary on a dark band or photo: the solid button inverts. */
	--hap-btn-inverse-bg: var(--hap-color-surface);
	--hap-btn-inverse-fg: var(--hap-color-ink);
	--hap-btn-inverse-bg-hover: var(--hap-color-accent-tint);
	--hap-btn-inverse-fg-hover: var(--hap-color-ink);

	--hap-btn-text-fg: var(--hap-color-accent);
	--hap-btn-text-fg-hover: var(--hap-color-accent-strong);

	/* ------------------------------------------------------------------
	 * Links in running text
	 * ------------------------------------------------------------------ */

	--hap-link: var(--hap-color-accent);
	--hap-link-hover: var(--hap-color-accent-strong);
	--hap-link-underline-thickness: 1px;
	--hap-link-underline-offset: 0.18em;
	/* On ink / ink-deep backgrounds */
	--hap-link-inverse: var(--hap-color-text-inverse);
	--hap-link-inverse-hover: var(--hap-color-accent-tint);

	/* ------------------------------------------------------------------
	 * Focus and motion
	 * ------------------------------------------------------------------ */

	--hap-focus-ring: 2px solid var(--hap-color-focus);
	--hap-focus-offset: 2px;

	--hap-duration-fast: 150ms;
	--hap-duration-base: 250ms;
	--hap-ease: cubic-bezier(0.2, 0, 0, 1);
}