:root {
    --cumulus-primary-900: #365592;
    --cumulus-primary-800: #4372B2;
    --cumulus-primary-700: #4B83C5;
    --cumulus-primary-600: #5495D7;
    --cumulus-primary-500: #5DA3E5;
    --cumulus-primary-400: #6CB0E9;
    --cumulus-primary-300: #81BEEC;
    --cumulus-primary-200: #A1D1F3;
    --cumulus-primary-100: #C4E2F7;
    --cumulus-primary-50: #E7F4FB;
    --cumulus-secondary-900: #2B6066;
    --cumulus-secondary-800: #368392;
    --cumulus-secondary-700: #3C97AB;
    --cumulus-secondary-600: #43ACC5;
    --cumulus-secondary-500: #49BBD8;
    --cumulus-secondary-400: #4FC6E0;
    --cumulus-secondary-300: #64D0E7;
    --cumulus-secondary-200: #8BDEF0;
    --cumulus-secondary-100: #B7EBF6;
    --cumulus-on-primary-high-emphasis: #FAF8FFFF;
    --cumulus-on-primary-medium-emphasis: #FAF8FFBF;
    --cumulus-on-primary-disabled: #FAF8FF66;
    --cumulus-error: #B1102C;
    --cumulus-bad: #FFA9A6;
    --cumulus-off: #B1102C;
    --cumulus-success: #7BC8CB;
    --cumulus-warningred: #EB5757;
    --cumulus-background: #F8FCFF;
    --cumulus-surface: #FFFFFF;
    --cumulus-on-surface-high-empasis: #0E0E12E6;
    --cumulus-on-surface-medium-empasis: #0E0E1299;
    --cumulus-on-surface-disabled: #0E0E1240;
    --cumulus-on-background: #0E0E12;
    --cumulus-on-background-high-empasis: #0E0E12E6;
    --cumulus-on-background-medium-empasis: #0E0E1299;
    --cumulus-on-background-disabled: #0E0E1240;
    --cumulus-box-shadow-01: #F5F5F5;
    --cumulus-button-hover: #E8EAED;
    --kaefer-red: #E63719;
    --kaefer-grey: #929EA5;
    --kaefer-grey-shades-dark: #BABEC5;
    --kaefer-grey-shades-medium: #CFD2D7;
    --kaefer-grey-shades-light: #E5E6E9;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --spacing-01: 8px;
    --spacing-02: 16px;
    --spacing-03: 24px;
    --spacing-04: 32px;
    --spacing-08: 64px;
    --spacing-12: 96px;
}


h1 {
    font-family: "Roboto";
    font-weight: var(--font-weight-light);
    font-size: 48px;
    line-height: 64px;
    letter-spacing: 0.20px;
}
h2 {
    font-family: "Roboto";
    font-weight: var(--font-weight-light);
    font-size: 40px;
    line-height: 56px;
    letter-spacing: 0.20px;
}
h3 {
    font-family: "Roboto";
    font-weight: var(--font-weight-light);
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0.20px;
}
h4 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.15px;
}
h5 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.15px;
}
h6 {
    font-family: "Roboto";
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
}
subtitle1 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
}
subtitle2 {
    font-family: "Roboto";
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.10px;
}
body1 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.50px;
}
body2 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}
small1 {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.25px;
}
cardtitle {
    font-family: "Roboto";
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.00px;
    text-transform: uppercase;
}
buttontypo {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.25px;
}
overline {
    font-family: "Roboto";
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.50px;
    text-transform: uppercase;
}

caption {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.40px;
}
navigation {
    font-family: "Roboto";
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.25px;
}

linear-blue {
    background: linear-gradient(270deg, #365592 0%, #FFFFFF 69.79%, #C4E2F7 100%);
}