:root {
    --spacing-0: 0;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-40: 2.5rem;
    --spacing-44: 2.75rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-100: 6.25rem;

    --field-grid-label-width-xs: 9.375rem;
    --field-grid-label-width-sm: 11.25rem;
    --field-grid-label-width-md: 15.625rem;
    --field-grid-label-width-lg: 18.75rem;
    --field-grid-label-width-xl: 21.875rem;

    --color-text-primary: #1D1E1F;
    --color-text-secondary: #4C4F52;
    --color-text-tertiary: #686C72;

    --color-surface-button-primary: #0059A2;
    --color-surface-button-primary-hover: #003d66;
    --color-surface-button-primary-focus: #0059A2;
    --color-surface-button-primary-pressed: #0A91ED;
    --color-surface-button-primary-disabled: #0059A2;

    --color-surface-button-secondary: #F8F6F4;
    --color-surface-button-secondary-hover: #EFEBE5;
    --color-surface-button-secondary-focus: #F8F6F4;
    --color-surface-button-secondary-pressed: #DED6CA;
    --color-surface-button-secondary-disabled: #F8F6F4;

    --color-surface-button-secondary-border: #ADB1B3;
    --color-surface-button-secondary-hover-border: #7F8489;
    --color-surface-button-secondary-focus-border: #686C72;
    --color-surface-button-secondary-pressed-border: #ADB1B3;
    --color-surface-button-secondary-disabled-border: #ADB1B3;


    --color-surface-button-tertiary: transparent;
    --color-surface-button-tertiary-hover: #EFEBE5;
    --color-surface-button-tertiary-focus: transparent;
    --color-surface-button-tertiary-pressed: #DED6CA;
    --color-surface-button-tertiary-disabled: transparent;

    --color-surface-body: #fff;
    --color-surface-accent-accent-1: #EFEBE5;
    --color-surface-accent-accent-2: #E1F9F2;
    --color-surface-accent-accent-3: #EFFFC8;
    --color-surface-accent-accent-4: #E7F3FF;
    --color-surface-accent-accent-5: #F1EFFD;
    --color-surface-feedback-error: #FFE9E9;

    --color-surface-surface-tertiary: #F5F6F6;

    --color-feedback-error: #FC4E51;

    --color-border-primary: #ADB1B3;
    --color-border-secondary: #CED0D3;
    --color-border-tertiary: #E7E7E7;

    --color-toggle-primary: #0071CB;
    --color-toggle-hover: #CED0D3;

    --color-table-hover-row: #E7F3FF;

    --font-family:  'Graphik', Arial, Helvetica, sans-serif;
    --font-family-special-headline:  'Publico Headline';
    --font-family-icons:  'Font Awesome 7 Pro';

    --font-size-component-md: 14px;
    --font-size-component-xs: 12px;
    --font-size-component-xxs: 10px;
    --font-size-title-sm: 16px;
    --font-size-title-md: 20px;
    --font-size-title-lg: 24px;

    --font-size-special-headline-lg: 24px;
    --font-size-special-headline-xl: 32px;
    --font-size-special-headline-2xl: 40px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    --font-line-height-component-md-plus: 20px;
    --font-line-height-title-md: 1.2;
    --font-line-height-title-lg: 1.33;
    --font-line-height-special-headline-2xl: 1.2;
}