/**
 * Kind Goods base styles: the brand fonts and the brand tokens our own header, footer and page
 * templates use. Loaded on every page, before the page's Elementor styles.
 *
 * The fonts are the files Elementor Pro's Custom Fonts served (uploads/2023/07), with the same weight
 * mapping: the SemiBold file is Ridley Grotesk's normal weight, the Bold file its bold. font-display: swap
 * shows text at once in the fallback font instead of hiding it until the file arrives.
 */

@font-face {
	font-family: "Ridley Grotesk";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../../uploads/2023/07/RidleyGrotesk-SemiBold.woff2") format("woff2"),
		url("../../../uploads/2023/07/RidleyGrotesk-SemiBold.woff") format("woff");
}

@font-face {
	font-family: "Ridley Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../../uploads/2023/07/RidleyGrotesk-Bold.woff2") format("woff2"),
		url("../../../uploads/2023/07/RidleyGrotesk-Bold.woff") format("woff");
}

@font-face {
	font-family: "Museo Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../../uploads/2023/07/MuseoSans-500.woff2") format("woff2"),
		url("../../../uploads/2023/07/MuseoSans-500.woff") format("woff");
}

/* The brand tokens. The values are the Elementor kit's global colours (Site Settings → Global Colors),
   so pages built in Elementor and our own templates match. */
:root {
	--kg-color-dark: #2a3530;   /* kit "Primary" / "Text" */
	--kg-color-green: #93bd8a;  /* kit "Secondary" / "Accent" */
	--kg-color-cream: #f3f2eb;  /* kit "Light Green" */
	--kg-color-white: #fff;
	--kg-color-ink: #2b3430;    /* text on the green buttons */
	--kg-color-green-deep: #4b7542; /* the green as text on white / cream (5.4:1 / 4.8:1, WCAG AA; the kit's
	                                   green is 2.1:1 / 1.9:1), and a hovered green tile under cream text */
	--kg-font: "Ridley Grotesk", sans-serif;
	--kg-font-alt: "Museo Sans", sans-serif;
	--kg-radius: 5px;
	--kg-radius-card: 15px;
	--kg-content-width: 1140px;
}