:root {
    /* Primitives (Raw Colors) */

    --color-Blue_Black: #0b161f;
    --color-Yellow: #e5b52b;
    --color-White: #ffffff;
    --color-Black: #000000;
    --color-Blue: #5AA9F8;
    --color-Green: #2be56F;
    --color-Red: #ff4d4f;
    --color-Light_Green: #E6F9F0;

    --color-Gray_10: #f2f4f8;
    --color-Gray_20: #dde1e6;
    --color-Gray_30: #c1c7cd;
    --color-Gray_40: #a2a9b0;
    --color-Gray_50: #878d96;
    --color-Gray_60: #697077;
    --color-Gray_70: #4d5358;
    --color-Gray_80: #343a3f;
    --color-Gray_90: #21272A;
    --color-Gray_100: #121619;
}

:root {
    /* Semantic Colors (Light Mode) */

    --color-Text_Primary: var(--color-Blue_Black);
    --color-Text_Secondary: var(--color-Gray_80);
    --color-Text_Disabled: var(--color-Gray_40);
    --color-Text_Button: var(--color-Blue_Black);

    --color-Background_Primary: var(--color-White);
    --color-Background_Secondary: var(--color-Gray_10);
    --color-Background_Tertiary: var(--color-Gray_20);
    --color-Background_Border: var(--color-Gray_40);
    --color-Background_Card: var(--color-White);
    --color-Background_Highlight: var(--color-Gray_80);
    --color-Background_Complete: var(--color-Light_Green);

    --color-Button_Primary: var(--color-Yellow);
    --color-Button_Blue: var(--color-Blue);
    --color-Button_Red: var(--color-Red);

    --color-Alerts_Success: var(--color-Green);
    --color-Alerts_Warning: var(--color-Yellow);
    --color-Alerts_Error: var(--color-Red);
    --color-Alerts_Info: var(--color-Gray_40);

    --color-Background_Warning: #FFF8E1;
}

[data-theme="dark"] {
    /* Semantic Colors (Dark Mode) */

    --color-Text_Primary: var(--color-White);
    --color-Text_Secondary: var(--color-Gray_20);
    --color-Text_Disabled: var(--color-Gray_60);
    --color-Text_Button: var(--color-Blue_Black);

    --color-Background_Primary: var(--color-Blue_Black);
    --color-Background_Secondary: var(--color-Gray_80);
    --color-Background_Tertiary: var(--color-Gray_70);
    --color-Background_Border: var(--color-Gray_60);
    --color-Background_Card: var(--color-Gray_90);
    --color-Background_Highlight: var(--color-Gray_40);
    --color-Background_Complete: var(--color-Light_Green);

    --color-Button_Primary: var(--color-Yellow);
    --color-Button_Blue: var(--color-Blue);
    --color-Button_Red: var(--color-Red);

    --color-Alerts_Success: var(--color-Green);
    --color-Alerts_Warning: var(--color-Yellow);
    --color-Alerts_Error: var(--color-Red);
    --color-Alerts_Info: var(--color-Gray_40);

    --color-Background_Warning: #3D3300;
}