/* Deloitte Brand Color Palette */
:root {
    /* Primary Palette */
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);
    --deloitte-green: #86BG25;
    --green-4: rgb(67, 176, 42);
    --accessible-green: rgb(38, 137, 13);
    --green-6: rgb(4, 106, 56);
    --accessible-teal: rgb(13, 131, 144);
    --accessible-blue: rgb(0, 124, 176);
  
    /* Secondary Palette */
    --green-1: rgb(227, 228, 141);
    --green-2: rgb(196, 214, 0);
    --green-5: rgb(0, 154, 68);
    --green-7: rgb(44, 82, 52);
  
    --blue-1: rgb(160, 220, 255);
    --blue-2: rgb(98, 181, 229);
    --blue-3: rgb(0, 163, 224);
    --blue-4: rgb(0, 118, 168);
    --blue-5: rgb(0, 85, 135);
    --blue-6: rgb(1, 33, 105);
    --blue-7: rgb(4, 30, 66);
  
    --teal-1: rgb(221, 239, 232);
    --teal-2: rgb(157, 212, 207);
    --teal-3: rgb(111, 194, 180);
    --teal-4: rgb(0, 171, 171);
    --teal-5: rgb(0, 151, 169);
    --teal-6: rgb(0, 118, 128);
    --teal-7: rgb(0, 79, 89);
  
    --cool-gray-2: rgb(208, 208, 206);
    --cool-gray-4: rgb(187, 188, 188);
    --cool-gray-6: rgb(167, 168, 170);
    --cool-gray-7: rgb(151, 153, 155);
    --cool-gray-9: rgb(117, 120, 123);
    --cool-gray-10: rgb(99, 102, 106);
    --cool-gray-11: rgb(83, 86, 90);
  
    /* Functional Use */
    --red-functional: rgb(218, 41, 28);
    --orange-functional: rgb(237, 139, 0);
    --yellow-functional: rgb(255, 205, 0);
  
    /* Limited Use */
    --bright-green: rgb(13, 242, 0);
    --bright-teal: rgb(62, 250, 197);
    --bright-blue: rgb(51, 240, 255);

    /* Primary Palette */
    --deloitte-white: rgb(255, 255, 255);
    --deloitte-black: rgb(0, 0, 0);
    --deloitte-green: rgb(134, 188, 37);
    --deloitte-green-4: rgb(67, 176, 42);
    --deloitte-accessible-green: rgb(38, 137, 13);
    --deloitte-green-6: rgb(4, 106, 56);
    --deloitte-accessible-teal: rgb(13, 131, 144);
    --deloitte-accessible-blue: rgb(0, 124, 176);

    /* Secondary Palette */
    --deloitte-green-1: rgb(227, 228, 141);
    --deloitte-green-2: rgb(196, 214, 0);
    --deloitte-green-5: rgb(0, 154, 68);
    --deloitte-green-7: rgb(44, 82, 52);
    --deloitte-blue-1: rgb(160, 220, 255);
    --deloitte-blue-2: rgb(98, 181, 229);
    --deloitte-blue-3: rgb(0, 163, 224);
    --deloitte-blue-4: rgb(0, 118, 168);
    --deloitte-blue-5: rgb(0, 85, 135);
    --deloitte-blue-6: rgb(1, 33, 105);
    --deloitte-blue-7: rgb(4, 30, 66);
    --deloitte-teal-1: rgb(221, 239, 232);
    --deloitte-teal-2: rgb(157, 212, 207);
    --deloitte-teal-3: rgb(111, 194, 180);
    --deloitte-teal-4: rgb(0, 171, 171);
    --deloitte-teal-5: rgb(0, 151, 169);
    --deloitte-teal-6: rgb(0, 118, 128);
    --deloitte-teal-7: rgb(0, 79, 89);

    /* Cool Grays */
    --deloitte-cool-gray-2: rgb(208, 208, 206);
    --deloitte-cool-gray-4: rgb(187, 188, 188);
    --deloitte-cool-gray-6: rgb(167, 168, 170);
    --deloitte-cool-gray-7: rgb(151, 153, 155);
    --deloitte-cool-gray-9: rgb(117, 120, 123);
    --deloitte-cool-gray-10: rgb(99, 102, 106);
    --deloitte-cool-gray-11: rgb(83, 86, 90);

    /* Limited Use Colors */
    --deloitte-bright-green: rgb(13, 242, 0);
    --deloitte-bright-teal: rgb(62, 250, 197);
    --deloitte-bright-blue: rgb(51, 240, 255);

    /* Functional Colors */
    --deloitte-red: rgb(218, 41, 28);
    --deloitte-orange: rgb(237, 139, 0);
    --deloitte-yellow: rgb(255, 205, 0);

    /* Opacity Variants */
    --deloitte-green-90: rgba(134, 188, 37, 0.9);
    --deloitte-green-80: rgba(134, 188, 37, 0.8);
    --deloitte-green-70: rgba(134, 188, 37, 0.7);
    --deloitte-green-60: rgba(134, 188, 37, 0.6);
    --deloitte-green-50: rgba(134, 188, 37, 0.5);
    --deloitte-green-40: rgba(134, 188, 37, 0.4);
    --deloitte-green-30: rgba(134, 188, 37, 0.3);
    --deloitte-green-20: rgba(134, 188, 37, 0.2);
    --deloitte-green-10: rgba(134, 188, 37, 0.1);
}

/* Utility Classes */
.bg-deloitte-green { background-color: var(--deloitte-green); }
.bg-deloitte-dark-green { background-color: var(--deloitte-green-6); }
.bg-deloitte-light-green { background-color: var(--deloitte-green-2); }
.bg-deloitte-teal { background-color: var(--deloitte-accessible-teal); }
.bg-deloitte-blue { background-color: var(--deloitte-accessible-blue); }

.text-deloitte-green { color: var(--deloitte-green); }
.text-deloitte-dark-green { color: var(--deloitte-green-6); }
.text-deloitte-light-green { color: var(--deloitte-green-2); }
.text-deloitte-teal { color: var(--deloitte-accessible-teal); }
.text-deloitte-blue { color: var(--deloitte-accessible-blue); }

.border-deloitte-green { border-color: var(--deloitte-green); }
.border-deloitte-dark-green { border-color: var(--deloitte-green-6); }
.border-deloitte-light-green { border-color: var(--deloitte-green-2); }
.border-deloitte-teal { border-color: var(--deloitte-accessible-teal); }
.border-deloitte-blue { border-color: var(--deloitte-accessible-blue); }