:root {
    /* colors */
    --v-primary-lighter: #F9A810;
    --v-primary-light: #f49115;
    --v-primary: #f07919;
    --v-primary-dark: #ea641b;
    --v-primary-darker: #a34d22;
    --v-secondary: #59afa5;
    --v-success: #28a745;
    --v-danger: #b03234;
    --v-warning: #a9d18e;
    --v-warning-alt: #D9C65A;
    --v-info: #0094ff;
    --v-grey-lighter: #e6e6e6;
    --v-grey-light: #808080;
    --v-grey: #585857;
    --v-grey-dark: #333333;
    --v-hightlight: #e6f5ff;

    --v-valiadation-color: #f07919;
    --v-valiadation-bg: #ffddb3;
    --v-valiadation-bg-alt: #ffa9a9;

    --v-brand-health: #a9d18e;
    --v-brand-tax: #59afa5;
    --v-brand-needs: #b03234;
    --v-brand-lawyer: #f49115;

    --v-banner-dev: #F9A810;
    --v-banner-preview: #28a745;
    --v-banner-staging: #0094ff;
    --v-banner-preprod: #D9C65A;

    /* gradients */
    --v-primary-gradient: var(--v-primary) linear-gradient(to right, var(--v-primary), var(--v-primary-light));
    --v-primary-gradient-light: var(--v-primary-light) linear-gradient(to right, var(--v-primary-light), var(--v-primary-lighter));
    --v-grey-gradient: var(--v-grey) linear-gradient(200deg, var(--v-grey), var(--v-grey-light));

    /* fonts */
    --v-font-primary: 'Raleway', sans-serif;
    --v-font-secondary: 'Open Sans', sans-serif;

    /* font sizes */
    --v-fs-sm: 13px;
    --v-fs-md: 16px;
    --v-fs-lg: 20px;
    --v-fs-xl: 36px;

    /* general sizes */
    --v-icon-width: 35px;
    --v-icon-gap: .25rem;
    --v-navbar-height: 60px;
    --v-wizard-lr-padding-sm: 10px;
    --v-wizard-lr-padding-lg: 70px;
    --v-footer-height: 130px;
    --v-sidebar-width: 120px;
    --v-flyout-width: 360px;
    --v-flyout-max-width: 650px;

    /* helpers */
    --v-footer-height-multiplier: 1.6;

    /* only for reference, calling these in media queries does not work sadly */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
}