:root {
	--body-color:#333;
	--body-background-color:#fff;
	
	--box-max-width:1024px;
	
	
	/* primary */
	--primary-one: #ffa; /* yellow */
	--primary-one-dark: #cb4;
		
	--primary-two: #f42; /* red */
	--primary-two-light: pink;
	--primary-two-dark: pink;
	
	--alt:var(--primary-one);
	--accent:var(--primary-one);
	--neutral:#fee; /* #e6eaee */
	--contrast:#fff;
	
	/*
	
	logo colors
	ffda00 = yellow (logo letters)
	#fa1 = light ornage
	#e61 = dark orange
	
	product colors
	ec7323 = orange chip (mango)
	fdb713 = orange yellow chip (pineapple)
	ef4023 = red chip (tropical citrus)
	405fd2 = blue chip (blueberry lemo)
	ff4019 = orange (blaze your own trail)
	
	*/
	
	
	
	/* FOCUS */
	--a-active-color:#fff;
	--a-active-background-color:var(--primary-three);
	--focus-outline-color:#e90;
	
	
	/* HEADINGS */
	--heading-color:#000; /* #cbc; */
	--heading-font:'Port Lligat Slab';
	
	
	/* MAIN MENU */
	--nav-main-background-color: #000;
	--nav-main-item-color:#fff;
	--nav-main-item-border-top:1px dotted #999;
	
	
	
	/* BUTTONS */
	--button-font-size:1.25rem;
	--button-font-weight:400;
	
	--button-border-width:4px;
	--button-border-radius:100px;

	--button-text-color:#fff;
	--button-background-color:#d71;

	--button-text-color-alt:#fff;
	--button-background-color-alt:#304;
	
	
	
	/* AREAS */
	--shared-head-foot-background-color:#000/*#e61*/;
	--shared-head-foot-color:#f80;
	
	--head-area-background-color:var(--shared-head-foot-background-color);
	--head-area-color:var(--shared-head-foot-color);
	--head-area-padding:initial;
	
	/* --foot-area-background-color:#151515; */
	--foot-area-background-color:#0b0920;
	--foot-area-color:var(--shared-head-foot-color);
	--foot-area-padding:initial;
	
}

/*

DO NOT ADD STYLES BELOW THIS
ONLY USE CSS VARIABLES ABOVE

*/