/* -------------------------------------------------------------------------- *
 * -------------------------------------------------------------------------- *
 * ========= Mohunky Repsonsive Framework V6 ========= *
 * ================= MRWD SITE STYLES ================= *
 * -------------------------------------------------------------------------- *
 * -------------------------------------------------------------------------- */

/* ================= Colours ================== */
:root {
	--colorPrimary: hsl(354,100%,46%);
	--colorPrimary-light: hsl(354,100%,56.9%);
	--colorPrimary-dark: hsl(354,100%,36.9%);

	--colorSecondary: hsl(340,46.4%,46.9%);
	--colorSecondary-light: hsl(340,46.4%,56.9%);
	--colorSecondary-dark: hsl(340,46.4%,36.9%);

	--colorTertiary: hsl(100,46.4%,46.9%);
	--colorTertiary-light: hsl(100,46.4%,56.9%);
	--colorTertiary-dark: hsl(100,46.4%,36.9%);

	--colorOffBlack: hsl(0,0%,14.9%);
	--colorOffBlack-light: hsl(0,0%,24.9%);

	--colorGrey: hsl(0,0%,50.2%);
	--colorGrey-light: hsl(0,0%,60.2%);
	--colorGrey-dark: hsl(0,0%,40.2%);

	--colorOffWhite: hsl(60,5.3%,96.3%);
	--colorOffWhite-dark: hsl(60,5.3%,86.3%);

	--colorWhite: #ffffff;
	--colorBlack: #000000;
	--colorErrorRed: #ed000c;
}

/* ----- Background Colours ----- */
.bg-primary				{   background-color:var(--colorPrimary);   }
.bg-primary.-light		{   background-color:var(--colorPrimary-light);   }
.bg-primary.-dark		{   background-color:var(--colorPrimary-dark);   }

.bg-secondary			{   background-color:var(--colorSecondary);   }
.bg-secondary.-light	{   background-color:var(--colorSecondary-light);   }
.bg-secondary.-dark		{   background-color:var(--colorSecondary-dark);   }

.bg-tertiary			{   background-color:var(--colorTertiary);   }
.bg-tertiary.-light		{   background-color:var(--colorTertiary-light);   }
.bg-tertiary.-dark		{   background-color:var(--colorTertiary-dark);   }

.bg-grey				{   background-color:var(--colorGrey);   }
.bg-grey.-light			{   background-color:var(--colorGrey-light);   }
.bg-grey.-dark			{   background-color:var(--colorGrey-dark);   }

.bg-offBlack			{   background-color:var(--colorOffBlack);   }
.bg-offBlack.-light		{   background-color:var(--colorOffBlack-light);   }

.bg-offWhite			{   background-color:var(--colorOffWhite);   }
.bg-offWhite.-dark		{   background-color:var(--colorOffWhite-dark);   }

/* ----- Text Colours ----- */
.txt-primary			{   color:var(--colorPrimary);   }
.txt-primary.-light		{   color:var(--colorPrimary-light);   }
.txt-primary.-dark		{   color:var(--colorPrimary-dark);   }

.txt-secondary			{   color:var(--colorSecondary);   }
.txt-secondary.-light	{   color:var(--colorSecondary-light);   }
.txt-secondary.-dark	{   color:var(--colorSecondary-dark);   }

.txt-tertiary			{   color:var(--colorTertiary);   }
.txt-tertiary.-light	{   color:var(--colorTertiary-light);   }
.txt-tertiary.-dark		{   color:var(--colorTertiary-dark);   }

.txt-grey				{   color:var(--colorGrey);   }
.txt-grey.-light		{   color:var(--colorGrey-light);   }
.txt-grey.-dark			{   color:var(--colorGrey-dark);   }

.txt-offBlack			{   color:var(--colorOffBlack);   }
.txt-offBlack.-light	{   color:var(--colorOffBlack-light);   }

.txt-offWhite			{   color:var(--colorOffWhite);   }
.txt-offWhite.-dark		{   color:var(--colorOffWhite-dark);   }

.txt-errorRed			{   color:var(--colorErrorRed);   }

/* ----- SVG Fill Colours ----- */
.fill-primary			{   fill:var(--colorPrimary);   }
.fill-primary.-light	{   fill:var(--colorPrimary-light);   }
.fill-primary.-dark		{   fill:var(--colorPrimary-dark);   }

.fill-secondary			{   fill:var(--colorSecondary);   }
.fill-secondary.-light	{   fill:var(--colorSecondary-light);   }
.fill-secondary.-dark	{   fill:var(--colorSecondary-dark);   }

.fill-tertiary			{   fill:var(--colorTertiary);   }
.fill-tertiary.-light	{   fill:var(--colorTertiary-light);   }
.fill-tertiary.-dark	{   fill:var(--colorTertiary-dark);   }

.fill-grey				{   fill:var(--colorGrey);   }
.fill-grey.-light		{   fill:var(--colorGrey-light);   }
.fill-grey.-dark		{   fill:var(--colorGrey-dark);   }

.fill-offBlack			{   fill:var(--colorOffBlack);   }
.fill-offBlack.-light	{   fill:var(--colorOffBlack-light);   }

.fill-offWhite			{   fill:var(--colorOffWhite);   }
.fill-offWhite.-dark	{   fill:var(--colorOffWhite-dark);   }

.fill-white				{   fill:var(--colorWhite);   }