:root {
    /* Main Color = Blue */
    --df-MainDark: #005899;
    --df-MainRegular: #0072C6;
    --df-MainLight: #348ee6;
    --mainDark: #005899;
    --mainRegular: #0072C6;
    --mainLight: #348ee6;

    /* Error Color = Red */
    --df-ErrorDark: #971519;
    --df-ErrorRegular: #B72025;
    --errorDark: #971519;
    --errorRegular: #B72025;

    /* Warning Color = Yellow */
    --df-WarningDark: #E2961C;
    --df-WarningRegular: #F4A11E;
    --warningDark: #E2961C;
    --warningRegular: #F4A11E;

    /* Highlight Color = Yellow */
    --df-Highlight: #F4A11E;
    --highlight: #F4A11E;

    /* Grayscale from darkest to lightest */
    --df-Grayscale1: #181818;
    --df-Grayscale2: #5C5C5C;
    --df-Grayscale3: #8E8A87;
    --df-Grayscale4: #BABABA;
    --df-Grayscale5: #D9D9D9;
    --df-Grayscale6: #E6E6E6;
    --df-Grayscale7: #F3F3F3;
    --df-Grayscale8: #FFFFFF;
    --grayscale1: #181818;
    --grayscale2: #5C5C5C;
    --grayscale3: #8E8A87;
    --grayscale4: #BABABA;
    --grayscale5: #D9D9D9;
    --grayscale6: #E6E6E6;
    --grayscale7: #F3F3F3;
    --grayscale8: #FFFFFF;
}