/* ============================================================================
   RetireRange design tokens — single source of truth.
   Locked 2026-07-18 after comp review. Do not introduce a new hue here without
   a decision; the semantic mapping is what keeps the site and the app legible
   as one product.

   The palette is deliberately continuous with the calculator app
   (Tailwind gray-950 ground, emerald-500 accent) so that signing in reads as a
   step deeper into one product rather than a jump between two.

   A light direction was designed and rejected on direct readability testing.
   Do not reintroduce one without new evidence.
   ========================================================================= */

:root {
	/* --- ground and surfaces ------------------------------------------------
	   Neutrals carry a slight green bias rather than being pure grey, so they
	   read as chosen alongside the emerald rather than inherited. */
	--rr-ground: #080c0a; /* page background            — app gray-950 */
	--rr-surface: #0e1512; /* cards, panels, inputs      — app gray-900 */
	--rr-surface-2: #16201c; /* raised / tinted rows       — app gray-800 */
	--rr-line: #24322c; /* borders, dividers          — app gray-700 */

	/* --- ink ---------------------------------------------------------------
	   --rr-ink is for anything the reader must actually read. The muted stops
	   are for labels, captions, and metadata only. Dropping body copy to
	   --rr-ink-2 on a dark ground is what makes long pages tiring; that was
	   corrected during comp review and should not creep back. */
	--rr-ink: #e8efec; /* headings and body copy */
	--rr-ink-2: #9aaaa4; /* secondary text, labels */
	--rr-ink-3: #7f938c; /* captions, axis ticks, disabled */

	/* --- accent ------------------------------------------------------------ */
	--rr-accent: #10b981; /* emerald-500 — fills, focus rings, median line */
	--rr-accent-hi: #34d399; /* emerald-400 — hover, links, key figures */
	--rr-accent-ink: #04120c; /* text on an accent fill */
	--rr-accent-dim: rgba(16, 185, 129, 0.10); /* active/current row tint */

	/* --- semantic ----------------------------------------------------------
	   Mirrors the app's mapping. Purple stays reserved for medical-only
	   accounts (VEBA/HSA) in the app; it has no marketing-site use. */
	--rr-danger: #f87171; /* destructive, hard validation errors */
	--rr-warning: #fbbf24; /* soft, non-blocking notices */
	--rr-info: #60a5fa; /* informational callouts, neutral badges */

	/* --- percentile bands ---------------------------------------------------
	   Alphas raised from the comp values (.13/.26/.16/.07) after the chart read
	   too dark on real displays. The inner band must stay clearly denser than
	   the outer one — the nested-band reading is the whole point of the fan. */
	--rr-band-outer: rgba(16, 185, 129, 0.20); /* P10–P90 */
	--rr-band-inner: rgba(16, 185, 129, 0.38); /* P25–P75 */
	--rr-path: rgba(154, 170, 164, 0.24); /* individual simulation runs */
	--rr-grid: rgba(232, 239, 236, 0.12);

	/* --- type --------------------------------------------------------------
	   Geist is the app's face; using it for body copy is what ties the two
	   surfaces together. The serif is marketing-only — the app stays sans. */
	/* "Source Serif 4 Fallback" is a metric-matched alias for Georgia declared in
	   fonts.css — it must sit directly after the real face so the swap doesn't
	   change apparent size. See the note there before reordering this stack. */
	--rr-font-display: "Source Serif 4", "Source Serif 4 Fallback", Charter,
		"Iowan Old Style", Georgia, serif;
	--rr-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--rr-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

	/* Body copy runs a notch larger than a typical SaaS site. The audience is
	   45–60 and reads long pages; this is deliberate, not an accident. */
	--rr-text-body: 17.2px;
	--rr-text-lede: clamp(16.5px, 2vw, 19.5px);
	--rr-text-h1: clamp(38px, 6.4vw, 68px);
	--rr-text-h2: clamp(27px, 3.9vw, 40px);
	--rr-text-h3: 17.5px;
	--rr-text-small: 14px;
	/* Raised from 11px. At that size the letterspacing that makes an eyebrow an
	   eyebrow was working against legibility, and the audience is 45–60. */
	--rr-text-label: 12.5px; /* uppercase mono eyebrows — always letterspaced */

	--rr-measure: 65ch; /* max line length for running text */
	--rr-leading: 1.68;

	/* --- layout ------------------------------------------------------------ */
	--rr-max: 1120px;
	--rr-pad: clamp(20px, 5vw, 72px);
	--rr-section: clamp(56px, 9vw, 104px);
	--rr-radius: 12px;
	--rr-radius-sm: 7px;
}