/* 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;
	--sheet: rgba(255, 255, 255, .65);
	--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;
}