/* ==================================================================
 * tokens.css — design tokens, webfonts, element defaults
 *
 * Load order: tokens.css -> components.css -> site.css
 *
 * Two rules govern this file:
 *   1. The legacy variable names (--ink, --accent, --line, ...) keep their
 *      exact values. Fourteen templates read them; renaming one is a
 *      regression, not a refactor.
 *   2. New semantic names (--graphite, --amber, --steel, --paper, --ok,
 *      --warn, --danger) exist so component code says *what* a colour is
 *      for, not what colour it is. Both sets resolve to the same values,
 *      so a component written against either cannot drift.
 *
 * No external font request: the faces below resolve with local() first and
 * fall back to the system stack when assets/fonts/ is still empty. See
 * assets/fonts/README.md.
 * ================================================================== */

/*
 * These four blocks name the brand faces but do not fetch them yet.
 *
 * The `url(...)` lines were removed, not forgotten: `assets/fonts/` holds only a
 * README, so each declaration made the browser request a file that 404s — four
 * failed requests per page, on every page, for glyphs the system stack was
 * drawing anyway. `local()` still picks the face up on machines that have it,
 * so the visual result is unchanged, and putting the `url()` line back is the
 * one-line change that switches the file on for everyone else.
 *
 * `font-display: swap` stays: it is the reason a missing font is a fallback
 * rather than invisible text.
 */
@font-face {
	font-family: "Barlow Condensed";
	src: local("Barlow Condensed SemiBold"),
		local("BarlowCondensed-SemiBold");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: local("Barlow Condensed Bold"),
		local("BarlowCondensed-Bold");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: local("Source Sans 3"),
		local("SourceSans3-Regular");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: local("Source Sans 3 SemiBold"),
		local("SourceSans3-SemiBold");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* --- legacy palette: values frozen, every template depends on them --- */
	--ink: #12151a;
	--ink-2: #3f4753;
	--ink-3: #6b7482;
	--line: #e3e6ea;
	--line-2: #cdd3da;
	--bg: #ffffff;
	--bg-2: #f6f7f9;
	--accent: #c2410c;
	--accent-2: #9a3208;
	--radius: 6px;
	--wrap: 1180px;
	--header-h: 64px;

	/* --- semantic aliases -------------------------------------------------
	 * Contrast on --bg (#fff), measured:
	 *   --graphite 17.4:1   --steel 6.2:1   --amber 5.2:1
	 *   --amber-deep 7.4:1  --ink-3 4.6:1
	 * On --paper (#f6f7f9): --steel 5.8:1, --amber 4.8:1.
	 * ------------------------------------------------------------------- */
	--graphite: #12151a;      /* navigation base, dark ground, headings */
	--amber: #c2410c;         /* the action colour — same value as --accent */
	--amber-deep: #9a3208;    /* hover for the action colour */
	--steel: #2a6496;         /* data values, links, focus ring */
	--steel-deep: #1f4c72;    /* hover for data links */
	--paper: #f6f7f9;         /* content ground — same value as --bg-2 */
	--paper-2: #eef1f4;       /* darker ground for nested blocks */
	/* --ink-3 is 4.72:1 on white but only 4.41:1 on --paper, so small text on a
	   paper ground uses this instead. Same hue, one step darker. */
	--ink-3-on-paper: #5c6470; /* 5.6:1 on --paper, 6.0:1 on white */

	/* --- status: text colour + soft ground, both legible on white -------- */
	--ok: #15803d;            /* 5.0:1 on --bg */
	--ok-soft: #e7f4ec;
	--warn: #92400e;          /* 7.1:1 on --bg */
	--warn-soft: #fdf3e3;
	--danger: #b3261e;        /* 6.5:1 on --bg */
	--danger-soft: #fdecea;

	/* --- on-dark inks, for header/footer grounds ------------------------- */
	--on-dark: #ffffff;
	--on-dark-2: #cfd5dd;
	--on-dark-3: #9aa4b1;
	--focus-on-dark: #7fb2dc; /* 8.1:1 on --graphite; --steel is only 2.9:1 there */
	/* --amber is only ~3:1 on --graphite and drops below 3:1 where the hero's
	   glow sits behind the text, so on-dark accent text uses this instead:/n	   5.9:1 over the glow, 7.1:1 on flat graphite. Same hue, one step lighter. */
	--amber-on-dark: #f0855a;

	/* --- type ------------------------------------------------------------ */
	--font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-1: 0.75rem;   /* 12px — eyebrow, legal */
	--fs-2: 0.8125rem; /* 13px — captions, evidence */
	--fs-3: 0.875rem;  /* 14px — UI text, table body */
	--fs-4: 1rem;      /* 16px — body */
	--fs-5: 1.125rem;  /* 18px — lead paragraph */
	--fs-6: 1.375rem;  /* 22px — section heading */
	--fs-7: 1.75rem;   /* 28px — page heading, metric value */

	--lh-tight: 1.2;
	--lh-normal: 1.6;

	/* --- spacing, 4px base ---------------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 32px;
	--sp-8: 48px;

	/* --- radii and elevation -------------------------------------------- */
	--radius-sm: 4px;
	--radius-md: var(--radius);
	--radius-lg: 10px;
	--shadow-1: 0 1px 2px rgba(18, 21, 26, .06);
	--shadow-2: 0 6px 18px rgba(18, 21, 26, .12);
	--shadow-3: 0 10px 24px rgba(18, 21, 26, .18);

	/* --- minimum hit area (WCAG 2.5.5 / internal touch rule) ------------- */
	--tap: 48px;
}

/* ------------------------------------------------------------------
 * Element defaults
 * ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-4);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber-deep); }

/* Display face only where it earns its keep: headings, model codes, numbers. */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: 0;
}

/* ------------------------------------------------------------------
 * Focus and motion
 *
 * The ring is drawn on :focus-visible only, so a mouse click does not leave
 * an outline behind, but a keyboard user always sees where they are. Colour
 * is --steel: 6.2:1 against white, and it survives the dark header/footer
 * because those blocks override it (see site.css).
 * ------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--steel);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}