:root {
    --brand-color-web-sdk: #ece8ff;
    --brand-color-dark: #082940;
    --brand-color-light: #efddff;
    --brand-color-1: #DC54FF;
    --brand-color-2: #D254FD;
    --brand-color-3: #C454FA;
    --brand-color-4: #A255F3;
    --brand-color-5: #8854ED;
    --brand-color-6: #6E55E7;
    --brand-color-7: #5355E1;
}

/* Background Colors */
.bg-brand-web-sdk { background-color: var(--brand-color-web-sdk);}
.bg-brand-dark { background-color: var(--brand-color-dark);}
.bg-brand-light { background-color: var(--brand-color-light); }
.bg-brand-1 { background-color: var(--brand-color-1); }
.bg-brand-2 { background-color: var(--brand-color-2); }
.bg-brand-3 { background-color: var(--brand-color-3); }
.bg-brand-4 { background-color: var(--brand-color-4); }
.bg-brand-5 { background-color: var(--brand-color-5); }
.bg-brand-6 { background-color: var(--brand-color-6); }
.bg-brand-7 { background-color: var(--brand-color-7); }

/* Text Colors */
.text-brand-web-sdk { color : var(--brand-color-web-sdk)  !important;}
.text-brand-1 { color: var(--brand-color-1); }
.text-brand-2 { color: var(--brand-color-2); }
.text-brand-3 { color: var(--brand-color-3); }
.text-brand-4 { color: var(--brand-color-4); }
.text-brand-5 { color: var(--brand-color-5); }
.text-brand-6 { color: var(--brand-color-6); }
.text-brand-7 { color: var(--brand-color-7); }