:root {
    /* DECORATIVE TYPOGRAPHY */
    /* headers*/
    --decorative-header-font-family: Manrope;
    --decorative-header-font-weight: 400;
    --decorative-header-line-height: 51px;
    /* content */
    --decorative-content-font-family: Manrope;
    --decorative-content-font-weight: 400;
    --decorative-content-line-height: 46px;
    /* font variables */
    --base-size: 0.75rem; /* 12px */
    --scale: 1.2;
    --text-content: var(--base-size); /* 12px */
    --text-ui: 0.875rem; /* 14px */
    --text-md: 1rem; /* 16px */
    --h5: 0.6944rem; /* ~11px */
    --h4: calc(var(--h5) * var(--scale)); /* ~13px */
    --h3: calc(var(--h4) * var(--scale)); /* 16px */
    --h2: calc(var(--h3) * var(--scale)); /* ~19px */
    --h1: calc(var(--h2) * var(--scale)); /* ~23px */
    --text-lg: calc(var(--text-ui) * var(--scale)); /* ~17px */
    --text-small: 0.6875rem; /* 11px (use sparingly) */
    /* Display typography (large headings) */
    --display-4: 2.625rem; /* 42px */
    --display-3: 3.5rem; /* 56px */
    --display-2: 4.375rem; /* 70px */
    --display-1: 5.25rem; /* 84px */
    /* Proteria Colors */
    --primary-red: #FF3E3E;
    --primary-blue: #4DA9AE;
    --primary-blue-dark: #041433;
    --secondary-red: #FF6565;
    --secondary-blue: #98B0FF;
    --secondary-blue-dark: #4566D8;
    --tertiary-red: #FFB2B2;
    --tertiary-blue: #eef7f7;
    --tertiary-blue-dark: #A2B3EB;
    --ui-black: #000000;
    --ui-grey: #848484;
    --ui-grey-dark: #CCCCCC;
    --ui-components: #f7f7f7;
    --ui-white: #fff;
    --ui-font-base: #474747;
    --ui-background: #F9F9F9;
    --themecolor: #4CA9AE;
    --labelcolor: #6B7280;
    /* Images */
    --img-border-radius: 20px;
    /* Overwritten Kendo theme colors */
    --kendo-border-color: rgba(0, 0, 0, 0.2);
    /* PRIMARY – background */
    --control-bg-default-primary: var(--themecolor);
    --control-bg-hover-primary: #5BB9BE;
    --control-bg-active-primary: #3D8B8A;
    --control-bg-focus-primary: var(--themecolor);
    --control-bg-disabled-primary: #B6D6D7;
    /* PRIMARY – text */
    --control-text-default-primary: var(--ui-white);
    --control-text-hover-primary: var(--ui-white);
    --control-text-active-primary: var(--ui-white);
    --control-text-focus-primary: var(--ui-white);
    --control-text-disabled-primary: var(--ui-white);
    /* PRIMARY – border */
    --control-border-default-primary: var(--themecolor);
    --control-border-hover-primary: #5BB9BE;
    --control-border-active-primary: #3D8B8A;
    --control-border-focus-primary: var(--themecolor);
    --control-border-disabled-primary: #B6D6D7;
    /* SECONDARY – background */
    --control-bg-default-secondary: transparent;
    --control-bg-hover-secondary: #5BB9BE;
    --control-bg-active-secondary: #CED4DA;
    --control-bg-focus-secondary: #041433;
    --control-bg-disabled-secondary: #F8F9FA;
    /* SECONDARY – text */
    --control-text-default-secondary: #1F2933;
    --control-text-hover-secondary: var(--ui-white);
    --control-text-active-secondary: #1F2933;
    --control-text-focus-secondary: var(--ui-white);
    --control-text-disabled-secondary: #9AA0A6;
    /* SECONDARY – border */
    --control-border-default-secondary: #CACBCE;
    --control-border-hover-secondary: transparent;
    --control-border-active-secondary: transparent;
    --control-border-focus-secondary: #CED4DA;
    --control-border-disabled-secondary: #E5E7EB;
    /* INFO – background */
    --control-bg-default-info: transparent;
    --control-bg-hover-info: #EF9B70;
    --control-bg-active-info: #C26131;
    --control-bg-focus-info: #E4814F;
    --control-bg-disabled-info: #F8F9FA;
    /* INFO – text */
    --control-text-default-info: #E4814F;
    --control-text-hover-info: var(--ui-white);
    --control-text-active-info: var(--ui-white);
    --control-text-focus-info: var(--ui-white);
    --control-text-disabled-info: #B9B8B8;
    /* INFO – border */
    --control-border-default-info: #E4814F;
    --control-border-hover-info: #C26131;
    --control-border-active-info: transparent;
    --control-border-focus-info: #DEE2E6;
    --control-border-disabled-info: #E5E7EB;
    /* WARNING – background */
    --control-bg-default-warning: transparent;
    --control-bg-hover-warning: #FFCD39;
    --control-bg-active-warning: #D3A000;
    --control-bg-focus-warning: #FFC107;
    --control-bg-disabled-warning: #F8F9FA;
    /* WARNING – text */
    --control-text-default-warning: #E4814F;
    --control-text-hover-warning: #212529;
    --control-text-active-warning: #212529;
    --control-text-focus-warning: #212529;
    --control-text-disabled-warning: #B9B8B8;
    /* WARNING – border */
    --control-border-default-warning: #E4814F;
    --control-border-hover-warning: transparent;
    --control-border-active-warning: transparent;
    --control-border-focus-warning: transparent;
    --control-border-disabled-warning: #E5E7EB;
    /* DANGER – background */
    --control-bg-default-danger: transparent;
    --control-bg-hover-danger: #BB2D3B;
    --control-bg-active-danger: #A52834;
    --control-bg-focus-danger: #DC3545;
    --control-bg-disabled-danger: #F8F9FA;
    /* DANGER – text */
    --control-text-default-danger: #535353;
    --control-text-hover-danger: var(--ui-white);
    --control-text-active-danger: var(--ui-white);
    --control-text-focus-danger: var(--ui-white);
    --control-text-disabled-danger: #CF9494;
    /* DANGER – border */
    --control-border-default-danger: #CACBCE;
    --control-border-hover-danger: transparent;
    --control-border-active-danger: transparent;
    --control-border-focus-danger: transparent;
    --control-border-disabled-danger: #E5E7EB;
    /* General backgrounds */
    --bg-primary: #E1EDE3;
    --bg-secondary: #E9ECEF;
    --bg-info: #FDF2ED;
    --bg-warning: #FEFCE8;
    --bg-danger: #FDEDED;
}