/**
 * Design tokens.
 *
 * Single source of truth for colour, type and spacing. Mirrored in the editor
 * palette in functions.php, which disables custom colours so an author cannot
 * pick a value that fails contrast.
 *
 * Every contrast ratio below is from the design brief
 * (docs/site-content/claude-design-prompt.md) and is against --fi-bg unless
 * stated otherwise. WCAG 2.1 AA is a hard requirement, not a polish pass:
 * much of this audience is reading in distress, on a phone, at night.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour. Dark mode is the only mode.
	 *
	 * A constraint of this background that shapes the whole layout:
	 * #2E373F is mid-tone, so filled surfaces barely separate from it -
	 * every candidate lands between 1.14:1 and 1.29:1 in either
	 * direction. Subtle elevation does not work here. SEPARATE REGIONS
	 * WITH BORDERS AND RULES, NOT WITH RAISED OR INSET FILLS. Cards get
	 * a --fi-border-subtle outline, never a lighter background.
	 * --------------------------------------------------------------- */

	--fi-bg: #2E373F;
	--fi-surface: #374149;           /* decorative separation only, 1.16:1 */
	--fi-border-subtle: #46515A;     /* decorative dividers and rules */
	--fi-border-strong: #8C9BA9;     /* input borders, button edges, 4.25:1 */

	--fi-text: #E6E8EB;              /* body text, 9.86:1 */
	--fi-text-muted: #A8B0B8;        /* secondary, captions, metadata, 5.52:1 */

	--fi-accent: #FF8859;            /* links, focus rings, accent rules, 5.14:1 */
	--fi-accent-hover: #E66946;
	--fi-on-accent: #14181C;         /* the ONLY label colour on an accent fill */

	--fi-secondary: #526E86;         /* secondary button FILL ONLY */
	--fi-secondary-hover: #445D72;

	/*
	 * Two traps, recorded here so nobody rediscovers them the hard way.
	 *
	 * 1. Never white text on the orange: 2.35:1 at rest, 3.24:1 on hover.
	 *    Both fail. And --fi-bg as the label passes at rest (5.14:1) but
	 *    fails on hover (3.73:1). #14181C is the only value clearing both.
	 *
	 * 2. Never use --fi-secondary as a TEXT colour. Against the background
	 *    it measures 2.27:1. It is a button fill and nothing else.
	 */

	/* ---------------------------------------------------------------
	 * Typography
	 *
	 * Geologica ExtraBold for major headings only. Inclusive Sans for
	 * everything else. Long-form reading is the primary activity here:
	 * the most important pages are 2,000-word plain-language documents,
	 * not marketing pages.
	 * --------------------------------------------------------------- */

	--fi-font-display: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fi-font-body: "Inclusive Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--fi-weight-display: 800;
	--fi-weight-regular: 400;
	--fi-weight-medium: 600;
	--fi-weight-bold: 700;

	/* Body is 18px MINIMUM on mobile. This site is read, not scanned. */
	--fi-size-base: 1.125rem;        /* 18px */
	--fi-size-sm: 1rem;              /* 16px - captions and metadata only */
	--fi-size-xs: 0.875rem;          /* 14px - legal small print only */

	--fi-size-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--fi-size-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
	--fi-size-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--fi-size-h4: 1.125rem;

	--fi-leading-body: 1.7;          /* brief: 1.6 to 1.75 */
	--fi-leading-tight: 1.2;

	/* Measure capped at 68-72 characters. */
	--fi-measure: 68ch;
	--fi-measure-narrow: 54ch;

	/* ---------------------------------------------------------------
	 * Space. A 4px base, so everything lands on a common grid.
	 * --------------------------------------------------------------- */

	--fi-space-1: 0.25rem;
	--fi-space-2: 0.5rem;
	--fi-space-3: 0.75rem;
	--fi-space-4: 1rem;
	--fi-space-5: 1.5rem;
	--fi-space-6: 2rem;
	--fi-space-7: 3rem;
	--fi-space-8: 4rem;
	--fi-space-9: 6rem;

	/* The 16px side gutter, never less, on the narrowest phone. */
	--fi-gutter: 1rem;
	--fi-container: 72rem;

	/* ---------------------------------------------------------------
	 * Shape and focus
	 * --------------------------------------------------------------- */

	/* Buttons are fully rounded on both variants, with horizontal padding
	   generous enough that the radius reads as intentional. */
	--fi-radius-pill: 999px;
	--fi-radius: 4px;

	--fi-border-width: 1px;
	--fi-border-width-strong: 1.5px;

	/* A 2px accent ring at a 2px offset. The offset is what keeps it
	   visible against the primary button's own orange fill. */
	--fi-focus-width: 2px;
	--fi-focus-offset: 2px;

	--fi-transition: 150ms ease;
}

/**
 * Respect prefers-reduced-motion. Not a nicety: vestibular triggers are real,
 * and this audience is already under load.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fi-transition: 0ms;
	}
}