:root {
    /* semantic color variables for this project */
    --color-background: #eee;
    --color-white: #ffffff;
    --color-background-app: #ffffff;
    --color-black: #000000;
    --color-blue: #407FCA;
    --color-text: #000000;
    --color-primary: #117DC6;
    --color-primary-800: #4197D1;
    --color-primary-700: #58A4D7;
    --color-primary-600: #70B1DD;
    --color-primary-500: #88BEE2;
    --color-primary-450: #94b9d2;
    --color-primary-400: #A0CBE8;
    --color-primary-300: #B8D8EE;
    --color-primary-200: #CFE5F4;
    --color-primary-100: #E7F2F9;
    --color-icon-background: #D1E5F5;
    --color-error: #FF0006;
    --color-error-background: #FBE2DD;
    --color-success: #00BC31;
    --color-success-background: #D9F5E0;
    --color-success-text: #117DC6;
    --color-warning: #F7A049;
    --color-warning-background: #F7A04933;
    --color-info-background: #E6F0F8;
    --color-green: #00BC31;
    --color-evse-available: #00BC31;
    --color-evse-unknown: #999999;
    --color-evse-charging: #117DC6;
    --color-stop-button: #FF0006;
    --color-text-primary: var(--color-primary);
    --color-gray-800: #333333;
    --color-gray-700: #4C4C4C;
    --color-gray-600: #666666;
    --color-gray-500: #808080;
    --color-gray-400: #999999;
    --color-gray-300: #B3B3B3;
    --color-gray-200: #CCCCCC;
    --color-gray-100: #E5E5E5;
    --color-gray-015: #F1F1F1;
    --app-max-width: 500px
}