:root {
    /** Typography */
    --font-display: 'Custom';
    --font-default: 'Arial';

    /** Primary color */
    --color-primary-hue: 108;
    --color-primary-saturation: 48%;
    --color-primary-lightness: 47%;
    --color-primary-contrast: #fff;

    /** Secondary color */
    --color-secondary-hue: 216;
    --color-secondary-saturation: 60%;
    --color-secondary-lightness: 21%;
    --color-secondary-contrast: #fff;

    /** Other colors */
    --color-border: #e2e8f0;
    --color-area-light: #fafafa;
    --color-area: #f5f5f5;
    --color-disabled: #eee;
    --color-disabled-contrast: #808080;
    --color-text: #333333;
    --color-text-secondary: var(--color-disabled-contrast);
    --color-error: #980a23;
    --color-error-light: #d80767;
    --color-success: #55b03e;
    --color-success-light: #65c55b;
    --color-warning: #faad14;

    /** Dynamic primary color gradients */
    --color-primary: hsl(
        var(--color-primary-hue) var(--color-primary-saturation)
            var(--color-primary-lightness)
    );
    --color-primary-600: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 30%
    );
    --color-primary-400: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 50%
    );
    --color-primary-300: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 60%
    );
    --color-primary-200: hsl(108 48% 47%
    );
    --color-primary-100: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 85%
    );
    --color-primary-50: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 95%
    );
    --color-primary-hover: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 40%
    );
    --color-primary-contrast-hover: var(--color-primary-contrast);

    /** Dynamic secondary color gradients */
    --color-secondary: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation)
            var(--color-secondary-lightness)
    );
    --color-secondary-600: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 30%
    );
    --color-secondary-400: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 50%
    );
    --color-secondary-300: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 60%
    );
    --color-secondary-200: hsl(108 48% 47%
    );
    --color-secondary-100: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 85%
    );
    --color-secondary-50: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 95%
    );
    --color-secondary-hover: var(--color-secondary);
    --color-secondary-contrast-hover: var(--color-secondary-contrast);
}

@font-face {
    font-family: Custom;
    src: url('https://api.thgquotenservice.de/assets/font.regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Custom;
    src: url('https://api.thgquotenservice.de/assets/font.medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: Custom;
    src: url('https://api.thgquotenservice.de/assets/font.semi-bold.ttf');
    font-weight: 600;
}

:root {
    --color-warning-light: var(--color-warning);
    --color-info: var(--color-secondary);
    --color-info-light: var(--color-secondary);

    --color-primary-dark: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 30%
    );
    --color-primary-light: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 70%
    );
    --color-primary-lighter: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 85%
    );
    --color-primary-soft: hsl(
        var(--color-primary-hue) var(--color-primary-saturation) 95%
    );

    --color-secondary-dark: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 30%
    );
    --color-secondary-light: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 70%
    );
    --color-secondary-lighter: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 85%
    );
    --color-secondary-soft: hsl(
        var(--color-secondary-hue) var(--color-secondary-saturation) 95%
    );

    --color-secondary-hover: var(--color-secondary-dark);
}