html {
    --opacity_1 : .1;
    --opacity_2 : .25;
    --opacity_3 : .4;
    --opacity_4 : .55;
    --opacity_5 : .7;
    --opacity_6 : .85;
    --opacity_7 : .95;

    --hue_back                  : 0;
    --saturation_back           : 0;
    --lightness_back            : 25;

    --hue_complementary         : 180;
    --saturation_complementary  : 0;
    --lightness_complementary   : 40;

    --hue_light                  : 0;
    --saturation_light           : 0;
    --lightness_light            : 95;

    --hue_dark                  : 180;
    --saturation_dark           : 0;
    --lightness_dark            : 5;

    --saturation_back_darken            : calc(var(--saturation_back) -  0);
    --lightness_back_darken             : calc(var(--lightness_dark)  + 25);
    --saturation_back_darkest           : calc(var(--saturation_back) +  0);
    --lightness_back_darkest            : calc(var(--lightness_dark)  + 15);

    --saturation_back_lighten           : calc(var(--saturation_back) +  0);
    --lightness_back_lighten            : calc(var(--lightness_back)  + 10);
    --saturation_back_lightest          : calc(var(--saturation_back) +  0);
    --lightness_back_lightest           : calc(var(--lightness_light) - 20);

    --saturation_complementary_darken   : calc(var(--saturation_back) -  0);
    --lightness_complementary_darken    : calc(var(--lightness_dark)  + 25);
    --saturation_complementary_darkest  : calc(var(--saturation_back) +  0);
    --lightness_complementary_darkest   : calc(var(--lightness_dark)  + 15);

    --saturation_complementary_lighten  : calc(var(--saturation_back) +  0);
    --lightness_complementary_lighten   : calc(var(--lightness_back)  + 10);
    --saturation_complementary_lightest : calc(var(--saturation_back) +  0);
    --lightness_complementary_lightest  : calc(var(--lightness_light) - 20);

    --color_back : hsl(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%)
    );
    --color_complementary : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%)
    );
    --color_light : hsl(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%)
    );
    --color_dark : hsl(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%)
    );
    --color_back_darken : hsl(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%)
    );
    --color_back_darkest : hsl(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%)
    );
    --color_back_lighten : hsl(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%)
    );
    --color_back_lightest : hsl(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%)
    );
    --color_complementary_darken : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darken) * 1%),
        calc(var(--lightness_complementary_darken) * 1%)
    );
    --color_complementary_darkest : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%)
    );
    --color_complementary_lighten : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%)
    );
    --color_complementary_lightest : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%)
    );


    --color_back_transparent_1 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_1)
    );
    --color_back_transparent_2 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_2)
    );
    --color_back_transparent_3 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_3)
    );
    --color_back_transparent_4 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_4)
    );
    --color_back_transparent_5 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_5)
    );
    --color_back_transparent_6 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_6)
    );
    --color_back_transparent_7 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back) * 1%),
        calc(var(--lightness_back) * 1%),
        var(--opacity_7)
    );


    --color_complementary_transparent_1 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_1)
    );
    --color_complementary_transparent_2 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_2)
    );
    --color_complementary_transparent_3 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_3)
    );
    --color_complementary_transparent_4 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_4)
    );
    --color_complementary_transparent_5 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_5)
    );
    --color_complementary_transparent_6 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_6)
    );
    --color_complementary_transparent_7 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary) * 1%),
        calc(var(--lightness_complementary) * 1%),
        var(--opacity_7)
    );


    --color_light_transparent_1 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_1)
    );
    --color_light_transparent_2 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_2)
    );
    --color_light_transparent_3 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_3)
    );
    --color_light_transparent_4 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_4)
    );
    --color_light_transparent_5 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_5)
    );
    --color_light_transparent_6 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_6)
    );
    --color_light_transparent_7 : hsla(
        calc(var(--hue_light) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc(var(--lightness_light) * 1%),
        var(--opacity_7)
    );


    --color_dark_transparent_1 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_1)
    );
    --color_dark_transparent_2 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_2)
    );
    --color_dark_transparent_3 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_3)
    );
    --color_dark_transparent_4 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_4)
    );
    --color_dark_transparent_5 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_5)
    );
    --color_dark_transparent_6 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_6)
    );
    --color_dark_transparent_7 : hsla(
        calc(var(--hue_dark) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc(var(--lightness_dark) * 1%),
        var(--opacity_7)
    );


    --color_back_darken_transparent_1 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_1)
    );
    --color_back_darken_transparent_2 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_2)
    );
    --color_back_darken_transparent_3 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_3)
    );
    --color_back_darken_transparent_4 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_4)
    );
    --color_back_darken_transparent_5 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_5)
    );
    --color_back_darken_transparent_6 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_6)
    );
    --color_back_darken_transparent_7 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darken) * 1%),
        calc(var(--lightness_back_darken) * 1%),
        var(--opacity_7)
    );


    --color_back_darkest_transparent_1 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_1)
    );
    --color_back_darkest_transparent_2 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_2)
    );
    --color_back_darkest_transparent_3 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_3)
    );
    --color_back_darkest_transparent_4 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_4)
    );
    --color_back_darkest_transparent_5 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_5)
    );
    --color_back_darkest_transparent_6 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_6)
    );
    --color_back_darkest_transparent_7 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_darkest) * 1%),
        calc(var(--lightness_back_darkest) * 1%),
        var(--opacity_7)
    );


    --color_back_lighten_transparent_1 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_1)
    );
    --color_back_lighten_transparent_2 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_2)
    );
    --color_back_lighten_transparent_3 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_3)
    );
    --color_back_lighten_transparent_4 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_4)
    );
    --color_back_lighten_transparent_5 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_5)
    );
    --color_back_lighten_transparent_6 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_6)
    );
    --color_back_lighten_transparent_7 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lighten) * 1%),
        calc(var(--lightness_back_lighten) * 1%),
        var(--opacity_7)
    );


    --color_back_lightest_transparent_1 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_1)
    );
    --color_back_lightest_transparent_2 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_2)
    );
    --color_back_lightest_transparent_3 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_3)
    );
    --color_back_lightest_transparent_4 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_4)
    );
    --color_back_lightest_transparent_5 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_5)
    );
    --color_back_lightest_transparent_6 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_6)
    );
    --color_back_lightest_transparent_7 : hsla(
        calc(var(--hue_back) * 1deg),
        calc(var(--saturation_back_lightest) * 1%),
        calc(var(--lightness_back_lightest) * 1%),
        var(--opacity_7)
    );


    --color_complementary_darkest_transparent_1 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_1)
    );
    --color_complementary_darkest_transparent_2 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_2)
    );
    --color_complementary_darkest_transparent_3 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_3)
    );
    --color_complementary_darkest_transparent_4 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_4)
    );
    --color_complementary_darkest_transparent_5 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_5)
    );
    --color_complementary_darkest_transparent_6 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_6)
    );
    --color_complementary_darkest_transparent_7 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_darkest) * 1%),
        calc(var(--lightness_complementary_darkest) * 1%),
        var(--opacity_7)
    );


    --color_complementary_lighten_transparent_1 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_1)
    );
    --color_complementary_lighten_transparent_2 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_2)
    );
    --color_complementary_lighten_transparent_3 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_3)
    );
    --color_complementary_lighten_transparent_4 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_4)
    );
    --color_complementary_lighten_transparent_5 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_5)
    );
    --color_complementary_lighten_transparent_6 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_6)
    );
    --color_complementary_lighten_transparent_7 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lighten) * 1%),
        calc(var(--lightness_complementary_lighten) * 1%),
        var(--opacity_7)
    );


    --color_complementary_lightest_transparent_1 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_1)
    );
    --color_complementary_lightest_transparent_2 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_2)
    );
    --color_complementary_lightest_transparent_3 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_3)
    );
    --color_complementary_lightest_transparent_4 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_4)
    );
    --color_complementary_lightest_transparent_5 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_5)
    );
    --color_complementary_lightest_transparent_6 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_6)
    );
    --color_complementary_lightest_transparent_7 : hsla(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_complementary_lightest) * 1%),
        calc(var(--lightness_complementary_lightest) * 1%),
        var(--opacity_7)
    );


    --color_text               : var(--color_light);
    --color_text_complementary : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_light) * 1%),
        calc((var(--lightness_light) - 15) * 1%)
    );
    --color_text_small : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc((var(--saturation_light) - 30) * 1%),
        calc((var(--lightness_light) - 15) * 1%)
    );
    --color_text_alt   : hsl(
        calc(var(--hue_back) * 1deg),
        calc((var(--saturation_light) - 15) * 1%),
        calc((var(--lightness_light) - 10) * 1%)
    );

    --color_text_error : hsl(
        0,
        calc((var(--saturation_light) + 15) * 1%),
        calc((var(--lightness_dark) + 15) * 1%)
    );
}

html.Mode-light {
    --color_text               : var(--color_dark);
    --color_text_complementary : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc(var(--saturation_dark) * 1%),
        calc((var(--lightness_dark) + 15) * 1%)
    );
    --color_text_small : hsl(
        calc(var(--hue_complementary) * 1deg),
        calc((var(--saturation_dark) - 30) * 1%),
        calc((var(--lightness_dark) + 15) * 1%)
    );
    --color_text_alt   : hsl(
        calc(var(--hue_back) * 1deg),
        calc((var(--saturation_dark) - 30) * 1%),
        calc((var(--lightness_dark) + 10) * 1%)
    );
}