/**
 * THR Design Tokens & CSS Variables
 */

:root {
	--brand-primary: #D92128;
	--brand-primary-alt: #EC1C24;
	--brand-secondary: #0926A2;
	--accent: #101010;
	--black: #000000;
	--white: #ffffff;

	--grey-darkest: #323232;
	--grey-dark: #5A5A5A;
	--grey: #8C8C8C;
	--grey-light: #DCDCDC;
	--grey-lightest: #EFEFEF;

	--honey-light: #F7F1E7;
	--honey-border: #E8DECF;

	--vert-heat-vision: #6442AC;
	--vert-live-feed: #008080;
	--vert-the-race: #956E37;
	--vert-thr-esq: #3454DB;
	--vert-rambling: #A74165;
	--vert-fien-print: #4B6A88;
	--vert-behind-screen: #008000;

	/* Display = condensed headline face (THR: Kepler Std Semicondensed Display). */
	--font-display: 'Instrument Serif', 'Kepler Std', Georgia, serif;
	--font-serif: 'Newsreader', 'Kepler Std', Georgia, serif;
	--font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* THR headlines are a medium-weight display cut, not bold. */
	--fw-display: 500;
	--fw-heading: 600;
	--fw-accent: 700;
	--fw-body: 400;

	--header-height: 56px;
	--footer-bg: var(--black);
	--footer-muted: #B4B4B4;
	--footer-rule: #3C3C3C;
	--overlay: rgba(0, 0, 0, 0.55);

	/* THR desktop grid (measured): 1128px of content = 796 main + 32 gap + 300 rail. */
	--container-max: 1168px;
	--content-width: 796px;
	--rail-width: 300px;
	--gap-main: 32px;
	--sticky-height: 52px;
	--tabbar-height: 58px;

	--scale-primary-xxl: 34px;
	--line-primary-xxl: 36px;
	--scale-primary-xl: 34px;
	--line-primary-xl: 32px;
	--scale-primary-l: 32px;
	--line-primary-l: 35px;
	--scale-primary-m: 28px;
	--line-primary-m: 20px;
	--scale-primary-s: 20px;
	--line-primary-s: 20px;

	--scale-secondary-xl: 20px;
	--line-secondary-xl: 23px;
	--scale-secondary-l: 18px;
	--line-secondary-l: 21px;

	--scale-body-m: 20px;
	--line-body-m: 25px;

	--scale-article-title: 34px;
	--line-article-title: 36px;
	--scale-article-dek: 20px;
	--line-article-dek: 24px;

	--scale-accent-xl: 18px;
	--scale-accent-m: 15px;
	--scale-accent-s: 14px;
	--scale-accent-xs: 12px;
}

@media (min-width: 1000px) {
	:root {
		--scale-primary-xxl: 54px;
		--line-primary-xxl: 48px;
		--scale-primary-xl: 54px;
		--line-primary-xl: 48px;
		--scale-primary-l: 48px;
		--line-primary-l: 44px;
		--scale-primary-m: 35px;
		--line-primary-m: 30px;
		--scale-primary-s: 29px;
		--line-primary-s: 28px;

		--scale-secondary-xl: 24px;
		--line-secondary-xl: 27px;
		--scale-secondary-l: 20px;
		--line-secondary-l: 23px;

		--scale-body-m: 22px;
		--line-body-m: 28px;

		--scale-article-title: 64px;
		--line-article-title: 60px;
		--scale-article-dek: 26px;
		--line-article-dek: 29px;
	}
}