:root {
    /* Brand Identity colours hex values */
    --primary-color: #444F58;
    --primary-dark-color: #1C272F;
    --primary-light-color: #6B7780;
    --primary-light-color-rgb: 107, 119, 128;
    --primary-xlight-color: #EBEBEB;
    --primaryXDark: #293455;
    --secondary-color: #4B7AA0;
    --secondary-dark-color: #154E71;
    --secondary-light-color: #7CA9D1;
    --secondary-xlight-color: #DFE8F1;
    /* Brand Identity colours in rgba */
    --rgba-primary-color: 68, 79, 88;
    --rgba-primary-dark-color: 28, 39, 47;
    --rgba-primary-light-color: 107, 119, 128;
    --rgba-primary-xlight-color: 235, 235, 235;
    --rgba-primary-xdark: 41, 52, 85;
    --rgba-secondary-color: 75, 122, 160;
    --rgba-secondary-dark-color: 21, 78, 113;
    --rgba-secondary-light-color: 124, 169, 209;
    --rgba-shadow-color: 32, 73, 88;
    /* generic colours*/
    --white-color: #FFF;
    --background-color: #F9F9F9;
    /* colour utilities */
    --success-color: #369B65;
    --warning-color: #DD7D39;
    --danger-color: #D4454E;
    --disabled-color: #EBEBEB;
    --hover-color: #EBEBEB;
    --light-gray-color: #EBEBEB;
    /* colour utilities in rgba */
    --rgba-success-color: 54, 155, 101;
    --rgba-warning-color: 221, 125, 57;
    --rgba-danger-color: 212, 69, 78;
    --rgba-light-gray-color: 235, 235, 235;

    /* legacy utility colours*/
    --status-a: #39B54A;
    --status-b: #00A99D;
    --status-c: #FC0000;


    /* style colours */
    --teal: #4DA3B8;
    --orange: #D47A4E;
    --dark-pink: #DD667B;
     --rgba-dark-pink: 221, 102, 123;

     --indigo-purple: #4D6CB8;
      --rgba-indigo-purple: 77, 108, 184;



}