:root {
	
	/* Brand colours */
	
	--color-primary: #0F5130;
	--color-secondary: #18814C;
	--color-contrast: #E8F2F0;
	--color-muted: #F6FAF9;
	--color-text: #051A0F;
	--color-background: #FBFEFC;

	/* Fonts */

	--font-heading: "Questrial", sans-serif;
	--font-body: "museo-sans", sans-serif; /* Adobe Fonts kit name; faces in css/fonts.css + functions.php */
	--font-tag: "museo-sans", sans-serif;

	/* Font Weights */

	--font-light: 300;
	--font-regular: 500;
	--font-heavy: 700;

	/* Font Sizes */

	--text-5: clamp(39.81px, 34.49px + 1.42vw, 54.93px);
	--text-4: clamp(33.18px, 29.39px + 1.01vw, 43.95px);
	--text-3: clamp(27.65px, 25.01px + 0.71vw, 35.16px);
	--text-2: clamp(23.04px, 21.25px + 0.48vw, 28.13px);
	--text-1: clamp(19.2px, 18.04px + 0.31vw, 22.5px);
	--text-0: clamp(16px, 15.3px + 0.19vw, 18px);
	--text--1: clamp(13.33px, 12.95px + 0.1vw, 14.4px);
	--text--2: clamp(11.11px, 10.97px + 0.04vw, 11.52px);

	/* Spacing */

	--space-3xs: clamp(4px, 3.65px + 0.09vw, 5px);
	--space-2xs: clamp(8px, 7.65px + 0.09vw, 9px);
	--space-xs: clamp(12px, 11.3px + 0.19vw, 14px);
	--space-sm: clamp(16px, 15.3px + 0.19vw, 18px);
	--space-md: clamp(24px, 22.94px + 0.28vw, 27px);
	--space-lg: clamp(32px, 30.59px + 0.38vw, 36px);
	--space-xl: clamp(48px, 45.89px + 0.56vw, 54px);
	--space-2xl: clamp(64px, 61.18px + 0.75vw, 72px);
	--space-3xl: clamp(96px, 91.77px + 1.13vw, 108px);
	--space-4xl: clamp(128px, 122.37px + 1.5vw, 144px);

	/* Hero Divider Height */
	
	--divider-h: clamp(48px, 5.2vw, 100px);

}

body {
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: var(--font-regular);
	font-size: var(--text-0);
	line-height: 1.5;
}

.container {
	max-width: calc(90rem + (var(--space-md) * 2));
	margin-inline: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.section {
    --section-pad: var(--space-3xl);
    padding-block: calc(var(--section-pad) + var(--section-offset, 0px)) var(--section-pad);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.1;
	font-weight: var(--font-regular);
	color: var(--color-primary);
}

h1 {
	font-size: var(--text-5);
	color: inherit;
}

h2 {
	font-size: var(--text-4);
}

h3 {
	font-size: var(--text-3);
}

h4 {
	font-size: var(--text-2);
}

h5 {
	font-size: var(--text-1);
}

h6 {
	font-size: var(--text-0);
}

a:not([class]) {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.button {
	display: inline-block;
	padding: var(--space-sm) var(--space-xl);
	font-family: var(--font-body);
	font-size: var(--text-0);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: var(--color-contrast);
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: .5rem;
	transition: background-color 0.3s ease-in-out;
}

.button:hover {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.button.secondary {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.button.secondary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.button.contrast {
	color: var(--color-primary);
	background-color: var(--color-contrast);
	border-color: var(--color-contrast);
}

.button.contrast:hover {
	background-color: var(--color-muted);
}

.button.outline {
	color: var(--color-primary);
	background-color: transparent;
	border: 2px solid var(--color-primary);
}

.button.outline:hover {
	background-color: var(--color-primary);
	color: var(--color-contrast);
}

.button.outline.contrast {
	color: var(--color-contrast);
	border-color: var(--color-contrast);
}

.button.outline.contrast:hover {
	background-color: var(--color-contrast);
	color: var(--color-primary);
}