/* 
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
*/


/* 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);
}



/* 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);
}