/* 
this file just sets up utility classes for all the colours used in the palette custom variables 
just use these classes to apply background colours and text colour that has been accessibility tested
variables are decleared in the main style.css file
use generators/casey-colour-utilities.html for a visual reference of all these classes
*/



/* .eic-bg-blue-50 {
    background-color: var(--eic-blue-50);
    color: var(--eic-blue-950);
}
.eic-bg-blue-100 {
    background-color: var(--eic-blue-100);
    color: var(--eic-blue-950);
}
.eic-bg-blue-200 {
    background-color: var(--eic-blue-200);
    color: var(--eic-blue-950);
}
.eic-bg-blue-300 {
    background-color: var(--eic-blue-300);
    color: var(--eic-blue-950);
}
.eic-bg-blue-400 {
    background-color: var(--eic-blue-400);
    color: var(--eic-blue-950);
}
.eic-bg-blue-500 {
    background-color: var(--eic-blue-500);
    color: var(--eic-blue-950);
}
.eic-bg-blue-600 {
    background-color: var(--eic-blue-600);
    color: var(--eic-blue-50);
}
.eic-bg-blue-700 {
    background-color: var(--eic-blue-700);
    color: var(--eic-blue-50);
}
.eic-bg-blue-800 {
    background-color: var(--eic-blue-800);
    color: var(--eic-blue-50);
}
.eic-bg-blue-900 {
    background-color: var(--eic-blue-900);
    color: var(--eic-blue-50);
}
.eic-bg-blue-950 {
    background-color: var(--eic-blue-950);
    color: var(--eic-blue-50);
} */

/* .eic-bg-green-50 {
    background-color: var(--eic-green-50);
    color: var(--eic-green-950);
}
.eic-bg-green-100 {
    background-color: var(--eic-green-100);
    color: var(--eic-green-950);
}
.eic-bg-green-200 {
    background-color: var(--eic-green-200);
    color: var(--eic-green-950);
}
.eic-bg-green-300 {
    background-color: var(--eic-green-300);
    color: var(--eic-green-950);
}
.eic-bg-green-400 {
    background-color: var(--eic-green-400);
    color: var(--eic-green-950);
}
.eic-bg-green-500 {
    background-color: var(--eic-green-500);
    color: var(--eic-green-50);
}
.eic-bg-green-600 {
    background-color: var(--eic-green-600);
    color: var(--eic-green-50);
}
.eic-bg-green-700 {
    background-color: var(--eic-green-700);
    color: var(--eic-green-50);
}
.eic-bg-green-800 {
    background-color: var(--eic-green-800);
    color: var(--eic-green-50);
}
.eic-bg-green-900 {
    background-color: var(--eic-green-900);
    color: var(--eic-green-50);
}
.eic-bg-green-950 {
    background-color: var(--eic-green-950);
    color: var(--eic-green-50);
} */

/* .eic-bg-dark-green {
    background-color: var(--eic-dark-green);
    color: var(--eic-green-50);
} */

/* .eic-bg-pink-05 {
    background-color: var(--eic-pink-05);
    color: var(--eic-pink-950);
}
.eic-bg-pink-100 {
    background-color: var(--eic-pink-100);
    color: var(--eic-pink-950);
}
.eic-bg-pink-200 {
    background-color: var(--eic-pink-200);
    color: var(--eic-pink-950);
}
.eic-bg-pink-300 {
    background-color: var(--eic-pink-300);
    color: var(--eic-pink-950);
}
.eic-bg-pink-400 {
    background-color: var(--eic-pink-400);
    color: var(--eic-pink-950);
}
.eic-bg-pink-500 {
    background-color: var(--eic-pink-500);
    color: var(--eic-pink-05);
}
.eic-bg-pink-600 {
    background-color: var(--eic-pink-600);
    color: var(--eic-pink-05);
}
.eic-bg-pink-700 {
    background-color: var(--eic-pink-700);
    color: var(--eic-pink-05);
}
.eic-bg-pink-800 {
    background-color: var(--eic-pink-800);
    color: var(--eic-pink-05);
}
.eic-bg-pink-900 {
    background-color: var(--eic-pink-900);
    color: var(--eic-pink-05);
}
.eic-bg-pink-950 {
    background-color: var(--eic-pink-950);
    color: var(--eic-pink-05);
} */

/* ===== NEW COLOR UTILITY CLASSES ===== */

/* Main Navy Background Classes */
.eic-bg-main-navy-50 {
    background-color: var(--eic-main-navy-50);
    color: var(--eic-main-navy-950);
}
.eic-bg-main-navy-100 {
    background-color: var(--eic-main-navy-100);
    color: var(--eic-main-navy-950);
}
.eic-bg-main-navy-200 {
    background-color: var(--eic-main-navy-200);
    color: var(--eic-main-navy-950);
}
.eic-bg-main-navy-300 {
    background-color: var(--eic-main-navy-300);
    color: var(--eic-main-navy-950);
}
.eic-bg-main-navy-400 {
    background-color: var(--eic-main-navy-400);
    color: var(--eic-main-navy-950);
}
.eic-bg-main-navy-500 {
    background-color: var(--eic-main-navy-500);
    color: var(--eic-main-navy-50);
}
.eic-bg-main-navy-600 {
    background-color: var(--eic-main-navy-600);
    color: var(--eic-main-navy-50);
}
.eic-bg-main-navy-700 {
    background-color: var(--eic-main-navy-700);
    color: var(--eic-main-navy-50);
}
.eic-bg-main-navy-800 {
    background-color: var(--eic-main-navy-800);
    color: var(--eic-main-navy-50);
}
.eic-bg-main-navy-900 {
    background-color: var(--eic-main-navy-900);
    color: var(--eic-main-navy-50);
}
.eic-bg-main-navy-950 {
    background-color: var(--eic-main-navy-950);
    color: var(--eic-main-navy-50);
}

/* Blue Background Classes */
.eic-bg-blue-50 {
    background-color: var(--eic-blue-50);
    color: var(--eic-blue-950);
}
.eic-bg-blue-100 {
    background-color: var(--eic-blue-100);
    color: var(--eic-blue-950);
}
.eic-bg-blue-200 {
    background-color: var(--eic-blue-200);
    color: var(--eic-blue-950);
}
.eic-bg-blue-300 {
    background-color: var(--eic-blue-300);
    color: var(--eic-blue-950);
}
.eic-bg-blue-400 {
    background-color: var(--eic-blue-400);
    color: var(--eic-blue-950);
}
.eic-bg-blue-500 {
    background-color: var(--eic-blue-500);
    color: var(--eic-blue-50);
}
.eic-bg-blue-600 {
    background-color: var(--eic-blue-600);
    color: var(--eic-blue-50);
}
.eic-bg-blue-700 {
    background-color: var(--eic-blue-700);
    color: var(--eic-blue-50);
}
.eic-bg-blue-800 {
    background-color: var(--eic-blue-800);
    color: var(--eic-blue-50);
}
.eic-bg-blue-900 {
    background-color: var(--eic-blue-900);
    color: var(--eic-blue-50);
}
.eic-bg-blue-950 {
    background-color: var(--eic-blue-950);
    color: var(--eic-blue-50);
}

/* Purple Background Classes */
.eic-bg-purple-50 {
    background-color: var(--eic-purple-50);
    color: var(--eic-purple-950);
}
.eic-bg-purple-100 {
    background-color: var(--eic-purple-100);
    color: var(--eic-purple-950);
}
.eic-bg-purple-200 {
    background-color: var(--eic-purple-200);
    color: var(--eic-purple-950);
}
.eic-bg-purple-300 {
    background-color: var(--eic-purple-300);
    color: var(--eic-purple-950);
}
.eic-bg-purple-400 {
    background-color: var(--eic-purple-400);
    color: var(--eic-purple-950);
}
.eic-bg-purple-500 {
    background-color: var(--eic-purple-500);
    color: var(--eic-purple-50);
}
.eic-bg-purple-600 {
    background-color: var(--eic-purple-600);
    color: var(--eic-purple-50);
}
.eic-bg-purple-700 {
    background-color: var(--eic-purple-700);
    color: var(--eic-purple-50);
}
.eic-bg-purple-800 {
    background-color: var(--eic-purple-800);
    color: var(--eic-purple-50);
}
.eic-bg-purple-900 {
    background-color: var(--eic-purple-900);
    color: var(--eic-purple-50);
}
.eic-bg-purple-950 {
    background-color: var(--eic-purple-950);
    color: var(--eic-purple-50);
}

/* Red Background Classes */
.eic-bg-red-50 {
    background-color: var(--eic-red-50);
    color: var(--eic-red-950);
}
.eic-bg-red-100 {
    background-color: var(--eic-red-100);
    color: var(--eic-red-950);
}
.eic-bg-red-200 {
    background-color: var(--eic-red-200);
    color: var(--eic-red-950);
}
.eic-bg-red-300 {
    background-color: var(--eic-red-300);
    color: var(--eic-red-950);
}
.eic-bg-red-400 {
    background-color: var(--eic-red-400);
    color: var(--eic-red-950);
}
.eic-bg-red-500 {
    background-color: var(--eic-red-500);
    color: var(--eic-red-50);
}
.eic-bg-red-600 {
    background-color: var(--eic-red-600);
    color: var(--eic-red-50);
}
.eic-bg-red-700 {
    background-color: var(--eic-red-700);
    color: var(--eic-red-50);
}
.eic-bg-red-800 {
    background-color: var(--eic-red-800);
    color: var(--eic-red-50);
}
.eic-bg-red-900 {
    background-color: var(--eic-red-900);
    color: var(--eic-red-50);
}
.eic-bg-red-950 {
    background-color: var(--eic-red-950);
    color: var(--eic-red-50);
}

/* Teal Background Classes */
.eic-bg-teal-50 {
    background-color: var(--eic-teal-50);
    color: var(--eic-teal-950);
}
.eic-bg-teal-100 {
    background-color: var(--eic-teal-100);
    color: var(--eic-teal-950);
}
.eic-bg-teal-200 {
    background-color: var(--eic-teal-200);
    color: var(--eic-teal-950);
}
.eic-bg-teal-300 {
    background-color: var(--eic-teal-300);
    color: var(--eic-teal-950);
}
.eic-bg-teal-400 {
    background-color: var(--eic-teal-400);
    color: var(--eic-teal-950);
}
.eic-bg-teal-500 {
    background-color: var(--eic-teal-500);
    color: var(--eic-teal-50);
}
.eic-bg-teal-600 {
    background-color: var(--eic-teal-600);
    color: var(--eic-teal-50);
}
.eic-bg-teal-700 {
    background-color: var(--eic-teal-700);
    color: var(--eic-teal-50);
}
.eic-bg-teal-800 {
    background-color: var(--eic-teal-800);
    color: var(--eic-teal-50);
}
.eic-bg-teal-900 {
    background-color: var(--eic-teal-900);
    color: var(--eic-teal-50);
}
.eic-bg-teal-950 {
    background-color: var(--eic-teal-950);
    color: var(--eic-teal-50);
}


/* .casey-bg-grey-50 {
    background-color: var(--casey-grey-50);
    color: var(--casey-grey-950);
}
.casey-bg-grey-100 {
    background-color: var(--casey-grey-100);
    color: var(--casey-grey-950);
}
.casey-bg-grey-200 {
    background-color: var(--casey-grey-200);
    color: var(--casey-grey-950);
}
.casey-bg-grey-300 {
    background-color: var(--casey-grey-300);
    color: var(--casey-grey-950);
}
.casey-bg-grey-400 {
    background-color: var(--casey-grey-400);
    color: var(--casey-grey-950);
}
.casey-bg-grey-500 {
    background-color: var(--casey-grey-500);
    color: var(--casey-grey-950);
}
.casey-bg-grey-600 {
    background-color: var(--casey-grey-600);
    color: var(--casey-grey-50);
}
.casey-bg-grey-700 {
    background-color: var(--casey-grey-700);
    color: var(--casey-grey-50);
}
.casey-bg-grey-800 {
    background-color: var(--casey-grey-800);
    color: var(--casey-grey-50);
}
.casey-bg-grey-900 {
    background-color: var(--casey-grey-900);
    color: var(--casey-grey-50);
}
.casey-bg-grey-950 {
    background-color: var(--casey-grey-950);
    color: var(--casey-grey-50);
} */