:root {
    /* Miso font: nice for Headers but makes small text hard to read */
    /* --font-family-regular: 'Miso';
    --font-family-bold: 'Miso Bold';
    --font-family-light: 'Miso Light'; */
    /* Roboto: nice allrounder font from google */
    /* --font-family-regular: 'Roboto';
    --font-family-bold: 'Roboto Bold';
    --font-family-light: 'Roboto Light'; */
    /* Bootstrap font */
    --font-family-regular: var(--bs-font-sans-serif);
    --font-family-bold: var(--bs-font-sans-serif);
    --font-family-light: var(--bs-font-sans-serif);

    --body--margin-top: 5rem;

    --background-color: #eeeeee;
    --navbar-background-color: #354652;
    --navbar-text-color: #fff;
    --content-section-background-color: #ffffff;
    --main-text-color: #333333;

    --assessment-table__header--bg-color: #354652;
    --assessment-table__header--color: #ffffff;

    --assessment-table__assessment-navigator--gap: 1rem;

    /* --assessment-table__concept--width: 17rem; */
    --assessment-table__concept--width: 15rem;
    --assessment-table__concept--width-max: 15rem;

    /* dimension-1: rgb(237, 125, 49) -> hsl(24, 84%, 56%) #ed7c31 #f9d5bd #dc9941 #fcf6ee */
    --assessment-table__dimension-1--color-h: 24;
    --assessment-table__dimension-1--color-s: 84%;
    --assessment-table__dimension-1--color-l: 56%;
    /* dimension-2: rgb(112, 173, 71) -> hsl(96, 42%, 48%) #70ae47 #c2deaf #699b59 #dce9d8 */
    --assessment-table__dimension-2--color-h: 96;
    --assessment-table__dimension-2--color-s: 42%;
    --assessment-table__dimension-2--color-l: 48%;
    /* dimension-3: rgb(255, 229, 152) -> hsl(45, 100%, 80%) #f9e71f #fdf7b4 #d9e830 #fbfce8 */
    /* I changed the base color here, otherwise the color adjustments would look bad */
    --assessment-table__dimension-3--color-h: 55;
    --assessment-table__dimension-3--color-s: 95%;
    --assessment-table__dimension-3--color-l: 55%;
    /* dimension-4: rgb(47,117, 181) -> hsl(209, 59%, 45%) #2f75b6 #9ac1e5 #4064a5 #c8d4ea */
    --assessment-table__dimension-4--color-h: 209;
    --assessment-table__dimension-4--color-s: 59%;
    --assessment-table__dimension-4--color-l: 45%;
    /* sustainablility-score: */
    /* --assessment-table__sustainablitly-score--color: hsl(50, 70%, 50%); */
    --assessment-table__sustainablitly-score--color-h: 180;
    --assessment-table__sustainablitly-score--color-s: 80%;
    --assessment-table__sustainablitly-score--color-l: 40%;
    /* target-score: */
    /* --assessment-table__target-score--color: hsl(75, 70%, 50%); */
    --assessment-table__target-score--color-h: 50;
    --assessment-table__target-score--color-s: 80%;
    --assessment-table__target-score--color-l: 40%;
    /* importance-score: */
    /* --assessment-table__importance-score--color: hsl(350, 70%, 50%); */
    --assessment-table__importance-score--color-h: 350;
    --assessment-table__importance-score--color-s: 70%;
    --assessment-table__importance-score--color-l: 50%;
    /* radarcharts normalized colors:  */
    --account__radarChart-normalized--color: rgb(82, 82, 82);
    --account__radarChart-normalized--color-light: rgb(204, 204, 204);

    /* Color Adjustments */
    --assessment-table__dimension--background-lightening: 30%;
    --assessment-table__concept--hue-adjustment: 10;
    --assessment-table__concept--saturation-reduction: 15%;
    --assessment-table__concept--background-lightening: 40%;
    --assessment-table__sustainablitly-score--background-lightening: 50%;
    --assessment-table__sustainablitly-score--input-lightening: 57%;
    --assessment-table__target-score--background-lightening: 50%;
    --assessment-table__target-score--input-lightening: 54%;


    /********************************
    ***** COLOR CALCULATIONS ********
    *********************************/

    /* Reference: https://una.im/css-color-theming/ */
    /* dimension-1 */
    --assessment-table__dimension-1--color: hsl(
        var(--assessment-table__dimension-1--color-h),
        var(--assessment-table__dimension-1--color-s),
        var(--assessment-table__dimension-1--color-l)
    );
    --assessment-table__dimension-1--color-light: hsl(
        var(--assessment-table__dimension-1--color-h),
        var(--assessment-table__dimension-1--color-s),
        calc(var(--assessment-table__dimension-1--color-l) + var(--assessment-table__dimension--background-lightening))
    );
    /* dimension-2 */
    --assessment-table__dimension-2--color: hsl(
        var(--assessment-table__dimension-2--color-h),
        var(--assessment-table__dimension-2--color-s),
        var(--assessment-table__dimension-2--color-l)
    );
    --assessment-table__dimension-2--color-light: hsl(
        var(--assessment-table__dimension-2--color-h),
        var(--assessment-table__dimension-2--color-s),
        calc(var(--assessment-table__dimension-2--color-l) + var(--assessment-table__dimension--background-lightening))
    );
    /* dimension-3 */
    --assessment-table__dimension-3--color: hsl(
        var(--assessment-table__dimension-3--color-h),
        var(--assessment-table__dimension-3--color-s),
        var(--assessment-table__dimension-3--color-l)
    );
    --assessment-table__dimension-3--color-light: hsl(
        var(--assessment-table__dimension-3--color-h),
        var(--assessment-table__dimension-3--color-s),
        calc(var(--assessment-table__dimension-3--color-l) + var(--assessment-table__dimension--background-lightening))
    );
    /* dimension-4 */
    --assessment-table__dimension-4--color: hsl(
        var(--assessment-table__dimension-4--color-h),
        var(--assessment-table__dimension-4--color-s),
        var(--assessment-table__dimension-4--color-l)
    );
    --assessment-table__dimension-4--color-light: hsl(
        var(--assessment-table__dimension-4--color-h),
        var(--assessment-table__dimension-4--color-s),
        calc(var(--assessment-table__dimension-4--color-l) + var(--assessment-table__dimension--background-lightening))
    );

    /* Concepts Dim 1 */
    --assessment-table__concept-dim1--color: hsl(
        calc(var(--assessment-table__dimension-1--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-1--color-s) - var(--assessment-table__concept--saturation-reduction)),
        var(--assessment-table__dimension-1--color-l)
    );
    --assessment-table__concept-dim1--color-light: hsl(
        calc(var(--assessment-table__dimension-1--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-1--color-s) - var(--assessment-table__concept--saturation-reduction)),
        calc(var(--assessment-table__dimension-1--color-l) + var(--assessment-table__concept--background-lightening))
    );
    /* Concepts Dim 2 */
    --assessment-table__concept-dim2--color: hsl(
        calc(var(--assessment-table__dimension-2--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-2--color-s) - var(--assessment-table__concept--saturation-reduction)),
        var(--assessment-table__dimension-2--color-l)
    );
    --assessment-table__concept-dim2--color-light: hsl(
        calc(var(--assessment-table__dimension-2--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-2--color-s) - var(--assessment-table__concept--saturation-reduction)),
        calc(var(--assessment-table__dimension-2--color-l) + var(--assessment-table__concept--background-lightening))
    );
    /* Concepts Dim 3 */
    --assessment-table__concept-dim3--color: hsl(
        calc(var(--assessment-table__dimension-3--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-3--color-s) - var(--assessment-table__concept--saturation-reduction)),
        var(--assessment-table__dimension-3--color-l)
    );
    --assessment-table__concept-dim3--color-light: hsl(
        calc(var(--assessment-table__dimension-3--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-3--color-s) - var(--assessment-table__concept--saturation-reduction)),
        calc(var(--assessment-table__dimension-3--color-l) + var(--assessment-table__concept--background-lightening))
    );
    /* Concepts Dim 4 */
    --assessment-table__concept-dim4--color: hsl(
        calc(var(--assessment-table__dimension-4--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-4--color-s) - var(--assessment-table__concept--saturation-reduction)),
        var(--assessment-table__dimension-4--color-l)
    );
    --assessment-table__concept-dim4--color-light: hsl(
        calc(var(--assessment-table__dimension-4--color-h) + var(--assessment-table__concept--hue-adjustment)),
        calc(var(--assessment-table__dimension-4--color-s) - var(--assessment-table__concept--saturation-reduction)),
        calc(var(--assessment-table__dimension-4--color-l) + var(--assessment-table__concept--background-lightening))
    );
    /* Scores */
    --assessment-table__sustainablitly-score--color:  hsl(
        var(--assessment-table__sustainablitly-score--color-h),
        var(--assessment-table__sustainablitly-score--color-s),
        var(--assessment-table__sustainablitly-score--color-l)
    );
    --assessment-table__sustainablitly-score--color-light:  hsl(
        calc(var(--assessment-table__sustainablitly-score--color-h)),
        calc(var(--assessment-table__sustainablitly-score--color-s)),
        calc(var(--assessment-table__sustainablitly-score--color-l) + var(--assessment-table__sustainablitly-score--background-lightening))
    );
    --assessment-table__sustainablitly-score--color-input:  hsl(
        calc(var(--assessment-table__sustainablitly-score--color-h)),
        calc(var(--assessment-table__sustainablitly-score--color-s)),
        calc(var(--assessment-table__sustainablitly-score--color-l) + var(--assessment-table__sustainablitly-score--input-lightening))
    );
    --assessment-table__target-score--color:  hsl(
        var(--assessment-table__target-score--color-h),
        var(--assessment-table__target-score--color-s),
        var(--assessment-table__target-score--color-l)
    );
    --assessment-table__target-score--color-light:  hsl(
        calc(var(--assessment-table__target-score--color-h)),
        calc(var(--assessment-table__target-score--color-s)),
        calc(var(--assessment-table__target-score--color-l) + var(--assessment-table__target-score--background-lightening))
    );
    --assessment-table__target-score--color-input:  hsl(
        calc(var(--assessment-table__target-score--color-h)),
        calc(var(--assessment-table__target-score--color-s)),
        calc(var(--assessment-table__target-score--color-l) + var(--assessment-table__target-score--input-lightening))
    );
    --assessment-table__combined-score--color:  hsl(
        calc(var(--assessment-table__sustainablitly-score--color-h) - var(--assessment-table__target-score--color-h)),
        var(--assessment-table__sustainablitly-score--color-s),
        var(--assessment-table__sustainablitly-score--color-l)
    );
    --assessment-table__combined-score--color-light:  hsl(
        calc(var(--assessment-table__sustainablitly-score--color-h) - var(--assessment-table__target-score--color-h)),
        calc(var(--assessment-table__target-score--color-s)),
        calc(var(--assessment-table__target-score--color-l) + var(--assessment-table__target-score--background-lightening))
    );
}