:root {
	/* primary */
	--primary-one: #5ad; /* sky blue */
	--primary-one-dark: #39c;
	--primary-one-light: #084;
	
	--primary-two: #125; /* navy blue */
	--primary-two-dark: #112;
	--primary-two-light: #dde6dd;
	
	--primary-accent:#fec10e; /* yellow-orange *//* #f9bc06; */
	
	
	/* A */
	--primary-a-color:#f70;
	/* FOCUS */
	--a-active-color:#fff;
	--a-active-background-color:var(--primary-one);
	--focus-outline-color:var(--primary-accent);
	
	
	/* HEADINGS */
	--heading-color:#231208;
	
	
	/* MAIN MENU */
	--menu-drawer-wide-display:inline-flex;
	/* closed */
	--nav-main-item-color:var(--primary-one); /* a */
	/* open */
	--nav-main-open-item-color:var(--primary-one); /* a */
	--nav-main-open-item-border-top:1px dotted var(--primary-one); /* a */
	--nav-main-open-background-color:var(--primary-two-dark); /* nav */
	/* drawer */
	--nav-main-drawer-color:var(--primary-one);
	--nav-main-drawer-open-color:var(--nav-main-open-item-color);
	
	
	/* BODY */
	--body-background-color:#fff;
	
	
	/* DEFAULT AREAS */
	--head-area-background-color:#fff;
	--head-area-color:#000;
	--head-area-padding:initial;
	
	--foot-area-background-color:var(--primary-two-dark);
	--foot-area-color:#fff;
	--foot-area-padding:initial;
	
	
	
	/* BUTTONS */
	/* button foundation */
	--button-font-size:1.25rem;
	--button-font-weight:700;
	--button-border-width:0;
	--button-border-radius:0 600px 600px 600px;
	--button-padding:1rem 3rem;
	
		
	/* button */	
	--button-text-color:#fff;
	--button-background-color:var(--primary-one, #000);

		
	/* button alt */		
	--button-text-color-alt:var(--primary-one);
	--button-background-color-alt:var(--primary-two);

}

/*

DO NOT ADD STYLES BELOW THIS
ONLY USE CSS VARIABLES ABOVE

*/