/*
 * Design tokens — Bennett Lab
 *
 * Every value here is measured from the approved mockup.
 * Change a colour or a size HERE, never further down the cascade.
 */

:root {
	/* NTU brand. Blue and red must stay predominant (NTU Quick Brand Guide 2018). */
	--bl-blue: #181C62;
	--bl-red: #D71440;
	--bl-footer: #A72244;

	/* Neutrals */
	--bl-ink: #181C62;
	--bl-body: #33333A;
	--bl-muted: #6E6E78;
	--bl-border: #C8C8C8;
	--bl-rule: #E6E6E6;
	--bl-tint: #F2F2F5;
	--bl-white: #FFFFFF;

	/* Footer */
	--bl-footer-text: #F6DCE2;
	--bl-footer-label: #F7D2DA;

	/* Type */
	--bl-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--bl-sans: 'Barlow', -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Type scale — desktop 1440 */
	--bl-h1: 56px;
	--bl-h2: 34px;
	--bl-h3: 21px;
	--bl-text: 17px;
	--bl-prose: 760px;
	--bl-pad: 160px;

	/* Content width. The mockup is drawn at 1440, where 2 x 160 padding leaves
	   1120, and the formula below reproduces that exactly at 1440. Past 1440 the
	   content keeps growing to --bl-max so a wide monitor does not end up mostly
	   empty, then stops so the two-column layouts keep their proportions.
	   Prose stays capped at --bl-prose regardless, so line length never suffers.
	   Effective width = min(viewport - 320, --bl-max). */
	--bl-max: 1360px;

	/* Spacing scale */
	--bl-4: 4px;
	--bl-8: 8px;
	--bl-12: 12px;
	--bl-16: 16px;
	--bl-24: 24px;
	--bl-32: 32px;
	--bl-48: 48px;
	--bl-64: 64px;
	--bl-88: 88px;

	--bl-header-h: 88px;
}

/* Tablet 1024 */
@media (max-width: 1024px) {
	:root {
		--bl-h1: 42px;
		--bl-h2: 29px;
		--bl-h3: 19px;
		--bl-text: 16px;
		--bl-prose: 620px;
		--bl-pad: 64px;
		--bl-header-h: 76px;
	}
}

/* Mobile 412 */
@media (max-width: 767px) {
	:root {
		--bl-h1: 31px;
		--bl-h2: 24px;
		--bl-h3: 18px;
		--bl-text: 16px;

		/* The mockup's 372px is simply 412 minus the two 20px gutters, so the
		   reading column fills the screen. Hard-coding 372 left the text at half
		   width on anything wider than a phone but still under this breakpoint,
		   for example a 747px window. 100% reproduces 372 at 412 and grows. */
		--bl-prose: 100%;
		--bl-pad: 20px;
		--bl-header-h: 64px;
	}
}