:root {
	--color-blue: #0275d4;
	--color-red: #db2822;
	--color-sky: #b3daf4;
	--color-cream: #fffef3;
	--color-beige: #ffecbb;
	--color-yellow: #ff0;
	--color-white: #fff;
	--color-black: #000;

	--font-regular: ppneuemontrealregular, Arial, sans-serif;
	--font-book: ppneuemontrealbook, Arial, sans-serif;

	--text-display: 6.5625rem;
	--text-statement: 4.6875rem;
	--text-headline: 4rem;
	--text-title: 2.5rem;
	--text-label: 2.5rem;
	--text-subtitle: 2rem;
	--text-lead: 1.5rem;
	--text-body: 1.25rem;
	--text-small: 1.125rem;
	--text-caption: 1rem;
	--text-marquee: 3.875rem;
	--text-ticker: 2.1875rem;

	--leading-none: 1;
	--leading-tight: 1.2;

	/* Spacing names are pixels at the 16px root */
	--space-10: 0.625rem;
	--space-12: 0.75rem;
	--space-15: 0.9375rem;
	--space-20: 1.25rem;
	--space-25: 1.5625rem;
	--space-30: 1.875rem;
	--space-35: 2.1875rem;
	--space-40: 2.5rem;
	--space-50: 3.125rem;
	--space-60: 3.75rem;
	--space-70: 4.375rem;
	--space-80: 5rem;
	--space-100: 6.25rem;

	--stroke: 3px;
	--stroke-thin: 2px;

	--radius-sm: 1.5625rem;
	--radius-md: 2.5rem;
	--radius-lg: 3.125rem;
	--radius-pill: 6.25rem;

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-swift: cubic-bezier(0.5, 0.5, 0, 1);
}

@media only screen and (max-width: 1440px) {
	:root {
		--text-display: 4.5rem;
		--text-headline: 3.5rem;
	}
}

@media only screen and (max-width: 1200px) {
	:root {
		--text-display: 3.5rem;
		--text-headline: 3rem;
		--text-subtitle: 1.75rem;
	}
}

@media only screen and (max-width: 960px) {
	:root {
		--text-display: 2.625rem;
		--text-statement: 3.4375rem;
		--text-headline: 2.625rem;
		--text-title: 2rem;
		--text-subtitle: 1.5rem;
	}
}

@media only screen and (max-width: 768px) {
	:root {
		--text-statement: 1.875rem;
	}
}

@media only screen and (max-width: 640px) {
	:root {
		--text-display: 2rem;
		--text-headline: 2.25rem;
		--text-title: 1.25rem;
		--text-lead: 1.25rem;
	}
}

html {
	font-size: 16px;
}

@media only screen and (min-width: 2000px) {
	html {
		font-size: 17.88px;
	}
}

@media only screen and (min-width: 2400px) {
	html {
		font-size: 19.76px;
	}
}
