:root {
    --thi-sys-color-primary-50: #F7FAFC;
    --thi-sys-color-primary-100: #E4ECF5;
    --thi-sys-color-primary-200: #D6E3F3;
    --thi-sys-color-primary-300: #A6CEFF;
    --thi-sys-color-primary-400: #99AEC8;
    --thi-sys-color-primary-500: #5678A3;
    --thi-sys-color-primary-600: #305A8F;
    --thi-sys-color-primary-700: #013476;
    --thi-sys-color-primary-800: #011D42;
    --thi-sys-color-secondary-50: #EDF7FD;
    --thi-sys-color-secondary-100: #DAEFFB;
    --thi-sys-color-secondary-200: #C8E8FA;
    --thi-sys-color-secondary-300: #B5E0F8;
    --thi-sys-color-secondary-400: #A3D8F6;
    --thi-sys-color-secondary-500: #82ADC5;
    --thi-sys-color-secondary-600: #547D94;
    --thi-sys-color-secondary-700: #2F5266;
    --thi-sys-color-secondary-800: #14384D;
    --thi-sys-color-neutral-50: #F6F8FC;
    --thi-sys-color-neutral-100: #EEF4FA;
    --thi-sys-color-neutral-200: #E0E6EE;
    --thi-sys-color-neutral-300: #C6D0E0;
    --thi-sys-color-neutral-400: #8B99B1;
    --thi-sys-color-neutral-500: #56647E;
    --thi-sys-color-neutral-600: #39445B;
    --thi-sys-color-neutral-700: #242F46;
    --thi-sys-color-neutral-800: #11182E;
    --thi-sys-color-button-background-active: #013476;
    --thi-sys-color-button-background-disabled: #C6D0E0;
    --thi-sys-color-button-background-pressed: #305A8F;
    --thi-sys-color-button-background-hover: #A3D8F6;
    --thi-sys-color-button-text-active: #ffffff;
    --thi-sys-color-button-text-pressed: #A3D8F6;
    --thi-sys-color-button-text-disabled: #56647E;
    --thi-sys-color-button-text-hover: #013476;
    --thi-sys-color-basic-white: #ffffff;
    --thi-sys-color-basic-link: #0E31D2;
    --thi-sys-color-basic-black: #050A1B;
    --thi-sys-color-text-heading: #013476;
    --thi-sys-color-text-subheading: #305A8F;
    --thi-sys-color-text-text-black: #11182E;
    --thi-sys-color-text-text-gray: #56647E;
    --thi-sys-color-warning-50: #FEF9E4;
    --thi-sys-color-warning-500: #F5BE01;
    --thi-sys-color-warning-600: #F39506;
    --thi-sys-color-warning-800: #692308;
    --thi-sys-color-error-50: #FCF2F4;
    --thi-sys-color-error-100: #F9E6E8;
    --thi-sys-color-error-600: #B50015;
    --thi-sys-color-error-700: #9E0012;
    --thi-sys-color-error-800: #61000B;
    --thi-sys-color-success-50: #EBFEF5;
    --thi-sys-color-success-100: #DFF7E9;
    --thi-sys-color-success-400: #009E4F;
    --thi-sys-color-success-500: #008844;
    --thi-sys-color-success-600: #007D3E;
    --thi-sys-color-success-700: #005C2E;
    --thi-sys-color-success-800: #08412B;
    --thi-sys-typescale-navigation-s-medium: 500 11.2px/14 Thieme_Argo_2011;
    --thi-sys-typescale-navigation-s-light: 300 11.2px/14 Thieme_Argo_2011;
    --thi-sys-typescale-navigation-s-bold: 700 11.2px/14 Thieme_Argo_2011;
    --thi-sys-typescale-text-s-light: 300 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-text-s-medium: 500 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-text-s-bold: 700 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-display-line-height-s: 48;
    --thi-sys-typescale-display-line-height-m: 56;
    --thi-sys-typescale-display-line-height-l: 68;
    --thi-sys-typescale-heading-line-height-xs: 28;
    --thi-sys-typescale-heading-line-height-s: 30;
    --thi-sys-typescale-heading-line-height-m: 36;
    --thi-sys-typescale-heading-line-height-l: 40;
    --thi-sys-typescale-text-line-height-xxs: 14;
    --thi-sys-typescale-text-line-height-xs: 16;
    --thi-sys-typescale-text-line-height-s: 20;
    --thi-sys-typescale-text-line-height-m: 24;
    --thi-sys-typescale-text-line-height-l: 24;
    --thi-sys-typescale-heading-fontsize-xs: 20px;
    --thi-sys-typescale-heading-fontsize-s: 23px;
    --thi-sys-typescale-heading-fontsize-m: 28px;
    --thi-sys-typescale-heading-fontsize-l: 33px;
    --thi-sys-typescale-display-fontsize-s: 40px;
    --thi-sys-typescale-display-fontsize-m: 48px;
    --thi-sys-typescale-display-fontsize-l: 57px;
    --thi-sys-typescale-text-fontsize-xs: 12px;
    --thi-sys-typescale-text-fontsize-s: 14px;
    --thi-sys-typescale-text-fontsize-m: 16px;
    --thi-sys-typescale-text-fontsize-l: 19px;
    --thi-sys-typescale-text-fontsize-input-field-text: 17px;
    --thi-sys-typescale-text-fontsize-input-field-supportive-text: 12px;
    --thi-sys-typescale-navigation-fontsize-s: 11.2px;
    --thi-sys-typescale-text-m-light: 300 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-text-m-medium: 500 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-text-m-bold: 700 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-text-l-light: 300 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-text-l-medium: 500 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-text-l-bold: 700 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-xs-light: 300 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-link-xs-medium: 500 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-link-xs-bold: 700 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-link-s-light: 300 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-link-s-medium: 500 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-link-s-bold: 700 14px/20 Thieme_Argo_2011;
    --thi-sys-typescale-link-m-light: 300 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-m-medium: 500 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-m-bold: 700 16px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-l-light: 300 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-l-medium: 500 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-link-l-bold: 700 19px/24 Thieme_Argo_2011;
    --thi-sys-typescale-heading-xs-light: 300 20px/28 Thieme_Argo_2011;
    --thi-sys-typescale-heading-xs-medium: 500 20px/28 Thieme_Argo_2011;
    --thi-sys-typescale-heading-xs-bold: 700 20px/28 Thieme_Argo_2011;
    --thi-sys-typescale-text-xs-light: 300 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-text-xs-medium: 500 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-text-xs-bold: 700 12px/16 Thieme_Argo_2011;
    --thi-sys-typescale-heading-s-light: 300 23px/30 Thieme_Argo_2011;
    --thi-sys-typescale-heading-s-medium: 500 23px/30 Thieme_Argo_2011;
    --thi-sys-typescale-heading-s-bold: 700 23px/30 Thieme_Argo_2011;
    --thi-sys-typescale-heading-m-light: 300 28px/36 Thieme_Argo_2011;
    --thi-sys-typescale-heading-m-medium: 500 28px/36 Thieme_Argo_2011;
    --thi-sys-typescale-heading-m-bold: 700 28px/36 Thieme_Argo_2011;
    --thi-sys-typescale-heading-l-light: 300 33px/40 Thieme_Argo_2011;
    --thi-sys-typescale-heading-l-medium: 500 33px/40 Thieme_Argo_2011;
    --thi-sys-typescale-heading-l-bold: 700 33px/40 Thieme_Argo_2011;
    --thi-sys-typescale-display-s-light: 300 40px/48 Thieme_Argo_2011;
    --thi-sys-typescale-display-s-medium: 500 40px/48 Thieme_Argo_2011;
    --thi-sys-typescale-display-s-bold: 700 40px/48 Thieme_Argo_2011;
    --thi-sys-typescale-display-m-light: 300 48px/56 Thieme_Argo_2011;
    --thi-sys-typescale-display-m-medium: 500 48px/56 Thieme_Argo_2011;
    --thi-sys-typescale-display-m-bold: 700 48px/56 Thieme_Argo_2011;
    --thi-sys-typescale-display-l-light: 300 57px/68 Thieme_Argo_2011;
    --thi-sys-typescale-display-l-medium: 500 57px/68 Thieme_Argo_2011;
    --thi-sys-typescale-display-l-bold: 700 57px/68 Thieme_Argo_2011;
    --thieme-argo: Thieme_Argo_2011;
    --light: Light;
    --medium: Medium;
    --bold: Bold;
    --black: Black;
    --light-italic: Light Italic;
    --medium-italic: Medium Italic;
    --bold-italic: Bold Italic;
    --black-italic: Black Italic;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --spacing-40: 160px;
    --spacing-48: 192px;
    --spacing-56: 224px;
    --spacing-64: 256px;
    --border-radius-xs: 2px;
    --asset-font-thieme-argo-2011-300-normal: Thieme_Argo_2011-Light;
    --asset-font-thieme-argo-2011-300-italic: Thieme_Argo_2011-LightItalic;
    --asset-font-thieme-argo-2011-500-normal: Thieme_Argo_2011-Medium;
    --asset-font-thieme-argo-2011-500-italic: Thieme_Argo_2011-MediumItalic;
    --asset-font-thieme-argo-2011-700-normal: Thieme_Argo_2011-Bold;
    --asset-font-thieme-argo-2011-700-italic: Thieme_Argo_2011-BoldItalic;
    --asset-font-thieme-argo-2011-900-normal: Thieme_Argo_2011-Black;
    --asset-font-thieme-argo-2011-900-italic: Thieme_Argo_2011-BlackItalic;
    --asset-font-thieme-gulliver-2011-400-normal: Thieme_Gulliver_2011-Regular;
    --asset-font-thieme-gulliver-2011-400-italic: Thieme_Gulliver_2011-RegularItalic;
    --asset-font-thieme-gulliver-2011-600-normal: Thieme_Gulliver_2011-SemiBold;
    --asset-font-thieme-gulliver-2011-600-italic: Thieme_Gulliver_2011-SemiBoldItalic;
    --asset-font-thieme-gulliver-2011-700-normal: Thieme_Gulliver_2011-Bold;
    --asset-font-thieme-gulliver-2011-700-italic: Thieme_Gulliver_2011-BoldItalic;
}

/* TODO: load from npm */
@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: normal;
    font-weight: 300;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Light.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Light.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: italic;
    font-weight: 300;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-LightItalic.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-LightItalic.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: normal;
    font-weight: 500;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Medium.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Medium.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: italic;
    font-weight: 500;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-MediumItalic.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-MediumItalic.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: normal;
    font-weight: 700;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Bold.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Bold.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: italic;
    font-weight: 700;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-BoldItalic.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-BoldItalic.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: normal;
    font-weight: 900;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Black.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-Black.woff") format("woff");
    font-display: fallback;
}

@font-face {
    font-family: "Thieme_Argo_2011";
    font-style: italic;
    font-weight: 900;
    src: url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-BlackItalic.woff2") format("woff2"),
    url("https://cdn.thieme.de/frontend-design-tokens/fonts/Thieme_Argo_2011-BlackItalic.woff") format("woff");
    font-display: fallback;
}