/* Greenhouse — design tokens.
   Loaded on the front end and in the block editor so the two cannot drift.
   Nothing else in the theme hard-codes a colour; a child theme re-skins by
   overriding :root. */

:root {
	/* ---- Palette -------------------------------------------------------- */
	--gh-green-900: #173b2a; /* brand, headings, body text, primary fills   */
	--gh-green-700: #24523c; /* primary button hover                        */
	--gh-sage-200: #dfe6dc;  /* chips, learn band, secondary panels         */
	--gh-sage-100: #eaefe7;  /* callouts, table stripes                     */
	--gh-cream: #f3efe6;     /* page background, text on green              */
	--gh-white: #ffffff;     /* cards, article well, inputs                 */

	/* Clay is a three-tier token. clay-500 is 3.3:1 on cream and is used for
	   decoration and for type at 24px and up only. clay-700 is 5.1:1 and is the
	   only clay allowed for small text and small fills on cream. clay-200 is the
	   cream-side variant, for eyebrows sitting on green. */
	--gh-clay-500: #c96a3b;
	--gh-clay-700: #9e4f28;
	--gh-clay-800: #8a4321; /* clay button hover */
	--gh-clay-200: #e5a982;

	/* Muted text is a two-value token. #566b60 is 4.99:1 on cream and 5.73:1
	   on white, but only 4.50:1 on sage-200 — it rounds to AA and misses it.
	   Anything muted sitting on a sage panel uses the darker value. */
	--gh-ink-muted: #566b60;
	--gh-ink-on-sage: #516459;
	--gh-up: #24704a;        /* positive market change                      */
	--gh-rule: #d3d9d1;      /* hairline = green-900 at 15% on cream        */

	/* Translucent greens, for borders that must sit on any of the surfaces. */
	--gh-green-30: rgba( 23, 59, 42, 0.3 );
	--gh-green-25: rgba( 23, 59, 42, 0.25 );
	--gh-green-15: rgba( 23, 59, 42, 0.15 );
	--gh-green-08: rgba( 23, 59, 42, 0.08 );
	--gh-cream-80: rgba( 243, 239, 230, 0.8 );
	--gh-cream-70: rgba( 243, 239, 230, 0.72 );
	--gh-cream-60: rgba( 243, 239, 230, 0.66 );
	--gh-cream-15: rgba( 243, 239, 230, 0.15 );

	/* ---- Type ----------------------------------------------------------- */
	--gh-font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
	--gh-font-ui: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--gh-size-display: 68px;
	--gh-size-title: 56px;
	--gh-size-section: 36px;
	--gh-size-h2: 34px;
	--gh-size-card: 25px;
	--gh-size-h3: 25px;
	--gh-size-lesson: 23px;
	--gh-size-list-title: 21px;
	--gh-size-prose: 19px;
	--gh-size-pullquote: 28px;
	--gh-size-lede: 18px;
	--gh-size-body: 16px;
	--gh-size-nav: 15px;
	--gh-size-button: 14px;
	--gh-size-small: 14px;
	--gh-size-tiny: 13px;
	--gh-size-eyebrow: 11px;

	/* ---- Spacing -------------------------------------------------------- */
	--gh-s1: 4px;
	--gh-s2: 8px;
	--gh-s3: 12px;
	--gh-s4: 16px;
	--gh-s5: 20px;
	--gh-s6: 24px;
	--gh-s7: 32px;
	--gh-s8: 44px;
	--gh-s9: 56px;

	--gh-gutter: 36px;
	--gh-frame: 1280px;
	--gh-content: 1208px;
	--gh-wide: 1240px;
	--gh-well: 720px;
	--gh-rail: 320px;
	--gh-panel-inset: 20px;

	/* ---- Radii ---------------------------------------------------------- */
	--gh-r-panel: 28px;
	--gh-r-card: 22px;
	--gh-r-callout: 18px;
	--gh-r-image: 14px;
	--gh-r-table: 14px;
	--gh-r-small: 8px;
	--gh-r-pill: 999px;

	/* ---- Header heights, shared with the sticky rail and scroll offsets -- */
	--gh-header-h: 84px;
	--gh-header-condensed-h: 60px;
	--gh-sticky-top: 84px;
}

@media ( max-width: 1023px ) {
	:root {
		--gh-size-display: 52px;
		--gh-size-title: 44px;
		--gh-size-section: 32px;
		--gh-size-h2: 30px;
	}
}

@media ( max-width: 767px ) {
	:root {
		--gh-size-display: 36px;
		--gh-size-title: 36px;
		--gh-size-section: 28px;
		--gh-size-h2: 26px;
		--gh-size-card: 21px;
		--gh-size-h3: 22px;
		--gh-size-prose: 18px;
		--gh-size-pullquote: 24px;
		--gh-gutter: 18px;
		--gh-panel-inset: 12px;
		--gh-r-panel: 22px;
		--gh-r-card: 18px;
		--gh-r-image: 16px;
		--gh-header-h: 60px;
		--gh-sticky-top: 60px;
	}
}