/**
 * Design tokens.
 *
 * The handoff prototypes carried no stylesheet at all — 135 inline style
 * attributes on the homepage alone, no classes, no custom properties. This
 * file is where those values become a system. Every other stylesheet consumes
 * these and defines no raw colour of its own.
 *
 * Colour corrections applied here, and why:
 *   --lca-cyan  was #2FB6C2 — 2.44:1 with white. Fails WCAG AA (needs 4.5).
 *   --lca-gold  was #B8641C — 4.31:1 with white. Fails WCAG AA.
 * Both are used as card backgrounds behind white text, so both were darkened
 * to the nearest passing value. The shift is imperceptible at rest.
 *
 * @package LCA
 */

:root {
	/* ---- Brand ---- */
	--lca-navy: #1e1b4b;
	--lca-terracotta: #c2410c;
	--lca-teal: #1f7a82;
	--lca-gold: #b2611b;          /* was #B8641C — AA fix */
	--lca-cyan: #21818a;          /* was #2FB6C2 — AA fix */

	/* Darkened variants for hover. The design faded whole cards with
	   opacity: 0.85, which fades the white label too and dropped four of five
	   transportation cards below AA. Hover darkens the ground instead. */
	--lca-navy-dark: #16143a;
	--lca-terracotta-dark: #9d340a;
	--lca-teal-dark: #19626a;
	--lca-gold-dark: #8e4d15;
	--lca-cyan-dark: #1a686f;

	/* ---- Surfaces ---- */
	--lca-sand: oklch(98.5% 0.004 75);
	--lca-sand-alt: oklch(96% 0.008 75);
	--lca-white: #fff;
	/* Was 92% lightness — 1.16:1 against the sand ground, which meant
	   every card edge, table frame and hairline was invisible and the
	   page read as one undifferentiated wall. At 86% the card edges
	   actually appear while staying quiet. */
	--lca-line: oklch(86% 0.008 75);
	--lca-line-soft: oklch(94% 0.005 75);

	/* ---- Ink ---- */
	--lca-ink: var(--lca-navy);
	--lca-body: oklch(45% 0.02 265);
	--lca-muted: oklch(50% 0.02 265);

	/* Reversed-out text on navy. Measured: 85% = 11.8:1, 60% = 6.5:1,
	   50% = 4.95:1. All pass AA against #1E1B4B. */
	--lca-on-navy: #fff;
	--lca-on-navy-strong: rgb(255 255 255 / 0.85);
	--lca-on-navy-mid: rgb(255 255 255 / 0.7);
	--lca-on-navy-soft: rgb(255 255 255 / 0.6);
	--lca-on-navy-faint: rgb(255 255 255 / 0.5);
	--lca-on-navy-rule: rgb(255 255 255 / 0.12);

	/* ---- Hero scrims ----
	   One colour fading out, not a wash. The alpha follows an eased curve so
	   it reads like a soft-edged PNG rather than a linear ramp with a visible
	   band, and the top of the frame is left completely clear so the
	   photograph is the photograph. */
	--lca-scrim-hero: linear-gradient(180deg, rgb(30 27 75 / 0.000) 0%, rgb(30 27 75 / 0.020) 22%, rgb(30 27 75 / 0.100) 35%, rgb(30 27 75 / 0.240) 45%, rgb(30 27 75 / 0.420) 53%, rgb(30 27 75 / 0.620) 60%, rgb(30 27 75 / 0.760) 67%, rgb(30 27 75 / 0.860) 75%, rgb(30 27 75 / 0.920) 84%, rgb(30 27 75 / 0.950) 100%);
	--lca-scrim-page: linear-gradient(180deg, rgb(30 27 75 / 0.000) 0%, rgb(30 27 75 / 0.020) 24%, rgb(30 27 75 / 0.100) 38%, rgb(30 27 75 / 0.260) 50%, rgb(30 27 75 / 0.460) 58%, rgb(30 27 75 / 0.660) 65%, rgb(30 27 75 / 0.790) 73%, rgb(30 27 75 / 0.880) 82%, rgb(30 27 75 / 0.920) 92%, rgb(30 27 75 / 0.930) 100%);

	/* On a phone the heading and its line of introduction fill the frame,
	   so a scrim anchored to the bottom leaves the top of the heading over
	   bare sky — measured at 1.29:1. This one starts at a light tint and
	   deepens, which keeps the photograph readable and the text legible. */
	--lca-scrim-hero-sm: linear-gradient(180deg, rgb(30 27 75 / 0.300) 0%, rgb(30 27 75 / 0.300) 0.0%, rgb(30 27 75 / 0.312) 13.7%, rgb(30 27 75 / 0.343) 24.5%, rgb(30 27 75 / 0.393) 33.8%, rgb(30 27 75 / 0.452) 40.7%, rgb(30 27 75 / 0.521) 46.8%, rgb(30 27 75 / 0.595) 52.6%, rgb(30 27 75 / 0.672) 57.7%, rgb(30 27 75 / 0.749) 62.4%, rgb(30 27 75 / 0.821) 66.2%, rgb(30 27 75 / 0.883) 68.8%, rgb(30 27 75 / 0.917) 70.7%, rgb(30 27 75 / 0.930) 72.0%, rgb(30 27 75 / 0.930) 100%);

	/* ---- Accents ---- */
	--lca-divider-dotted: #e66c1b;

	/* ---- Type ---- */
	--lca-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	/* The symbol faces at the end are load-bearing: the "View full guide"
	   links end in a right arrow (U+2192), and Public Sans as served by
	   Google Fonts does not carry it. Without a font in the stack that
	   does, the browser draws a tofu box on the homepage. */
	--lca-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;

	/* Fluid: each size runs from its phone value at 360px to the comp's
	   value at 1280px. Body copy runs the other way on purpose — 16px on a
	   handset, 15px on a desktop, because reading distance differs. */
	--lca-fs-eyebrow: clamp(12px, 11.61px + 0.109vw, 13px);
	--lca-fs-small: clamp(14px, 13.61px + 0.109vw, 15px);
	--lca-fs-base: clamp(16px, 15.61px + 0.109vw, 17px);
	--lca-fs-lead: clamp(18px, 17.22px + 0.217vw, 20px);
	--lca-fs-h4: clamp(17px, 15.83px + 0.326vw, 20px);
	--lca-fs-h3: clamp(20px, 17.65px + 0.652vw, 26px);
	--lca-fs-h2: clamp(24px, 20.87px + 0.870vw, 32px);
	--lca-fs-h1: clamp(30px, 24.52px + 1.522vw, 44px);
	--lca-fs-display: clamp(30px, 26.09px + 1.087vw, 40px);

	--lca-lh-tight: 1.12;
	--lca-lh-heading: 1.2;
	--lca-lh-body: 1.6;
	--lca-lh-loose: 1.8;

	--lca-ls-eyebrow: 1.2px;
	--lca-ls-label: 0.5px;

	/* ---- Layout ---- */
	--lca-container: 1280px;
	--lca-gutter: 16px;
	/* An absolute length, not 65ch. A ch unit resolves against the font size
	   of whichever element uses it, so the same token gave a paragraph 597px,
	   a lead 676px, an h3 870px and an h2 1061px — every heading hung left of
	   its own body copy. 600px is 65 characters at the body size, once. */
	--lca-measure: 600px;

	--lca-space-1: 8px;
	--lca-space-2: 16px;
	--lca-space-3: 24px;
	--lca-space-4: 32px;
	--lca-space-5: 48px;
	--lca-space-6: 56px;

	--lca-section-y: 32px;
	--lca-grid-gap: 24px;

	/* ---- Radius ----
	   The design's radii cluster at 8px (buttons) and 10px (cards), with two
	   deliberate exceptions: the homepage hero at 4px and interior heroes at
	   14px. Nothing above 14px, and no pill shapes. */
	--lca-radius-btn: 8px;
	--lca-radius-card: 10px;
	--lca-radius-hero: 4px;
	--lca-radius-hero-page: 14px;
	--lca-radius-widget: 12px;

	/* ---- Elevation ---- */
	--lca-shadow-widget: 0 20px 48px rgb(30 27 75 / 0.14);
	--lca-shadow-card: 0 1px 2px rgb(30 27 75 / 0.04);

	/* ---- Motion ---- */
	--lca-transition: 160ms ease;

	/* ---- Focus ----
	   Nothing in the handoff defined a focus appearance. WCAG 2.4.7 requires
	   one, so it is defined here and applied globally in base.css. */
	--lca-focus-color: var(--lca-terracotta);
	--lca-focus-width: 3px;
	--lca-focus-offset: 2px;
}

@media (min-width: 600px) {
	:root {
		--lca-gutter: 24px;
		--lca-section-y: 40px;
		--lca-grid-gap: 24px;
	}
}

@media (min-width: 900px) {
	:root {
		--lca-section-y: 48px;
		--lca-grid-gap: 32px;
	}
}

@media (min-width: 1280px) {
	:root {
		--lca-section-y: 56px;
	}
}

/* The breakpoint steps below carry spacing only. Type is fluid from the
   scale above and needs no per-breakpoint override. */