:root {
    --primary: #57BA98;
    --secondary: #379683;

    --background: #f2f7f4;
    --secondaryBackground: #ebf1ee;
    --cell: #e0edec;
    --prominentCell: #cadfdd;
    --cellSelect: #368270;
    --border: var(--secondary);
    --label: #182628;
    --secondaryLabel: var(--secondary);
    --tertiaryLabel: #496561;

    --avbryt: #f03557;
    --avbrytHover: #f35e71;


    --subBackground: linear-gradient(to bottom, var(--primary), var(--secondary));
    --tabBackground: linear-gradient(to bottom, var(--primary), var(--secondary));

    --bar: var(--primary);
    --barKnappColor: #2c7163;
    /*#368270;*/
    --barKnapp: transparent;
    --barKnappHover: rgba(230, 230, 230, 0.2);
    --barKnappSelect: rgba(255, 255, 255, 0.3);

    --skugge: rgba(0, 0, 0, 0.2);
    --svakSkugge: rgba(0, 0, 0, 0.05);

    --knapp: var(--primary);
    --knappHover: var(--secondary);
    --knappSelect: var(--cellSelect);

    /*Images*/
    --emptyTemplateImage: url(/Bilder/EmptyTemplateLight.png);
    --userImage: url(/Bilder/UserLight.png);
    --søkImage: url(/Bilder/searchLight.png);
    --icon: url(/Bilder/StolstrimmenIconWhite.png);
    --expandImage: url(/Bilder/expandLight.png);
}

@supports (color: color(display-p3 1 1 1)) {
    :root {
        --primary: color(display-p3 0.3412 0.7294 0.5961);
        --secondary: color(display-p3 0.2157 0.5882 0.5137);
        --background: color(display-p3 0.9490 0.9686 0.9569);
        --secondaryBackground: color(display-p3 0.9216 0.9451 0.9333);
        --cell: color(display-p3 0.8784 0.9294 0.9255);
        --label: color(display-p3 0.0941 0.1490 0.1569);
        --cellSelect: color(display-p3 0.2118 0.5098 0.4392);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --secondary: #356868;
        --cell: #1C1C1E;
        --prominentCell: #272d2d;
        --cellSelect: #368270;
        --background: black;
        --secondaryBackground: #0c0f0c;
        --border: rgb(60, 64, 65);
        --label: white;
        --secondaryLabel: rgb(147, 147, 147);
        --tertiaryLabel: #496561;

        --subBackground: linear-gradient(to bottom, #262b2a, #252B2B);
        --tabBackground: linear-gradient(to bottom, #1C1C1E, #252B2B);

        --barKnappColor: #57BA98;
        --barKnapp: transparent;
        --barKnappHover: rgba(70, 70, 70, 0.2);
        --barKnappSelect: rgba(100, 100, 100, 0.3);

        --knappHover: rgb(54, 78, 71);

        --skugge: rgba(20, 20, 20, 0.1);
        --svakSkugge: rgba(20, 20, 20, 0.3);
        /*Images*/
        --emptyTemplateImage: url(/Bilder/EmptyTemplateDark.png);
        --userImage: url(/Bilder/UserDark.png);
        --søkImage: url(/Bilder/searchDark.png);
        --expandImage: url(/Bilder/expandDark.png);
        /*--icon: url(/Bilder/FaviconStølstrimmenDark.jpg);*/
    }
}