[data-theme="light"] {
    --color-primary-001: #193A69;
    --color-primary-002: #EBEFF6;
    --color-primary-003: #98A7BC;
    --color-primary-004: #EBEFF6;

    --gray-900: #101828;
    --gray-700: #344054;
    --gray-600: #475467;
    --gray-500: #667085;
    --gray-400: #98A2B3;
    --gray-300: #D0D5DD;
    --gray-200: #E4E7EC;
    --gray-100: #F2F4F7;
    --gray-50: #FCFCFD;
    --gray-0: #FFFFFF;

    --tag-green: #027A48;
    --tag-green-background: #ECFDF3;
    --tag-red: #C01048;
    --tag-red-background: #FFF1F3;
    --tag-light-blue: #026AA2;
    --tag-light-blue-background: #F0F9FF;
    --tag-blue: #3538CD;
    --tag-blue-background: #EEF4FF;
    --tag-gray: #344054;
    --tag-gray-background: #F2F4F7;

    --tag-red-transparent: #CB4A4A;
    --tag-orange-transparent: #DA6E2C;
    --tag-indigo-transparent: #3538CD;
    --tag-black-transparent: #0D274D;
    --tag-green-transparent: #4D875C;
    --tag-gray-transparent: #98A2B3;

    --button-hover: #0D274D;
    --danger-button: #CB4A4A;
    --border-red: #CB4A4A;

    --sidebar-background: #0D274D;
    --announcement-content: #F2F4F7;
}

[data-theme="dark"] {
    --color-primary-001: #4A99E2;
    --color-primary-002: #232C44;
    --color-primary-003: #657F9D;
    --color-primary-004: #EBEFF6;

    --gray-900: #DFE9F0;
    --gray-700: #A9B5C0;
    --gray-600: #869AA9;
    --gray-500: #677A86;
    --gray-400: #3C4B54;
    --gray-300: #303A4B;
    --gray-200: #151A1E;
    --gray-100: #232D3E;
    --gray-50: #191F29;
    --gray-0: #1C232F;

    --tag-green: #CFF9DA;
    --tag-green-background: #4D875C;
    --tag-red: #F4D3DD;
    --tag-red-background: #B74166;
    --tag-light-blue: #CDE3EE;
    --tag-light-blue-background: #3F7897;
    --tag-blue: #D8D8F5;
    --tag-blue-background: #6C6ECA;
    --tag-gray: #A9B5C0;
    --tag-gray-background: #232D3E;

    --tag-red-transparent: #CB4A4A;
    --tag-orange-transparent: #DA6E2C;
    --tag-indigo-transparent: #3538CD;
    --tag-black-transparent: #0D274D;
    --tag-green-transparent: #4D875C;
    --tag-gray-transparent: #98A2B3;

    --button-hover: #232D3E;
    --danger-button: #CB4A4A;
    --border-red: #CB4A4A;

    --sidebar-background: #232D3E;
    --announcement-content: #F2F4F7;
}



/* colors */

.color-primary-001 {
    color: var(--color-primary-001) !important;
}

.color-gray-0 {
    color: var(--gray-0) !important;
}

.color-gray-200 {
    color: var(--gray-200) !important;
}

.color-gray-500 {
    color: var(--gray-500) !important;
}

.color-gray-600 {
    color: var(--gray-600) !important;
}

.color-gray-700 {
    color: var(--gray-700) !important;
}

.color-gray-900 {
    color: var(--gray-900) !important;
}



/* background colors */

.b-color-primary-001 {
    background-color: var(--color-primary-001) !important;
}

.b-color-primary-002 {
    background-color: var(--color-primary-002) !important;
}

.b-color-primary-003 {
    background-color: var(--color-primary-003) !important;
}

.b-color-active {
    background-color: #FFFFFF !important;
}

.b-color-gray-0 {
    background-color: var(--gray-0) !important;
}

.b-color-gray-100 {
    background-color: var(--gray-100) !important;
}

.b-color-gray-400 {
    background-color: var(--gray-400) !important;
}

.b-color-gray-500 {
    background-color: var(--gray-500) !important;
}

.b-color-gray-700 {
    background-color: var(--gray-700) !important;
}

.b-color-gray-900 {
    background-color: var(--gray-900) !important;
}

.b-color-alert-danger {
    background-color: var(--tag-red) !important;
}

.b-color-tag-green-transparent {
    background-color: #4D875C !important;
}

.b-color-tag-red-transparent {
    background-color: #CB4A4A !important;
}

.b-color-tag-orange-transparent {
    background-color: #DA6E2C !important;
}

.b-color-tag-black-transparent {
    background-color: #0D274D !important;
}

.b-color-tag-indigo-transparent {
    background-color: #3538CD !important;
}

.b-color-tag-gray-transparent {
    background-color: #98A2B3 !important;
}

.b-color-tag-red {
    background-color: var(--tag-red) !important;
}

.b-color-tag-green {
    background-color: var(--tag-green) !important;
}

.b-color-tag-gray {
    background-color: var(--tag-gray) !important;
}

.b-color-tag-blue {
    background-color: var(--tag-blue) !important;
}

.b-color-tag-light-blue {
    background-color: var(--tag-light-blue) !important;
}