:root {
    --colors-white: #ffffff;
    --colors-grey-900: #212121;
    --colors-violet-500: #8739F4;
    --colors-text-default: var(--colors-grey-900);
    --colors-text-inverted: var(--colors-white);
    --colors-text-heading-default: var(--colors-grey-900);
    --colors-background-primary: var(--colors-violet-500);
    --components-button-filled-primary-background-color: var(--colors-background-primary);
    --components-button-filled-primary-color: var(--colors-text-inverted);
    --components-button-medium-gap: var(--space-2);
    --components-button-medium-padding-x: var(--space-6);
    --components-button-medium-padding-y: var(--space-4);
    --components-button-medium-height: var(--sizes-12);
    --space-section-dense: clamp(var(--space-11), 10vw, var(--space-15));
    --fonts-regular: "BARMER Beat Screen VF", sans-serif;
    --fonts-bold: "BARMER Beat Screen VF", sans-serif;
    --fonts-black: "BARMER Beat Screen VF", sans-serif;
    --font-sizes-1: 0.875rem;
    --font-sizes-2: 1rem;
    --font-sizes-3: 1.125rem;
    --font-sizes-4: 1.25rem;
    --font-sizes-8: 2rem;
    --font-sizes-12: 3.25rem;
    --font-sizes-h2: clamp(var(--font-sizes-8), 10vw, var(--font-sizes-12));
    --font-sizes-body1: clamp(var(--font-sizes-3), 3vw, var(--font-sizes-4));
    --font-sizes-body2: clamp(var(--font-sizes-1), 2vw, var(--font-sizes-2));
    --font-sizes-button1: var(--font-sizes-2);
    --radii-7: 62.4375rem;

    --line-heights-1: 1.25rem;
    --line-heights-3: 1.5rem;
    --line-heights-5: 1.75rem;
    --line-heights-6: 2rem;
    --line-heights-7: 2.375rem;
    --line-heights-11: 3.625rem;
    --line-heights-h2: clamp(var(--line-heights-7), 10vw, var(--line-heights-11));
    --line-heights-body1: clamp(var(--line-heights-5), 3vw, var(--line-heights-6));
    --line-heights-body2: clamp(var(--line-heights-1), 3vw, var(--line-heights-3));
    --line-heights-button1: var(--line-heights-3);
    --letter-spacings-0: 0;
    --sizes-4: var(--space-4);
    --sizes-11: var(--space-11);
    --sizes-12: var(--space-12);
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-11: 3rem;
    --space-12: 3.5rem;
    --space-15: 5rem;
    --space-content-top: var(--space-10);
    --space-heading-xsmall: var(--space-2);
    --space-heading-small: var(--space-4);
    --space-heading-medium: clamp(var(--space-6), 6vw, var(--space-8));
    --space-heading-large: var(--space-8);
    --space-paragraph-body1: clamp(var(--space-7), 1vw, var(--space-8));
    --space-paragraph-body2: var(--space-5);
    --space-buttons-gap: var(--space-3);
}

.text-h2-black {
    font: var(--fonts-black);
    font-weight: 900;
    font-size: var(--font-sizes-h2);
    line-height: var(--line-heights-h2);
    letter-spacing: var(--letter-spacings-0);
    color: var(--colors-text-heading-default);
}

.text-body1-regular {
    font: var(--fonts-regular);
    font-weight: 400;
    font-size: var(--font-sizes-body1);
    line-height: var(--line-heights-body1);
    margin: 0;
    color: var(--colors-text-default);
}

.text-body2-regular {
    font: var(--fonts-regular);
    font-weight: 400;
    font-size: var(--font-sizes-body2);
    line-height: var(--line-heights-body2);
    margin: 0;
    color: var(--colors-text-default);
}