:root {
    --text-color: #111111;
    --text-color-lighter: #111111;
    --text-color-darker: #111111;
    --unavailable-text-color: #777777;
    --standalone-green-text: green;
    
    --background-color: white;
    --board-bg: #edeced;     /* color of the slots */
    --board-bg-vslot: white; /* color of the vslots */
    
    --button-active-color: #fff;
    --button-inactive-color: #eee;
    --button-border-color: #b9b9b9;
    --button-border-color-inactive: lightgray;
    --shadow-color: rgba(0,0,0,0.3);
    --inactive-tab-color: #f9f9f9;
    --active-tab-color: black;

    --slot-border-color: #b9b9b9;
    --slot-highlighted-border-color: black;
    
    --wordcels-dark-green: #55dd55; /* the vertical column is solved color */
    --wordcels-light-green-1: #68fc70; /* for use on the vslots */
    --wordcels-light-green-2: #b6f4ac; /* for use on the other slots */    
    --wordcels-yellow-1: #ffe57f; /* for use the vslots */
    --wordcels-yellow-2: #ead069; /* for use the vslots */

    --wordcels-red: #dd0000;
    --wordcels-blue: #0088ee;
    --instruction-arrow-color: #0088ee; /* same as above here */
}

.dark-mode {
    --text-color: #888;
    --text-color-lighter: #bbb;
    --text-color-darker: #333;
    --unavailable-text-color: #333333;
    --standalone-green-text: green;

    --background-color: #000;
    --board-bg: #444;
    --board-bg-vslot: #000;

    --button-active-color: #999;
    --button-inactive-color: #333;
    --button-border-color: #777;
    --button-border-color-inactive: #444;
    --shadow-color: rgba(200,200,200,0.7);
    --inactive-tab-color: #333;
    --active-tab-color: #aaa;


    --slot-border-color: #606060;
    --slot-highlighted-border-color: #a0a0a0;

    --wordcels-dark-green: #007000;
    --wordcels-light-green-1: #00a000;
    --wordcels-light-green-2: #008000;
    --wordcels-yellow-1: #e6c95f;
    --wordcels-yellow-2: #bfa84a;
    --wordcels-red: #b22222;
    --wordcels-blue: #0088ee;
    --instruction-arrow-color: #0088ee;
}