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

    /** Primary color */
    --color-primary-hue: 217;
    --color-primary-saturation: 89%;
    --color-primary-lightness: 14%;
    --color-primary-contrast: #ffffff;

    /** Secondary color */
    --color-secondary-hue: 352;
    --color-secondary-saturation: 100%;
    --color-secondary-lightness: 42%;
    --color-secondary-contrast: #ffffff;

    /** Other colors */
    --color-border: #d1d5db;
    --color-area-light: #f9fafb;
    --color-area: #f3f4f6;
    --color-disabled: #e5e7eb;
    --color-disabled-contrast: #6b7280;
    --color-text: #041e42;
    --color-text-secondary: var(--color-disabled-contrast);
    --color-error: #d6001c;
    --color-error-light: #ef4444;
    --color-success: #1d6b3d;
    --color-success-light: #22c55e;
    --color-warning: #eab308;
    --color-warning-light: #facc15;
    --color-info: var(--color-secondary);
    --color-info-light: var(--color-secondary);

    /** Dynamic primary color gradients */
    --color-primary: hsl(
        var(--color-primary-hue) var(--color-primary-saturation)
            var(--color-primary-lightness)
    );
    --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-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-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);
    --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;
}