/* Design tokens for the modern stack. Load order: tokens -> base -> article. */

:root {
	/* frame width (from legacy.css): drives the desktop chrome offsets */
	--content-width: 650px;
	--frame-width: calc(var(--content-width) + 147px + 88px);

	/* text and surfaces */
	--ink: #1c1c1c;
	--ink-soft: #333;
	--muted: #5f6368;
	--line: #e4e1d8;
	--soft: #faf9f5;
	--paper: #fff;
	--on-accent: #fff;

	/* links and accents */
	--link: #000070;
	--link-hover: #0000cc;
	--yellow: #fee019;

	/* geometry */
	--radius-box: 10px;
	--radius-img: 6px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--pad: clamp(20px, 4.4vw, 32px);
	--hero-ratio: 2 / 1;

	/* type */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-micro: 11px;      /* facts caption */
	--fs-label: 12px;      /* kicker, toc-title, subhead-label, ad label */
	--fs-caption: 13px;    /* figcaption, byline, facts rows */
	--fs-small: 14px;      /* note, stories small print */
	--fs-body: 16px;
	--fs-h3: 18px;
	--fs-h2: 24px;
	--fs-h1: clamp(30px, 5vw, 38px);
	--fs-lead: clamp(17px, 3vw, 19px);

	/* component widths */
	--w-aside: 240px;      /* facts box and .article-float (was 232 and 240) */
	--w-ad-media: 120px;
	--w-step-media: 144px;
}