/*
 * Design tokens.
 *
 * Values are taken verbatim from the approved reference so the build stays pixel-faithful.
 * Token names are kept identical too, which means CSS lifted from the reference drops in
 * without rewriting every colour reference.
 *
 * Nothing in this file produces output. It only declares custom properties.
 */

:root {
	/* Surfaces */
	--w: #FFFFFF;
	--paper: #F5F5F2;
	--sand: #EBEBE6;
	--k: #0A0A0A;

	/* Brand olive. --olive is the highlight behind headline words. */
	--olive: #C2D92E;
	--olive2: #A8BE1E;
	--sage: #DCE896;
	--deepsage: #A8BE1E;

	/* Call to action. Resolves to black in the approved design; kept as its own
	   token so a future brand change does not have to hunt through button rules. */
	--chestnut: #0A0A0A;
	--chestnut2: #2A2A2A;

	/* Accent, used sparingly */
	--blue: #3D6FE0;
	--blue2: #2A54B8;

	/* Text and rules */
	--grey: #8A8F98;
	--grey2: #6E737B;
	--dim: #6B6B68;
	--fog: rgba(245, 245, 242, 0.55);
	--rule-d: rgba(245, 245, 242, 0.14);
	--rule-l: rgba(10, 10, 10, 0.12);
	--rule-o: rgba(255, 255, 255, 0.25);

	/* Type stacks */
	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Layout. --gutter is the horizontal page inset every section shares. */
	--gutter: 72px;
	--nav-h: 66px;
	--maxw: 1600px;
}

@media (max-width: 1024px) {
	:root {
		--gutter: 40px;
	}
}

@media (max-width: 640px) {
	:root {
		--gutter: 22px;
	}
}