html, [theme~='light'], [theme~='dark'] {
    --lumo-size-factor: 1;
    --lumo-size-xl: calc(3rem * var(--lumo-size-factor));
    --lumo-size-l: calc(2.5rem * var(--lumo-size-factor));
    --lumo-size-m: calc(2rem * var(--lumo-size-factor));
    --lumo-size-s: calc(1.6rem * var(--lumo-size-factor));
    --lumo-size-xs: calc(1.5rem * var(--lumo-size-factor));

    --lumo-space-factor: 1;
    --lumo-space-xl: calc(1.875rem * var(--lumo-space-factor));
    --lumo-space-l: calc(1.25rem * var(--lumo-space-factor));
    --lumo-space-m: calc(0.625rem * var(--lumo-space-factor));
    --lumo-space-s: calc(0.3125rem * var(--lumo-space-factor));
    --lumo-space-xs: calc(0.1875rem * var(--lumo-space-factor));

    --light-base-color-raw: 253, 253, 253;
    --dark-base-color-raw: 24, 33, 56;
}

[theme~='light'] {
    --lumo-base-color: rgb(var(--light-base-color-raw));
    --lumo-base-color-80pct: rgba(var(--light-base-color-raw), 0.8);

    --lumo-primary-color: rgb(0, 125, 184);
    --lumo-primary-color-50pct: rgba(0, 125, 184, 0.5);
    --lumo-primary-color-10pct: rgba(0, 125, 184, 0.1);
    --lumo-primary-color-5pct: rgba(0, 125, 184, 0.07);

    --lumo-primary-text-color: rgb(0, 125, 184);
}

[theme~='dark'] {
    --lumo-base-color: rgb(var(--dark-base-color-raw));
    --lumo-base-color-80pct: rgba(var(--dark-base-color-raw), 0.8);

    --lumo-primary-color: rgb(6, 123, 178);
    --lumo-primary-color-50pct: rgba(6, 123, 178, 0.5);
    --lumo-primary-color-10pct: rgba(6, 123, 178, 0.1);
    --lumo-primary-color-5pct: rgba(6, 123, 178, 0.07);

    --lumo-primary-text-color: rgb(71, 187, 240);
    --lumo-body-text-color: hsla(214, 100%, 97%, 0.9);
}