/* Color themes */

.common-theme.light-mode {
    --fg: #222;
    --fg-hl: #48f;
    --bg: #eee;
    --border: #aaa;
    --hover: #ccc;
    --slider: #444;
    --slider-hover: #555;
    --inactive: #888;
    --active: #9df;
    --link: #36a;
    --visited: #86a;
}

.common-theme.dark-mode {
    --fg: #ddd;
    --fg-hl: #88d;
    --bg: #333;
    --border: #666;
    --hover: #555;
    --slider: #ccc;
    --slider-hover: #aaa;
    --inactive: #222;
    --active: #77c;
    --link: #5ad;
    --visited: #aad;
}

.plum-theme.light-mode {
    --fg: hsl(232, 27%, 30%);
    --fg-hl: hsl(273, 40%, 50%);
    --bg: linear-gradient(hsl(220, 50%, 65%), hsl(273, 35%, 70%));
    --border: hsl(253, 29%, 30%);
    --hover: hsl(220, 43%, 60%);
    --slider: hsl(220, 40%, 50%);
    --slider-hover: hsl(220, 40%, 40%);
    --inactive: hsl(220, 50%, 65%);
    --active: hsl(273, 29%, 65%);
    --link: hsl(220, 40%, 40%);
    --visited: hsl(270, 40%, 40%);
}

.plum-theme.dark-mode {
    --fg: hsl(232, 30%, 80%);
    --fg-hl: hsl(228, 100%, 83%);
    --bg: linear-gradient(hsl(220, 40%, 40%), hsl(273, 25%, 40%));
    --border: hsl(253, 50%, 70%);
    --hover: hsl(220, 43%, 45%);
    --slider: hsl(220, 30%, 55%);
    --slider-hover: hsl(220, 50%, 60%);
    --inactive: hsl(220, 50%, 70%);
    --active: hsl(273, 29%, 70%);
    --link: hsl(228, 100%, 75%);
    --visited: hsl(270, 100%, 75%);
}


.darcula-theme.light-mode {
    --fg: #4080aa;
    --fg-hl: #7b22c3;
    --bg: #faf8e4;
    --border: #d3cbb7;
    --hover: #ece8c6;
    --slider: hsl(240, 40%, 70%);
    --slider-hover: hsl(240, 40%, 75%);
    --inactive: #bbc4c4;
    --active: #b9e085;
    --link: #6080ff;
    --visited: #a080ff;
}

.darcula-theme.dark-mode {
    --fg: #A9B7C6;
    --fg-hl: #88d;
    --bg: #2B2B2B;
    --border: #777;
    --hover: #555;
    --slider: #444;
    --slider-hover: #666;
    --inactive: #E1A170;
    --active: #6D9CBE;
    --link: #5ad;
    --visited: #aad;
}

.mono-theme.light-mode {
    --fg: #000;
    --fg-hl: #888;
    --bg: #fff;
    --border: #888;
    --hover: #bbb;
    --slider: #111;
    --slider-hover: #333;
    --inactive: #555;
    --active: #aaa;
    --link: #666;
    --visited: #333;
}

.mono-theme.dark-mode {
    --fg: #fff;
    --fg-hl: #aaa;
    --bg: #000;
    --border: #888;
    --hover: #444;
    --slider: #eee;
    --slider-hover: #ddd;
    --inactive: #555;
    --active: #aaa;
    --link: #bbb;
    --visited: #777;
}