/* setup color manipulation based on the preferred color scheme */
@media (prefers-color-scheme: light) {
    :root {
        --selection-light-change: 30%;

        --scrollbar-thumb-saturaction-change: 30%;
        --scrollbar-thumb-light-change: 30%;

        --link-hover-light-change: -20%;
        --link-hover-saturation-change: 40%;
        --link-visited-light-change: -10%;
        --link-visited-saturation-change: -30%;

        --h2-light-change: -10%;
        --h3-light-change: -20%;
        --h4-light-change: -30%;

        --code-saturation-change: 0%;
        --code-light-change: -34%;

        --background-color-brightness-baseline: 100%;
        --html-background-color-light-change: -5%;
        --body-background-color-light-change: -5%;

        --code-background-color-light-change: -25%;
        --code-background-color-odd-lines-light-change: -20%;

        --separator-light-change: 20%;

        --body-color: #111111;
        --filled-dot-color: #ac2b2b;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --selection-light-change: -30%;

        --scrollbar-thumb-saturaction-change: 30%;
        --scrollbar-thumb-light-change: -30%;

        --link-hover-light-change: 20%;
        --link-hover-saturation-change: 40%;
        --link-visited-light-change: 10%;
        --link-visited-saturation-change: -30%;

        --h2-light-change: 10%;
        --h3-light-change: 20%;
        --h4-light-change: 30%;

        --code-saturation-change: 50%;
        --code-light-change: 0%;

        --background-color-brightness-baseline: 0%;
        --html-background-color-light-change: 10%;
        --body-background-color-light-change: 10%;

        --code-background-color-light-change: 25%;
        --code-background-color-odd-lines-light-change: 20%;

        --separator-light-change: -20%;

        --body-color: #eeeeee;
        --filled-dot-color: #e23535;
    }
}

:root {
    /* base variables */
    --main-hue: 1;
    --main-saturation: 60%;
    --main-light: 50%;

    --complementary-hue: 120;
    --complementary-saturation: 50%;
    --complementary-light: 50%;

    --separator-saturation-change: -50%;

    --scrollbar-thumb-color: hsl(
        var(--main-hue),
        calc(var(--main-saturation) + var(--scrollbar-thumb-saturaction-change)),
        calc(var(--main-light) + var(--scrollbar-thumb-light-change))
    );
    --scrollbar-track-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        var(--main-light)
    );

    /* final colors */
    --html-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--html-background-color-light-change)
        )
    );
    --body-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--body-background-color-light-change)
        )
    );

    --code-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--code-background-color-light-change)
        )
    );
    --code-background-color-odd-lines: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--code-background-color-odd-lines-light-change)
        )
    );

    --selection-background-color: hsl(
        var(--complementary-hue),
        var(--complementary-saturation),
        calc(var(--complementary-light) + var(--selection-light-change))
    );

    --h1-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        var(--main-light)
    );
    --h2-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        calc(var(--main-light) + var(--h2-light-change))
    );
    --h3-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        calc(var(--main-light) + var(--h3-light-change))
    );
    --h4-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        calc(var(--main-light) + var(--h4-light-change))
    );

    --link-color: hsl(
        var(--main-hue),
        var(--main-saturation),
        var(--main-light)
    );

    --link-hover-color: hsl(
        var(--main-hue),
        calc(var(--main-saturation) + var(--link-hover-saturation-change)),
        calc(var(--main-light) + var(--link-hover-light-change))
    );
    --link-hover-background-color: hsl(
        0,
        0%,
        calc(var(--background-color-brightness-baseline) + var(--link-hover-light-change))
    );

    --link-visited-color: hsl(
        var(--main-hue),
        calc(
            var(--main-saturation) + var(--link-visited-saturation-change) + var(--link-hover-saturation-change)
        ),
        calc(
            var(--main-light) + var(--link-visited-light-change)
        )
    );
    --link-visited-hover-color: hsl(
        var(--main-hue),
        calc(
            var(--main-saturation) + var(--link-visited-saturation-change) + var(--link-hover-saturation-change)
        ),
        calc(
            var(--main-light) + var(--link-visited-light-change) + var(--link-hover-light-change)
        )
    );

    --link-visited-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--link-visited-light-change)
        )
    );
    --link-visited-hover-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--link-hover-light-change) + var(--link-visited-light-change)
        )
    );

    a: hsl(120, 50%, 25%);

    --code-color: hsl(
        var(--complementary-hue),
        calc(var(--complementary-saturation) + var(--code-saturation-change)),
        calc(var(--complementary-light) + var(--code-light-change))
    );

    --separator-color: hsl(
        var(--main-hue),
        calc(var(--main-saturation) + var(--separator-saturation-change)),
        calc(var(--main-light) + var(--separator-light-change))
    );

    --border-color: var(--body-color);
    --dot-color: var(--body-color);
    --input-background-color: hsl(
        0,
        0%,
        calc(
            var(--background-color-brightness-baseline) + var(--html-background-color-light-change) + var(--html-background-color-light-change)
        )
    );
}

html {
    background-color: var(--html-background-color);

    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

body {
    background: var(--body-background-color);
    color: var(--body-color);
}

::selection, ::-moz-selection {
    background: var(--selection-background-color);
}