html, body{

    /* Base Colors */

    --color-background: #f2f2f2;
    --color-xModeBackground: #fff;
    --color-xModeBorder: #fff;
    --color-xModeBoxShadow: rgba(50, 50, 93, 0.25) 0px 10px 30px -11px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    --color-xModeBoxShadowHover: rgba(255, 88, 0, 0.25) 0px 30px 60px -12px, rgba(255, 88, 0, 0.8) 0px 18px 36px -18px;
    --color-cardBoxShadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    --color-background-text: white;
    --color-foreground-text: black;

    /* Dividers and structure */

    --color-dark: #383d41;
    --color-medium: darkgrey;
    --color-light: #C3C7D8;
    --color-white: white;

    /* UI Elements */

    --color-topbarBackground: #fff;
    --color-lightMode-filtersBackground: #f2f2f2;
    --color-primary: #FF5800;
    --color-boxShadow-topBar: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --color-primary-text: black;

    --color-secondary: #019862;
    --color-secondary-text: black;

    --color-tertiary: #FF5800;
    --color-tertiary-text: black;

    /* ICONS */

    --color-inline: #ff5800;
    --color-outline: black;

    /* Background-Image */
    --color-inlineBgImg: #ff5800;
    --color-outlineBgImg: #fff;

    /* Buttons */

    --color-positive: forestgreen; /* #00A26D*/
    --color-positive-text: white;

    --color-positive-light: lightgreen;

    --color-negative: red;
    --color-negative-text: white;

    --color-negative-light: lightcoral;

    --color-info: cadetblue;
    --color-info-text: white;

    --color-warning: #E79535;
    --color-warning-text: white;


}