:root{
    --unlocked-color: rgba(231, 231, 231, 0.6);

    /**
    The color map for js is defined below
     */
    --ungrouped-color: hsl(182, 95%, 8%);
    --connecting-line-color: rgb(82, 146, 222);

    --error-color-dark: hsl(0, 81%, 50%);
    --error-color-light: hsl(0, 92%, 67%);

    --warning-color-dark: hsl(60, 100%, 50%);
    --warning-color-light: hsl(60, 100%, 46%);

    --success-color-dark: hsl(120, 100%, 63%);
    --success-color-light: hsl(120, 89%, 35%);


    --legend-a-color-dark: hsl(207, 75%, 30%);
    --legend-a-color-light: hsl(207, 75%, 40%);

    --legend-b-color-dark: hsl(254, 33%, 58%);
    --legend-b-color-light: hsl(254, 33%, 68%);

    --legend-c-color-dark: hsl(27, 71%, 53%);
    --legend-c-color-light: hsl(27, 100%, 70%);

    --legend-d-color-dark: hsl(188, 70%, 45%);
    --legend-d-color-light: hsl(188, 70%, 85%);

    --legend-e-color-dark: hsl(267, 59%, 28%);
    --legend-e-color-light: hsl(290, 77%, 61%);

    --legend-f-color-dark: hsl(309, 64%, 35%);
    --legend-f-color-light: hsl(309, 64%, 80%);

    --group-A-background-color-dark: hsl(208, 21%, 12%);
    --group-A-background-color-light: hsl(208, 21%, 90%);

    --group-B-background-color-dark: hsl(209, 44%, 14%);
    --group-B-background-color-light: hsl(209, 44%, 90%);

    --group-A-active-color-dark: hsl(213, 50%, 23%);
    --group-A-active-color-light: hsla(193, 46%, 78%, 70%);

    --group-B-active-color-dark: hsl(213, 49%, 31%);
    --group-B-active-color-light: hsla(189, 72%, 73%, 0.7);

    --group-A-inactive-color-dark: hsla(262, 61%, 42%, 0.7);
    --group-A-inactive-color-light: hsla(263, 55%, 71%, 0.7);

    --group-B-inactive-color-dark: hsla(261, 83%, 77%, 0.7);
    --group-B-inactive-color-light: hsla(253, 54%, 90%, 0.7);

    --text-on-background-color-dark: hsl(0, 0%, 100%);
    --text-on-background-color-light: hsl(0, 0%, 0%);

    --border-color-light: hsl(210, 9%, 77%);
    --border-color-dark: hsl(240, 20%, 2%);

    /**
    Setting al of the variables to their dark values
     */

    --error-color: var(--error-color-dark);
    --warning-color: var(--warning-color-dark);
    --success-color: var(--success-color-dark);
    --legend-a-color: var(--legend-a-color-dark);
    --legend-b-color: var(--legend-b-color-dark);
    --legend-c-color: var(--legend-c-color-dark);
    --legend-d-color: var(--legend-d-color-dark);
    --legend-e-color: var(--legend-e-color-dark);
    --legend-f-color: var(--legend-f-color-dark);
    --group-A-background-color: var(--group-A-background-color-dark);
    --group-A-active-color: var(--group-A-active-color-dark);
    --group-A-inactive-color: var(--group-A-inactive-color-dark);
    --group-B-background-color: var(--group-B-background-color-dark);
    --group-B-active-color: var(--group-B-active-color-dark);
    --group-B-inactive-color: var(--group-B-inactive-color-dark);
    --text-on-background-color: var(--text-on-background-color-dark);
    --border-color: var(--border-color-dark);
}

@media(prefers-color-scheme: light){
    :root{
        --error-color: var(--error-color-light);
        --warning-color: var(--warning-color-light);
        --success-color: var(--success-color-light);
        --legend-a-color: var(--legend-a-color-light);
        --legend-b-color: var(--legend-b-color-light);
        --legend-c-color: var(--legend-c-color-light);
        --legend-d-color: var(--legend-d-color-light);
        --legend-e-color: var(--legend-e-color-light);
        --legend-f-color: var(--legend-f-color-light);
        --group-A-background-color: var(--group-A-background-color-light);
        --group-A-active-color: var(--group-A-active-color-light);
        --group-A-inactive-color: var(--group-A-inactive-color-light);
        --group-B-background-color: var(--group-B-background-color-light);
        --group-B-active-color: var(--group-B-active-color-light);
        --group-B-inactive-color: var(--group-B-inactive-color-light);
        --text-on-background-color: var(--text-on-background-color-light);
        --border-color: var(--border-color-light);
    }
}