/*  UTLITIES: LAYOUT
//////////////////////////////////////////////////////////////////////////////*/

@layer utilities {
    .background-white {
        background-color: var(--color-white);
        color: var(--color-black);
    }
    .background-black {
        background-color: var(--color-black);
        color: var(--color-white);
    }

    /*  RED //////////////////////////////////////////////////////////////////*/

    .background-red-25 {
        background-color: var(--color-mbz-red-25);
        color: var(--color-mbz-red-800);
    }
    .background-red-50 {
        background-color: var(--color-mbz-red-50);
        color: var(--color-mbz-red-800);
    }
    .background-red-100 {
        background-color: var(--color-mbz-red-100);
        color: var(--color-mbz-red-900);
    }
    .background-red-200 {
        background-color: var(--color-mbz-red-200);
        color: var(--color-mbz-red-900);
    }
    .background-red-300 {
        background-color: var(--color-mbz-red-300);
        color: var(--color-mbz-red-900);
    }
    .background-red-400 {
        background-color: var(--color-mbz-red-400);
        color: var(--color-mbz-red-900);
    }
    .background-red-500 {
        background-color: var(--color-mbz-red-500);
        color: var(--color-mbz-red-50);
    }
    .background-red-600 {
        background-color: var(--color-mbz-red-600);
        color: var(--color-mbz-red-25);
    }
    .background-red-700 {
        background-color: var(--color-mbz-red-700);
        color: var(--color-mbz-red-50);
    }

    .background-red-800 {
        background-color: var(--color-mbz-red-800);
        color: var(--color-mbz-red-100);
    }

    .background-red-900 {
        background-color: var(--color-mbz-red-900);
        color: var(--color-mbz-red-100);
    }

    /*  YELLOW ///////////////////////////////////////////////////////////////*/

    .background-yellow-25 {
        background-color: var(--color-mbz-yellow-25);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-50 {
        background-color: var(--color-mbz-yellow-50);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-100 {
        background-color: var(--color-mbz-yellow-100);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-200 {
        background-color: var(--color-mbz-yellow-200);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-300 {
        background-color: var(--color-mbz-yellow-300);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-400 {
        background-color: var(--color-mbz-yellow-400);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-500 {
        background-color: var(--color-mbz-yellow-500);
        color: var(--color-mbz-yellow-900);
    }
    .background-yellow-600 {
        background-color: var(--color-mbz-yellow-600);
        color: var(--color-mbz-yellow-25);
    }
    .background-yellow-700 {
        background-color: var(--color-mbz-yellow-700);
        color: var(--color-mbz-yellow-50);
    }
    .background-yellow-800 {
        background-color: var(--color-mbz-yellow-800);
        color: var(--color-mbz-yellow-100);
    }
    .background-yellow-900 {
        background-color: var(--color-mbz-yellow-900);
        color: var(--color-mbz-yellow-100);
    }

    /*  BEIGE ////////////////////////////////////////////////////////////////*/

    .background-beige-25 {
        background-color: var(--color-mbz-beige-25);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-50 {
        background-color: var(--color-mbz-beige-50);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-100 {
        background-color: var(--color-mbz-beige-100);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-200 {
        background-color: var(--color-mbz-beige-200);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-300 {
        background-color: var(--color-mbz-beige-300);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-400 {
        background-color: var(--color-mbz-beige-400);
        color: var(--color-mbz-beige-900);
    }
    .background-beige-500 {
        background-color: var(--color-mbz-beige-500);
        color: var(--color-mbz-beige-25);
    }
    .background-beige-600 {
        background-color: var(--color-mbz-beige-600);
        color: var(--color-mbz-beige-50);
    }
    .background-beige-700 {
        background-color: var(--color-mbz-beige-700);
        color: var(--color-mbz-beige-100);
    }
    .background-beige-800 {
        background-color: var(--color-mbz-beige-800);
        color: var(--color-mbz-beige-100);
    }
    .background-beige-900 {
        background-color: var(--color-mbz-beige-900);
        color: var(--color-mbz-beige-100);
    }

    /*  GREEN ////////////////////////////////////////////////////////////////*/

    .background-green-25 {
        background-color: var(--color-mbz-green-25);
        color: var(--color-mbz-green-900);
    }
    .background-green-50 {
        background-color: var(--color-mbz-green-50);
        color: var(--color-mbz-green-900);
    }
    .background-green-100 {
        background-color: var(--color-mbz-green-100);
        color: var(--color-mbz-green-900);
    }
    .background-green-200 {
        background-color: var(--color-mbz-green-200);
        color: var(--color-mbz-green-900);
    }
    .background-green-300 {
        background-color: var(--color-mbz-green-300);
        color: var(--color-mbz-green-900);
    }
    .background-green-400 {
        background-color: var(--color-mbz-green-400);
        color: var(--color-mbz-green-25);
    }
    .background-green-500 {
        background-color: var(--color-mbz-green-500);
        color: var(--color-mbz-green-50);
    }
    .background-green-600 {
        background-color: var(--color-mbz-green-600);
        color: var(--color-mbz-green-100);
    }
    .background-green-700 {
        background-color: var(--color-mbz-green-700);
        color: var(--color-mbz-green-100);
    }
    .background-green-800 {
        background-color: var(--color-mbz-green-800);
        color: var(--color-mbz-green-100);
    }
    .background-green-900 {
        background-color: var(--color-mbz-green-900);
        color: var(--color-mbz-green-100);
    }

    /*  PETROL ///////////////////////////////////////////////////////////////*/

    .background-petrol-25 {
        background-color: var(--color-mbz-petrol-25);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-50 {
        background-color: var(--color-mbz-petrol-50);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-100 {
        background-color: var(--color-mbz-petrol-100);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-200 {
        background-color: var(--color-mbz-petrol-200);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-300 {
        background-color: var(--color-mbz-petrol-300);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-400 {
        background-color: var(--color-mbz-petrol-400);
        color: var(--color-mbz-petrol-900);
    }
    .background-petrol-500 {
        background-color: var(--color-mbz-petrol-500);
        color: var(--color-mbz-petrol-25);
    }
    .background-petrol-600 {
        background-color: var(--color-mbz-petrol-600);
        color: var(--color-mbz-petrol-50);
    }
    .background-petrol-700 {
        background-color: var(--color-mbz-petrol-700);
        color: var(--color-mbz-petrol-100);
    }
    .background-petrol-800 {
        background-color: var(--color-mbz-petrol-800);
        color: var(--color-mbz-petrol-100);
    }
    .background-petrol-900 {
        background-color: var(--color-mbz-petrol-900);
        color: var(--color-mbz-petrol-100);
    }

    /*  BLUE /////////////////////////////////////////////////////////////////*/

    .background-blue-25 {
        background-color: var(--color-mbz-blue-25);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-50 {
        background-color: var(--color-mbz-blue-50);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-100 {
        background-color: var(--color-mbz-blue-100);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-200 {
        background-color: var(--color-mbz-blue-200);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-300 {
        background-color: var(--color-mbz-blue-300);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-400 {
        background-color: var(--color-mbz-blue-400);
        color: var(--color-mbz-blue-900);
    }
    .background-blue-500 {
        background-color: var(--color-mbz-blue-500);
        color: var(--color-mbz-blue-25);
    }
    .background-blue-600 {
        background-color: var(--color-mbz-blue-600);
        color: var(--color-mbz-blue-50);
    }
    .background-blue-700 {
        background-color: var(--color-mbz-blue-700);
        color: var(--color-mbz-blue-100);
    }
    .background-blue-800 {
        background-color: var(--color-mbz-blue-800);
        color: var(--color-mbz-blue-100);
    }
    .background-blue-900 {
        background-color: var(--color-mbz-blue-900);
        color: var(--color-mbz-blue-100);
    }

    /*  NAVY /////////////////////////////////////////////////////////////////*/

    .background-navy-25 {
        background-color: var(--color-mbz-navy-25);
        color: var(--color-mbz-navy-900);
    }
    .background-navy-50 {
        background-color: var(--color-mbz-navy-50);
        color: var(--color-mbz-navy-900);
    }
    .background-navy-100 {
        background-color: var(--color-mbz-navy-100);
        color: var(--color-mbz-navy-900);
    }
    .background-navy-200 {
        background-color: var(--color-mbz-navy-200);
        color: var(--color-mbz-navy-900);
    }
    .background-navy-300 {
        background-color: var(--color-mbz-navy-300);
        color: var(--color-mbz-navy-900);
    }
    .background-navy-400 {
        background-color: var(--color-mbz-navy-400);
        color: var(--color-mbz-navy-25);
    }
    .background-navy-500 {
        background-color: var(--color-mbz-navy-500);
        color: var(--color-mbz-navy-50);
    }
    .background-navy-600 {
        background-color: var(--color-mbz-navy-600);
        color: var(--color-mbz-navy-100);
    }
    .background-navy-700 {
        background-color: var(--color-mbz-navy-700);
        color: var(--color-mbz-navy-100);
    }
    .background-navy-800 {
        background-color: var(--color-mbz-navy-800);
        color: var(--color-mbz-navy-100);
    }
    .background-navy-900 {
        background-color: var(--color-mbz-navy-900);
        color: var(--color-mbz-navy-100);
    }

    /*  GREY /////////////////////////////////////////////////////////////////*/

    .background-grey-25 {
        background-color: var(--color-mbz-grey-25);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-50 {
        background-color: var(--color-mbz-grey-50);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-100 {
        background-color: var(--color-mbz-grey-100);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-200 {
        background-color: var(--color-mbz-grey-200);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-300 {
        background-color: var(--color-mbz-grey-300);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-400 {
        background-color: var(--color-mbz-grey-400);
        color: var(--color-mbz-grey-900);
    }
    .background-grey-500 {
        background-color: var(--color-mbz-grey-500);
        color: var(--color-mbz-grey-25);
    }
    .background-grey-600 {
        background-color: var(--color-mbz-grey-600);
        color: var(--color-mbz-grey-50);
    }
    .background-grey-700 {
        background-color: var(--color-mbz-grey-700);
        color: var(--color-mbz-grey-100);
    }
    .background-grey-800 {
        background-color: var(--color-mbz-grey-800);
        color: var(--color-mbz-grey-100);
    }
    .background-grey-900 {
        background-color: var(--color-mbz-grey-900);
        color: var(--color-mbz-grey-100);
    }
}