:root {
    --background: #fff;
    --hover-background: #eee;
    --darker-hover-background: #ddd;
    --soft-primary-text: #777;
    --primary-text: #666;
    --darker-primary-text: #555;
    --secondary-text: #444;
    --darker-secondary-text: #333;
    --black-text: #111;

    --projects-background: #f2f2f2;
    --projects-active: rgb(72, 197, 104);

    --scrollbar-thumb: #767272a6;
    --scrollbar-thumb-hover: #585858;

    --kbm-text: #999;
    --kbm-background: #fdfdfd;
    --kbm-border: #eee;
}

.dark {
    --background: #121212;
    --hover-background: #3a3a3a;
    --darker-hover-background: #292929;
    --soft-primary-text: #c5c5c5;
    --primary-text: #dadada;
    --darker-primary-text: #c9c9c9;
    --secondary-text: #ccc;
    --darker-secondary-text: #ddd;
    --black-text: #eee;

    --projects-background: #1b1b1b;
    --projects-active: rgb(72,
            197,
            104);
    /* This color can remain the same if it contrasts well with the dark background */

    --scrollbar-thumb: #5e5b5ba6;
    --scrollbar-thumb-hover: #7a7a7a;

    --kbm-text: #bbb;
    --kbm-background: #181818;
    --kbm-border: #383838;
}

.dark #hotkeypad {
    --hotkeypad-bg-kbd: #121212;
    --hotkeypad-bg-backdrop: #111;
    --hotkeypad-bg-container: #111;
    --hotkeypad-bg-item-hover: #3a3a3a;
    --hotkeypad-border-container: #292929;
    --hotkeypad-border-container-hover: #3a3a3a;
    --hotkeypad-fg-muted: #eee;
}