:root{
    /* Light mode: 100, Dark mode: 0 */

    --lightness-constant: 100%;

    /* Light primary color mode: 46, Dark primary color mode: 30 */
    --lightness-color-constant: 46%;

    /* Theme color parameters - TODO for modules: maybe add 3rd/4th colors complementing main color, or none at all */
    --primary-h: 5;
    --primary-s: 67%;
    --primary-l: var(--lightness-color-constant);

    --secondary-h: calc(var(--primary-h) + 180);
    --secondary-s: 67%;
    --secondary-l: var(--lightness-color-constant);

    --tertiary-h: calc(var(--primary-h) + 90);
    --tertiary-s: 67%;
    --tertiary-l: var(--lightness-color-constant);

    --quaternary-h: calc(var(--primary-h) + 270);
    --quaternary-s: 67%;
    --quaternary-l: var(--lightness-color-constant);

    --neutral-h: 0;
    --neutral-s: 0%;
}

[data-theme='light'] {
    /* Light mode: 100, Dark mode: 0 */

    --lightness-constant: 100%;

    /* Light primary color mode: 46, Dark primary color mode: 30 */
    --lightness-color-constant: 46%;

        /* Media - @todo - convert to svg for colorization */

    /* media filters */
    --inv: inherit;
    --inv-85: inherit;
    --hue-180: inherit;
    --gry-85: inherit;
    --map-polygon-blend-mode: multiply;

    /* breadcrumb */
    --breadcrumb-bg: #fffffe;

}

[data-theme='dark'] {
    /* Light mode: 100, Dark mode: 0 */

    --lightness-constant: 0%;

    /* Light primary color mode: 46, Dark primary color mode: 30 */
    --lightness-color-constant: 30%;

        /* Media - @todo - convert to svg for colorization */

    /* media filters */
    --inv: invert(100%);
    --inv-85: invert(85%);
    --hue-180: invert(85%) hue-rotate(180deg);
    --gry-85: grayscale(85%);
    --map-polygon-blend-mode: difference;

    /* breadcrumb */
    --breadcrumb-bg: #1e1e1e;
}

[data-theme='blue']{
    /* Light mode: 100, Dark mode: 0 */

    --lightness-constant: 100%;

    /* Light primary color mode: 46, Dark primary color mode: 30 */
    --lightness-color-constant: 46%;

    --primary-h: 210;
    --primary-s: 42%;
    --primary-l: var(--lightness-color-constant);

    --secondary-s: 42%;
    --tertiary-s: 42%;
    --quaternary-s: 42%;

    --neutral-h: 210;
    --neutral-s: 40%;

        /* Media - @todo - convert to svg for colorization */


    /* media filters */
    --inv: inherit;
    --inv-85: inherit;
    --hue-180: inherit;
    --gry-85: inherit;
    --map-polygon-blend-mode: multiply;

    /* breadcrumb */
    --breadcrumb-bg: #fffffe;

}

[data-theme='darkblue']{
    /* Light mode: 100, Dark mode: 0 */

    --lightness-constant: 0%;

    /* Light primary color mode: 46, Dark primary color mode: 30 */
    --lightness-color-constant: 30%;

    --primary-h: 210;
    --primary-s: 86%;
    --primary-l: var(--lightness-color-constant);

    --secondary-s: 86%;
    --tertiary-s: 86%;
    --quaternary-s: 86%;

    --neutral-h: 210;
    --neutral-s: 20%;

        /* Media - @todo - convert to svg for colorization */
   

    /* media filters */
    --inv: invert(100%);
    --inv-85: invert(85%);
    --hue-180: invert(85%) hue-rotate(180deg);
    --gry-85: grayscale(85%);
    --map-polygon-blend-mode: difference;

    /* breadcrumb */
    --breadcrumb-bg: #fffffe;
}

/* TODO: add high-contrast, colorblind, and different variations of colors as themes by setting the color parameters above */

/* Common Variables for all themes */

[data-theme='dark'], [data-theme='light'], [data-theme='blue'], [data-theme='darkblue']{

    /* Primary Colors */

    --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));

    --primary-color-10: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 90%), -1*calc(var(--lightness-constant) - 90%)));
    --primary-color-15: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 85%), -1*calc(var(--lightness-constant) - 85%)));
    --primary-color-20: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 80%), -1*calc(var(--lightness-constant) - 80%)));
    --primary-color-25: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 75%), -1*calc(var(--lightness-constant) - 75%)));
    --primary-color-30: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 70%), -1*calc(var(--lightness-constant) - 70%)));
    --primary-color-35: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 65%), -1*calc(var(--lightness-constant) - 65%)));
    --primary-color-40: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 60%), -1*calc(var(--lightness-constant) - 60%)));
    --primary-color-45: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 55%), -1*calc(var(--lightness-constant) - 55%)));
    --primary-color-50: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 50%), -1*calc(var(--lightness-constant) - 50%)));
    --primary-color-55: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 45%), -1*calc(var(--lightness-constant) - 45%)));
    --primary-color-60: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 40%), -1*calc(var(--lightness-constant) - 40%)));
    --primary-color-65: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 35%), -1*calc(var(--lightness-constant) - 35%)));
    --primary-color-70: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 30%), -1*calc(var(--lightness-constant) - 30%)));
    --primary-color-75: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 25%), -1*calc(var(--lightness-constant) - 25%)));
    --primary-color-80: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 20%), -1*calc(var(--lightness-constant) - 20%)));
    --primary-color-85: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 15%), -1*calc(var(--lightness-constant) - 15%)));
    --primary-color-90: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 10%), -1*calc(var(--lightness-constant) - 10%)));
    --primary-color-95: hsl(var(--primary-h), var(--primary-s), max(calc(var(--lightness-constant) - 5%), -1*calc(var(--lightness-constant) - 5%)));

    /* Secondary Colors - Complementary*/

    --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));

    --secondary-color-10: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 90%), -1*calc(var(--lightness-constant) - 90%)));
    --secondary-color-15: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 85%), -1*calc(var(--lightness-constant) - 85%)));
    --secondary-color-20: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 80%), -1*calc(var(--lightness-constant) - 80%)));
    --secondary-color-25: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 75%), -1*calc(var(--lightness-constant) - 75%)));
    --secondary-color-30: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 70%), -1*calc(var(--lightness-constant) - 70%)));
    --secondary-color-35: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 65%), -1*calc(var(--lightness-constant) - 65%)));
    --secondary-color-40: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 60%), -1*calc(var(--lightness-constant) - 60%)));
    --secondary-color-45: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 55%), -1*calc(var(--lightness-constant) - 55%)));
    --secondary-color-50: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 50%), -1*calc(var(--lightness-constant) - 50%)));
    --secondary-color-55: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 45%), -1*calc(var(--lightness-constant) - 45%)));
    --secondary-color-60: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 40%), -1*calc(var(--lightness-constant) - 40%)));
    --secondary-color-65: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 35%), -1*calc(var(--lightness-constant) - 35%)));
    --secondary-color-70: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 30%), -1*calc(var(--lightness-constant) - 30%)));
    --secondary-color-75: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 25%), -1*calc(var(--lightness-constant) - 25%)));
    --secondary-color-80: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 20%), -1*calc(var(--lightness-constant) - 20%)));
    --secondary-color-85: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 15%), -1*calc(var(--lightness-constant) - 15%)));
    --secondary-color-90: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 10%), -1*calc(var(--lightness-constant) - 10%)));
    --secondary-color-95: hsl(var(--secondary-h), var(--secondary-s), max(calc(var(--lightness-constant) - 5%), -1*calc(var(--lightness-constant) - 5%)));

    /* Tertiary Colors */

    --tertiary-color: hsl(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l));

    --tertiary-color-10: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 90%), -1*calc(var(--lightness-constant) - 90%)));
    --tertiary-color-15: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 85%), -1*calc(var(--lightness-constant) - 85%)));
    --tertiary-color-20: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 80%), -1*calc(var(--lightness-constant) - 80%)));
    --tertiary-color-25: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 75%), -1*calc(var(--lightness-constant) - 75%)));
    --tertiary-color-30: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 70%), -1*calc(var(--lightness-constant) - 70%)));
    --tertiary-color-35: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 65%), -1*calc(var(--lightness-constant) - 65%)));
    --tertiary-color-40: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 60%), -1*calc(var(--lightness-constant) - 60%)));
    --tertiary-color-45: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 55%), -1*calc(var(--lightness-constant) - 55%)));
    --tertiary-color-50: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 50%), -1*calc(var(--lightness-constant) - 50%)));
    --tertiary-color-55: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 45%), -1*calc(var(--lightness-constant) - 45%)));
    --tertiary-color-60: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 40%), -1*calc(var(--lightness-constant) - 40%)));
    --tertiary-color-65: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 35%), -1*calc(var(--lightness-constant) - 35%)));
    --tertiary-color-70: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 30%), -1*calc(var(--lightness-constant) - 30%)));
    --tertiary-color-75: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 25%), -1*calc(var(--lightness-constant) - 25%)));
    --tertiary-color-80: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 20%), -1*calc(var(--lightness-constant) - 20%)));
    --tertiary-color-85: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 15%), -1*calc(var(--lightness-constant) - 15%)));
    --tertiary-color-90: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 10%), -1*calc(var(--lightness-constant) - 10%)));
    --tertiary-color-95: hsl(var(--tertiary-h), var(--tertiary-s), max(calc(var(--lightness-constant) - 5%), -1*calc(var(--lightness-constant) - 5%)));

    /* Quaternary Colors */

    --quaternary-color: hsl(var(--quaternary-h), var(--quaternary-s), var(--quaternary-l));

    --quaternary-color-10: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 90%), -1*calc(var(--lightness-constant) - 90%)));
    --quaternary-color-15: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 85%), -1*calc(var(--lightness-constant) - 85%)));
    --quaternary-color-20: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 80%), -1*calc(var(--lightness-constant) - 80%)));
    --quaternary-color-25: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 75%), -1*calc(var(--lightness-constant) - 75%)));
    --quaternary-color-30: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 70%), -1*calc(var(--lightness-constant) - 70%)));
    --quaternary-color-35: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 65%), -1*calc(var(--lightness-constant) - 65%)));
    --quaternary-color-40: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 60%), -1*calc(var(--lightness-constant) - 60%)));
    --quaternary-color-45: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 55%), -1*calc(var(--lightness-constant) - 55%)));
    --quaternary-color-50: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 50%), -1*calc(var(--lightness-constant) - 50%)));
    --quaternary-color-55: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 45%), -1*calc(var(--lightness-constant) - 45%)));
    --quaternary-color-60: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 40%), -1*calc(var(--lightness-constant) - 40%)));
    --quaternary-color-65: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 35%), -1*calc(var(--lightness-constant) - 35%)));
    --quaternary-color-70: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 30%), -1*calc(var(--lightness-constant) - 30%)));
    --quaternary-color-75: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 25%), -1*calc(var(--lightness-constant) - 25%)));
    --quaternary-color-80: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 20%), -1*calc(var(--lightness-constant) - 20%)));
    --quaternary-color-85: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 15%), -1*calc(var(--lightness-constant) - 15%)));
    --quaternary-color-90: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 10%), -1*calc(var(--lightness-constant) - 10%)));
    --quaternary-color-95: hsl(var(--quaternary-h), var(--quaternary-s), max(calc(var(--lightness-constant) - 5%), -1*calc(var(--lightness-constant) - 5%)));

    /* Neutral Colors: White - Gray - Black */

    --neutral-color-bg: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 2%), -1*calc(var(--lightness-constant) - 14%)));       /* base background */
    --neutral-color-bg-2: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 7%), -1*calc(var(--lightness-constant) - 18%)));     /* inner level 1 */
    --neutral-color-bg-3: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 12%), -1*calc(var(--lightness-constant) - 22%)));    /* inner level 2 */

    --neutral-color-overlay-bg: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 2%), -1*calc(var(--lightness-constant) - 14%)), 85%);       /* base background overlay */
    --neutral-color-overlay-bg-2: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 7%), -1*calc(var(--lightness-constant) - 18%)), 85%);     /* inner level 1 overlay */
    --neutral-color-overlay-bg-3: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 12%), -1*calc(var(--lightness-constant) - 22%)), 85%);    /* inner level 2 overlay */

    --neutral-color-00: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 100%), -1*calc(var(--lightness-constant) - 94%)));
    --neutral-color-05: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 95%), -1*calc(var(--lightness-constant) - 89%)));
    --neutral-color-10: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 90%), -1*calc(var(--lightness-constant) - 85%)));
    --neutral-color-15: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 85%), -1*calc(var(--lightness-constant) - 81%)));
    --neutral-color-20: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 80%), -1*calc(var(--lightness-constant) - 77%)));
    --neutral-color-25: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 75%), -1*calc(var(--lightness-constant) - 73%)));
    --neutral-color-30: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 70%), -1*calc(var(--lightness-constant) - 68%)));
    --neutral-color-35: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 65%), -1*calc(var(--lightness-constant) - 64%)));
    --neutral-color-40: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 60%), -1*calc(var(--lightness-constant) - 59%)));
    --neutral-color-45: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 55%), -1*calc(var(--lightness-constant) - 55%)));
    --neutral-color-50: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 50%), -1*calc(var(--lightness-constant) - 50%)));
    --neutral-color-55: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 45%), -1*calc(var(--lightness-constant) - 45%)));
    --neutral-color-60: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 40%), -1*calc(var(--lightness-constant) - 40%)));
    --neutral-color-65: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 35%), -1*calc(var(--lightness-constant) - 36%)));
    --neutral-color-70: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 30%), -1*calc(var(--lightness-constant) - 32%)));
    --neutral-color-75: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 25%), -1*calc(var(--lightness-constant) - 28%)));
    --neutral-color-80: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 20%), -1*calc(var(--lightness-constant) - 24%)));
    --neutral-color-85: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 15%), -1*calc(var(--lightness-constant) - 20%)));
    --neutral-color-90: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 10%), -1*calc(var(--lightness-constant) - 16%)));
    --neutral-color-95: hsl(var(--neutral-h), var(--neutral-s), max(calc(var(--lightness-constant) - 5%), -1*calc(var(--lightness-constant) - 12%)));
    --neutral-color-100: hsl(var(--neutral-h), var(--neutral-s), var(--lightness-constant)); /* Absolute white - black */
    

    /* Constant Neutrals */

    --neutral-color-constant-white: hsl(0, 0%, max(var(--lightness-constant), -1*calc(var(--lightness-constant) - 86%)));
    --neutral-color-constant-black: hsl(0, 0%, max(0%, calc((-1*var(--lightness-constant)) - 86%)));
    --neutral-color-constant-green: hsl(123, 38%, max(var(--lightness-constant) - 57%, -1*calc(var(--lightness-constant) - 36%)));
    --neutral-color-constant-red: hsl(5, 67%, max(var(--lightness-constant) - 57%, -1*calc(var(--lightness-constant) - 36%)));
    --neutral-color-constant-yellow: hsl(50, 60%, max(var(--lightness-constant) - 57%, -1*calc(var(--lightness-constant) - 36%)));
    --neutral-color-constant-blue: hsl(200, 60%, max(var(--lightness-constant) - 57%, -1*calc(var(--lightness-constant) - 36%)));
    --neutral-color-constant-orange: hsl(36, 100%, max(var(--lightness-constant) - 65%, -1*calc(var(--lightness-constant) - 43%)));

    /* Modal */

    --modal-bg-overlay: hsl(0, 0%, 0%, 85%);

    /* Shadow - transparency */

    --shadow-soft: hsl(0, 0%, 0%, max(var(--lightness-constant) - 70%, -1*calc(var(--lightness-constant) - 50%)));
    --shadow-normal: hsl(0, 0%, 0%, max(var(--lightness-constant) - 50%, -1*calc(var(--lightness-constant) - 30%)));
    --shadow-hard: hsl(0, 0%, 0%, max(var(--lightness-constant) - 20%, -1*calc(var(--lightness-constant) - 5%)));

    /*Canvas-Charts*/
    --canvas-bar: #bbbbbb;     

}

/* Todo - Chart colors, constant colors */