:root {
	--primary-dark: #003366;
	--primary-mid: #4a90e2;
	--primary-light: #e6f2ff;
	--primary-lightest: #ffffff;

	/* Button colours (copper) — resting + darken-on-hover */
	--btn-bg: #9A5326;
	--btn-bg-hover: #7E4320;

	/* Contact form field interaction states.
	   The fields are rgba(255,255,255,0.5) over the #1d5645 green
	   section, which composites to ~#8EAAA2. Ring colours are picked
	   for WCAG 1.4.11 non-text contrast (3:1 minimum). */
	--field-ring-dark: #1d5645;
	/* 3.41:1 vs the #8EAAA2 field */
	--field-focus-ring: #ffffff;
	/* 8.50:1 vs #1d5645 */
	--field-focus-ring-width: 3px;
	--field-focus-ring-offset: 2px;
	--field-hover-ring-width: 2px;

	--font-family-base: "montserrat", "Helvetica Neue", Arial, sans-serif;
	--font-family-heading: "fabulosa", "Helvetica Neue", Arial, sans-serif;

	--font-weight-light: 400;
	--font-weight-heavy: 400;

	--font-size-base: 16px;
	--font-size-large: 23px;
	--font-size-heading: 3.5rem;

	--font-size-h1: 40px;
	--font-size-h2: 40px;
	--font-size-h3: 30px;
	--font-size-h4: 28px;
	--font-size-h5: 26px;
	--font-size-h6: 20px;

	--font-weight-h1: 400;
	--font-weight-h2: 400;
	--font-weight-h3: 400;
	--font-weight-h4: 400;
	--font-weight-h5: 400;
	--font-weight-h6: 400;

	--border-radius: 10px;

	--letter-spacing-h1: ;
	--letter-spacing-h2: 0.04em;
	--letter-spacing-h3: 0.03em;
	--letter-spacing-h4: 0.02em;
	--letter-spacing-h5: 0.01em;
	--letter-spacing-h6: 0.01em;
}

body {
	font-family: var(--font-family-base);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-base);
	font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
	font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-heavy);
	text-transform: uppercase;
	color: #9A5326;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	letter-spacing: var(--letter-spacing-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	letter-spacing: var(--letter-spacing-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	letter-spacing: var(--letter-spacing-h3);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	letter-spacing: var(--letter-spacing-h4);
}

h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-h5);
	letter-spacing: var(--letter-spacing-h5);
}

h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-h6);
	letter-spacing: var(--letter-spacing-h6);
}

@media (max-width: 768px) {
	:root {
		--font-size-h1: 30px;
		--font-size-h2: 30px;
		--font-size-h3: 25px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 17px;
	}
}