body {
    --primary-color: #124559;
    --on-primary-color: #e6e6e6;
    --background-color: #ffffff;
    --on-background-color: #1e1e1e;
    --radius: 14px;

    --marge-xs: 5px;
    --marge-s: 10px;
    --marge-m: 15px;
    --marge-l: 20px;
    --marge-xl: 25px;
    --marge-xxl: 30px;

    --h-primary-color-transparent: color-mix(in srgb, var(--primary-color), transparent 20%);
    --h-text-primary-color: var(--primary-color);

    --h-background-variant: color-mix(in srgb, var(--background-color), black 5%);

    --h-transparent-on-primary: color-mix(in srgb, var(--on-primary-color), transparent 80%);
    --h-transparent-on-primary-lv2: color-mix(in srgb, var(--on-primary-color), transparent 70%);

    --h-transparent-on-background: rgba(0, 0, 0, 0.08);
    --h-transparent-on-background-lv2: rgba(0, 0, 0, 0.15);

    --h-border-color: color-mix(in srgb, var(--background-color), black 30%);

    --h-error-color: #ca3e3e;
    --h-on-error-color: #ffffff;

    --h-radius-s: calc(var(--radius) * 0.60);
    --h-radius-l: var(--radius);
}

body.dark-theme {
    --background-color: #1c1c1c;
    --on-background-color: #eaeaea;

    --h-text-primary-color: color-mix(in srgb, var(--primary-color), white 30%);

    --h-background-variant: color-mix(in srgb, var(--background-color), black 20%);

    --h-transparent-on-background: rgba(255, 255, 255, 0.04);
    --h-transparent-on-background-lv2: rgba(255, 255, 255, 0.1);

    --h-border-color: color-mix(in srgb, var(--background-color), white 25%);
}