:root {
	/* Primary tints */
	--primary-t1: color-mix(in srgb, var(--primary), white 90%);
	--primary-t2: color-mix(in srgb, var(--primary), white 80%);
	--primary-t3: color-mix(in srgb, var(--primary), white 70%);
	--primary-t4: color-mix(in srgb, var(--primary), white 60%);
	--primary-t5: color-mix(in srgb, var(--primary), white 50%);
	--primary-t6: color-mix(in srgb, var(--primary), white 40%);

	/* Primary shades */
	--primary-s1: color-mix(in srgb, var(--primary), black 10%);
	--primary-s2: color-mix(in srgb, var(--primary), black 20%);
	--primary-s3: color-mix(in srgb, var(--primary), black 30%);
	--primary-s4: color-mix(in srgb, var(--primary), black 40%);
	--primary-s5: color-mix(in srgb, var(--primary), black 50%);
	--primary-s6: color-mix(in srgb, var(--primary), black 60%);

	/* Secondary tints */
	--secondary-t1: color-mix(in srgb, var(--secondary), white 90%);
	--secondary-t2: color-mix(in srgb, var(--secondary), white 80%);
	--secondary-t3: color-mix(in srgb, var(--secondary), white 70%);
	--secondary-t4: color-mix(in srgb, var(--secondary), white 60%);
	--secondary-t5: color-mix(in srgb, var(--secondary), white 50%);
	--secondary-t6: color-mix(in srgb, var(--secondary), white 40%);

	/* Secondary shades */
	--secondary-s1: color-mix(in srgb, var(--secondary), black 10%);
	--secondary-s2: color-mix(in srgb, var(--secondary), black 20%);
	--secondary-s3: color-mix(in srgb, var(--secondary), black 30%);
	--secondary-s4: color-mix(in srgb, var(--secondary), black 40%);
	--secondary-s5: color-mix(in srgb, var(--secondary), black 50%);
	--secondary-s6: color-mix(in srgb, var(--secondary), black 60%);

	/* Accent tints */
	--accent-t1: color-mix(in srgb, var(--accent), white 90%);
	--accent-t2: color-mix(in srgb, var(--accent), white 80%);
	--accent-t3: color-mix(in srgb, var(--accent), white 70%);
	--accent-t4: color-mix(in srgb, var(--accent), white 60%);
	--accent-t5: color-mix(in srgb, var(--accent), white 50%);
	--accent-t6: color-mix(in srgb, var(--accent), white 40%);

	/* Accent shades */
	--accent-s1: color-mix(in srgb, var(--accent), black 10%);
	--accent-s2: color-mix(in srgb, var(--accent), black 20%);
	--accent-s3: color-mix(in srgb, var(--accent), black 30%);
	--accent-s4: color-mix(in srgb, var(--accent), black 40%);
	--accent-s5: color-mix(in srgb, var(--accent), black 50%);
	--accent-s6: color-mix(in srgb, var(--accent), black 60%);

	/* Grey */
	--gray1: color-mix(in srgb, black, white 97%);
	--gray2: color-mix(in srgb, black, white 85%);
	--gray3: color-mix(in srgb, black, white 78%);
	--gray4: color-mix(in srgb, black, white 70%);
	--gray5: color-mix(in srgb, black, white 65%);
	--gray6: color-mix(in srgb, black, white 55%);
	--gray7: color-mix(in srgb, black, white 45%);
	--gray8: color-mix(in srgb, black, white 30%);
	--gray9: color-mix(in srgb, black, white 15%);

	/* Spacing (small and medium screens) */
	@media(max-width: 998px) {
		--spacing0: 0;
		--spacing: 1rem;
		--spacing1: calc(var(--spacing) * 1);
		--spacing2: calc(var(--spacing) * 2);
		--spacing3: calc(var(--spacing) * 3);
		--spacing4: calc(var(--spacing) * 4);
		--spacing5: calc(var(--spacing) * 5);
		--spacing6: calc(var(--spacing) * 6);
	}

	/* Spacing (large screens) */
	@media(min-width: 998px) {
		--spacing0: 0;
		--spacing: 1.5rem;
		--spacing1: calc(var(--spacing) * 1);
		--spacing2: calc(var(--spacing) * 2);
		--spacing3: calc(var(--spacing) * 3);
		--spacing4: calc(var(--spacing) * 4);
		--spacing5: calc(var(--spacing) * 5);
		--spacing6: calc(var(--spacing) * 6);
	}

	/* Fonts */
	--font-primary: primary;
	--font-secondary: secondary;

	/* Font size (small and medium screens) */
	@media(max-width: 998px) {
		--h1-font-size: 3em;
		--h2-font-size: 2em;
		--h3-font-size: 3em;
	}

	/* Font size (small and medium screens) */
	@media(min-width: 998px) {
		--h1-font-size: 4em;
		--h2-font-size: 3em;
		--h3-font-size: 2em;
	}


	/*
	h1, h2, h3 {
		margin-top: 0;
		padding-top: 0;
	}
	--h1-font-size: 4rem;
	--h2-font-size: 3.6rem;
	--h2-font-size: 3rem;
	*/

}

body {
	font-family: primary;
}