/* See https://community.wanikani.com/t/userstyle-wanikani-elementary-dark/60137 */

@-moz-document domain("wanikani.com") {
  /*
   * Rex's color scheme. 
   * -------------------
   *
   * While this is intended as a showcase for how to override your own colors,
   * it's also a _working_ theme (just like the lovely default WKElementaryDark
   * colors that @Sepitus-exe designed). 
   *
   * I really use this every day with WaniKani, and find it a significant
   * improvement over the default WK theme. Try it yourself and see what you
   * think. Consistently coloring related things ("semantic colors")
   * subconsciously makes the user experience even better.
   *
   * It uses 20 unique colors (sort of a "royal" gold and blue theme) from a 
   * palette of 228 from the open-props project (see https://open-props.style 
   * for details).
   *
   * I wanted to ensure review pages in particular achieve the goals described
   * below as much as possible. We spend a significant portion of our lives
   * looking at WK review pages. Anything we can do to make that experience more
   * pleasant and easy-to-understand is worthwhile.
   * 
   * The WaniKani UI communicates a surprising amount of information, even on the
   * "simple" review and lesson pages. It's normal for dashboards to be complex
   * and information dense, but the "simple" layout of the review and lesson pages
   * provide their own challenges -- they communicate an awful lot with color!
   *
   * DESIGN IDEAS
   * ------------
   *
   * This section describes my thinking as I created this color scheme. You may
   * wish to use some or all of these ideas in your own schemes.
   * 
   * My main goal was a consistent coloring scheme based on _semantics_. Things
   * that mean or even imply "kanji" should always be colored the same. Things
   * that mean "progress" should have a different color from "kanji", but should
   * also all be colored the same.
   *
   * I wanted dark colors with light text (after switching to dark themes, I'll
   * never go back).
   * 
   * I also strove for reasonably harmonious colors (keeping in mind that
   * I have the graphic design sensibilities of a drunken gorilla). Using the
   * open-props palette helped with this considerably, but there are probably
   * too many unrelated colors in this scheme (otoh, there is a **LOT** to
   * communicate in the WK UI).
   * 
   * It had to have readable text with decent contrast ratios everywhere (harder
   * than it sounds).
   *
   * I wanted to subtly emphasize the _review_ button over the lesson button on
   * the dashboard. I believe some new users are led to believe they must continue
   * to do all lessons as soon as they are available. This caused some users to
   * get themselves into trouble.
   *
   * I chose the gold "brand" color because it stands out well (I like gold on
   * dark backgrounds).
   *
   * I wanted a sharp distinction between: 
   *
   *   - Colors indicating progress through SRS stages (I used tints/shades of the
   *     brand color for everything except "apprentice").
   *
   *   - Colors representing item _types_ (radical, kanji, or vocabulary). I used
   *     cooler (blueish) colors for these to contrast with the progress/SRS/brand
   *     colors.
   *
   * I also wanted a significant color difference between apprentice stages and
   * all subsequent stages. There are three SRS stage transitions that matter
   * most:
   *
   * 0 -> 1: Completing a lesson moves an item to Apprentice stage. The apprentice
   *         color indicates things are just starting (it's an intentionally
   *         reserved color).
   *
   * 4 -> 5: This indicates you've "guru'd" an item. You must guru 90% of the
   *         kanji on a level to progress to the next one). The guru color is thus
   *         significantly more bold/saturated than the apprentice color
   *         (indicating you've "learned" but not yet mastered an item).
   *
   * 8 -> 9: This indicates you've burned an item, proving you know it well. The
   *         burned color is thus a "happy", intense color that really stands out.
   *
   * Since progressing between levels literally means moving stuff from apprentice
   * stages to guru, I made the "progress" color the same as the guru color.
   * 
   * Completing a lesson puts it into the "apprentice" stage, so I made the lesson
   * color and the "apprentice" color the same.
   * 
   * Similarly, we are mostly reviewing _kanji_ during our reviews (including the
   * kanji in vocabulary items), so I made the review color and the kanji color
   * the same.
   * 
   * I wanted a very clear distinction between item types (R/K/V). (This is
   * particularly important during reviews.)
   * 
   * The SRS stage colors (apprentice, guru, master, enlightened, burned) should
   * imply a clear progression. It always struck me as weird that the WK default
   * A/G/M/E/B colors seemed unrelated. During reviews, this pgrogression of
   * colors subtly informs you whether an item is moving to higher or lower stages
   * (burns are particularly visible and a "desirable" color).
   * 
   * I also wanted to make it as obvious as possible during reviews whether you're
   * being quizzed on meanings or readings. With the default WK white/black
   * background and inverted text, I was somewhere around level 17 before I even
   * noticed the color change!
   * 
   * Since my mind tends to want to provide _readings_ first when I see kanji, I
   * made the reading color a normal surface color, and the meaning color an "in
   * your face," hard to ignore, bright pink. I want to _notice_ when I'm being
   * quizzed on meanings!
   * 
   * (I think it's a good sign if your mind wants to provide readings by default,
   * by the way: it indicates you are "thinking in Japanese" rather than in
   * English.)
   * 
   * Finally, normal semantics still mandate some shade of red/green colors after
   * incorrect/correct answers. I chose shades that are obvious, but at least
   * somewhat harmonious.
   * 
   * The single most difficult constraint was ensuring that text-clr, grayed-text,
   * and highlight-text colors all worked well over almost **everything**. 
   * 
   * Those three text colors must work well over:
   * 
   * - all surface colors (except inverted-surface), - all A/G/M/E/B stage colors,
   * - all R/K/V item type colors, - correct/incorrect/alert/success colors - the
   * lessons and reviews colors - the reading and meanings colors
   * 
   */

  :root {
    /* Unique colors */

    /*
     * Surfaces
     */
    --USER-surface-1: hsl(var(--gray-11-hsl));
    --USER-surface-2: hsl(var(--gray-10-hsl));
    --USER-surface-3: hsl(var(--gray-9-hsl));
    --USER-surface-4: hsl(var(--gray-8-hsl));
    --USER-surface-inv: hsl(var(--gray-4-hsl));

    /*
     * Text
     */
    --USER-text: hsl(var(--gray-3-hsl));
    --USER-text-inv: hsl(var(--gray-12-hsl));
    --USER-text-grayed: hsl(var(--sand-5-hsl));
    --USER-text-hl: hsl(var(--USER-enlightened));

    /*
     * Brand, etc.
     */
    --USER-brand: var(--USER-enlightened);
    --USER-progress: var(--USER-guru);
    --USER-success: hsl(var(--green-9-hsl));
    --USER-alert: hsl(var(--red-9-hsl));

    /*
     * Item types
     */
    --USER-radical: hsl(var(--purple-11-hsl));
    --USER-kanji: hsl(var(--violet-11-hsl));
    --USER-vocab: hsl(var(--cyan-11-hsl));

    /*
     * SRS stages
     */
    --USER-apprentice: hsl(var(--sand-7-hsl));
    --USER-guru: hsl(var(--yellow-11-hsl));
    --USER-master: hsl(var(--yellow-10-hsl));
    --USER-enlightened: hsl(var(--yellow-8-hsl));
    --USER-burned: hsl(var(--yellow-7-hsl));

    /*
     * Review/lesson related
     */
    --USER-lesson: var(--USER-apprentice);
    --USER-review: var(--USER-kanji);
    --USER-meaning: hsl(var(--pink-8-hsl));
    --USER-reading: var(--USER-surface-2);
    --USER-correct: var(--USER-success);
    --USER-incorrect: var(--USER-alert);

    /*******************************************************
     * End of USER variables
     *******************************************************


    /* Palette colors -- stolen from open props! */

    --gray-0-hsl: 210 17% 98%;
    --gray-1-hsl: 210 17% 95%;
    --gray-2-hsl: 210 16% 93%;
    --gray-3-hsl: 210 14% 89%;
    --gray-4-hsl: 210 14% 83%;
    --gray-5-hsl: 210 11% 71%;
    --gray-6-hsl: 210 7% 56%;
    --gray-7-hsl: 210 9% 31%;
    --gray-8-hsl: 210 10% 23%;
    --gray-9-hsl: 210 11% 15%;
    --gray-10-hsl: 214 14% 10%;
    --gray-11-hsl: 216 16% 6%;
    --gray-12-hsl: 210 40% 2%;
    --stone-0-hsl: 200 27% 98%;
    --stone-1-hsl: 210 18% 96%;
    --stone-2-hsl: 210 11% 93%;
    --stone-3-hsl: 192 9% 89%;
    --stone-4-hsl: 197 8% 83%;
    --stone-5-hsl: 202 5% 71%;
    --stone-6-hsl: 200 3% 60%;
    --stone-7-hsl: 180 2% 50%;
    --stone-8-hsl: 160 1% 41%;
    --stone-9-hsl: 90 1% 31%;
    --stone-10-hsl: 60 3% 22%;
    --stone-11-hsl: 60 6% 14%;
    --stone-12-hsl: 60 6% 7%;
    --red-0-hsl: 0 100% 98%;
    --red-1-hsl: 0 100% 95%;
    --red-2-hsl: 0 100% 89%;
    --red-3-hsl: 0 100% 83%;
    --red-4-hsl: 0 100% 76%;
    --red-5-hsl: 0 100% 71%;
    --red-6-hsl: 0 94% 65%;
    --red-7-hsl: 0 86% 59%;
    --red-8-hsl: 0 74% 54%;
    --red-9-hsl: 0 65% 48%;
    --red-10-hsl: 0 65% 42%;
    --red-11-hsl: 0 65% 36%;
    --red-12-hsl: 0 66% 30%;
    --pink-0-hsl: 336 100% 97%;
    --pink-1-hsl: 336 100% 94%;
    --pink-2-hsl: 338 91% 87%;
    --pink-3-hsl: 339 90% 81%;
    --pink-4-hsl: 339 88% 74%;
    --pink-5-hsl: 339 82% 67%;
    --pink-6-hsl: 339 76% 59%;
    --pink-7-hsl: 339 67% 52%;
    --pink-8-hsl: 339 68% 45%;
    --pink-9-hsl: 339 69% 38%;
    --pink-10-hsl: 339 70% 32%;
    --pink-11-hsl: 339 69% 27%;
    --pink-12-hsl: 339 70% 21%;
    --purple-0-hsl: 280 67% 96%;
    --purple-1-hsl: 287 77% 92%;
    --purple-2-hsl: 288 86% 86%;
    --purple-3-hsl: 289 85% 78%;
    --purple-4-hsl: 288 83% 71%;
    --purple-5-hsl: 288 75% 64%;
    --purple-6-hsl: 288 67% 58%;
    --purple-7-hsl: 288 56% 52%;
    --purple-8-hsl: 288 54% 46%;
    --purple-9-hsl: 288 54% 40%;
    --purple-10-hsl: 288 55% 33%;
    --purple-11-hsl: 288 56% 26%;
    --purple-12-hsl: 288 55% 20%;
    --violet-0-hsl: 252 100% 97%;
    --violet-1-hsl: 257 100% 93%;
    --violet-2-hsl: 256 100% 87%;
    --violet-3-hsl: 255 94% 79%;
    --violet-4-hsl: 255 93% 72%;
    --violet-5-hsl: 255 91% 67%;
    --violet-6-hsl: 255 86% 63%;
    --violet-7-hsl: 255 78% 60%;
    --violet-8-hsl: 255 67% 55%;
    --violet-9-hsl: 255 53% 50%;
    --violet-10-hsl: 255 53% 44%;
    --violet-11-hsl: 255 53% 37%;
    --violet-12-hsl: 255 53% 31%;
    --indigo-0-hsl: 223 100% 96%;
    --indigo-1-hsl: 225 100% 93%;
    --indigo-2-hsl: 228 100% 86%;
    --indigo-3-hsl: 228 100% 78%;
    --indigo-4-hsl: 228 96% 72%;
    --indigo-5-hsl: 228 94% 67%;
    --indigo-6-hsl: 228 89% 63%;
    --indigo-7-hsl: 228 81% 59%;
    --indigo-8-hsl: 228 69% 55%;
    --indigo-9-hsl: 230 57% 50%;
    --indigo-10-hsl: 230 57% 43%;
    --indigo-11-hsl: 230 57% 37%;
    --indigo-12-hsl: 230 57% 30%;
    --blue-0-hsl: 205 100% 95%;
    --blue-1-hsl: 206 100% 91%;
    --blue-2-hsl: 206 100% 82%;
    --blue-3-hsl: 206 96% 72%;
    --blue-4-hsl: 207 91% 64%;
    --blue-5-hsl: 207 86% 57%;
    --blue-6-hsl: 208 80% 52%;
    --blue-7-hsl: 208 77% 47%;
    --blue-8-hsl: 209 77% 43%;
    --blue-9-hsl: 209 75% 38%;
    --blue-10-hsl: 209 76% 32%;
    --blue-11-hsl: 209 75% 27%;
    --blue-12-hsl: 209 76% 21%;
    --cyan-0-hsl: 185 81% 94%;
    --cyan-1-hsl: 185 84% 88%;
    --cyan-2-hsl: 186 77% 77%;
    --cyan-3-hsl: 187 74% 65%;
    --cyan-4-hsl: 187 69% 55%;
    --cyan-5-hsl: 188 72% 47%;
    --cyan-6-hsl: 187 80% 42%;
    --cyan-7-hsl: 188 83% 37%;
    --cyan-8-hsl: 189 85% 32%;
    --cyan-9-hsl: 189 85% 28%;
    --cyan-10-hsl: 189 84% 23%;
    --cyan-11-hsl: 190 84% 17%;
    --cyan-12-hsl: 189 84% 12%;
    --teal-0-hsl: 161 79% 95%;
    --teal-1-hsl: 160 85% 87%;
    --teal-2-hsl: 162 78% 77%;
    --teal-3-hsl: 162 72% 65%;
    --teal-4-hsl: 162 68% 54%;
    --teal-5-hsl: 162 73% 46%;
    --teal-6-hsl: 162 82% 40%;
    --teal-7-hsl: 162 87% 35%;
    --teal-8-hsl: 162 88% 30%;
    --teal-9-hsl: 162 88% 26%;
    --teal-10-hsl: 162 89% 21%;
    --teal-11-hsl: 162 88% 16%;
    --teal-12-hsl: 163 89% 11%;
    --green-0-hsl: 131 67% 95%;
    --green-1-hsl: 128 76% 90%;
    --green-2-hsl: 128 71% 82%;
    --green-3-hsl: 129 68% 73%;
    --green-4-hsl: 130 61% 64%;
    --green-5-hsl: 130 57% 56%;
    --green-6-hsl: 131 50% 50%;
    --green-7-hsl: 131 53% 46%;
    --green-8-hsl: 131 54% 40%;
    --green-9-hsl: 132 52% 35%;
    --green-10-hsl: 132 52% 29%;
    --green-11-hsl: 132 53% 22%;
    --green-12-hsl: 131 53% 16%;
    --lime-0-hsl: 79 81% 94%;
    --lime-1-hsl: 80 83% 88%;
    --lime-2-hsl: 81 81% 80%;
    --lime-3-hsl: 82 75% 69%;
    --lime-4-hsl: 83 73% 59%;
    --lime-5-hsl: 84 69% 51%;
    --lime-6-hsl: 85 74% 45%;
    --lime-7-hsl: 85 79% 40%;
    --lime-8-hsl: 86 84% 36%;
    --lime-9-hsl: 85 84% 32%;
    --lime-10-hsl: 85 83% 26%;
    --lime-11-hsl: 85 83% 21%;
    --lime-12-hsl: 85 84% 15%;
    --yellow-0-hsl: 50 100% 93%;
    --yellow-1-hsl: 49 100% 87%;
    --yellow-2-hsl: 49 100% 80%;
    --yellow-3-hsl: 48 100% 70%;
    --yellow-4-hsl: 47 100% 62%;
    --yellow-5-hsl: 45 97% 54%;
    --yellow-6-hsl: 42 96% 50%;
    --yellow-7-hsl: 39 100% 48%;
    --yellow-8-hsl: 35 100% 47%;
    --yellow-9-hsl: 31 100% 45%;
    --yellow-10-hsl: 31 100% 35%;
    --yellow-11-hsl: 31 100% 25%;
    --yellow-12-hsl: 31 100% 20%;
    --orange-0-hsl: 34 100% 95%;
    --orange-1-hsl: 33 100% 90%;
    --orange-2-hsl: 33 100% 83%;
    --orange-3-hsl: 32 100% 74%;
    --orange-4-hsl: 31 100% 65%;
    --orange-5-hsl: 29 100% 58%;
    --orange-6-hsl: 27 98% 54%;
    --orange-7-hsl: 24 94% 50%;
    --orange-8-hsl: 21 90% 48%;
    --orange-9-hsl: 17 87% 45%;
    --orange-10-hsl: 17 87% 40%;
    --orange-11-hsl: 17 87% 32%;
    --orange-12-hsl: 17 87% 27%;
    --choco-0-hsl: 48 100% 93%;
    --choco-1-hsl: 35 91% 86%;
    --choco-2-hsl: 30 85% 79%;
    --choco-3-hsl: 27 80% 72%;
    --choco-4-hsl: 25 75% 65%;
    --choco-5-hsl: 25 71% 57%;
    --choco-6-hsl: 25 70% 49%;
    --choco-7-hsl: 25 75% 42%;
    --choco-8-hsl: 25 75% 37%;
    --choco-9-hsl: 25 76% 31%;
    --choco-10-hsl: 25 71% 26%;
    --choco-11-hsl: 25 66% 21%;
    --choco-12-hsl: 25 65% 15%;
    --brown-0-hsl: 36 60% 95%;
    --brown-1-hsl: 32 44% 87%;
    --brown-2-hsl: 28 40% 80%;
    --brown-3-hsl: 28 38% 72%;
    --brown-4-hsl: 27 36% 65%;
    --brown-5-hsl: 28 34% 57%;
    --brown-6-hsl: 28 32% 50%;
    --brown-7-hsl: 28 35% 43%;
    --brown-8-hsl: 28 38% 37%;
    --brown-9-hsl: 27 42% 31%;
    --brown-10-hsl: 25 48% 25%;
    --brown-11-hsl: 23 58% 19%;
    --brown-12-hsl: 22 57% 16%;
    --sand-0-hsl: 200 27% 98%;
    --sand-1-hsl: 48 17% 88%;
    --sand-2-hsl: 45 22% 79%;
    --sand-3-hsl: 44 22% 69%;
    --sand-4-hsl: 44 17% 62%;
    --sand-5-hsl: 44 14% 54%;
    --sand-6-hsl: 42 14% 46%;
    --sand-7-hsl: 43 16% 39%;
    --sand-8-hsl: 41 15% 32%;
    --sand-9-hsl: 43 14% 26%;
    --sand-10-hsl: 44 11% 20%;
    --sand-11-hsl: 60 6% 14%;
    --sand-12-hsl: 60 6% 7%;
    --camo-0-hsl: 66 71% 95%;
    --camo-1-hsl: 64 69% 77%;
    --camo-2-hsl: 65 69% 59%;
    --camo-3-hsl: 65 61% 51%;
    --camo-4-hsl: 63 61% 46%;
    --camo-5-hsl: 60 62% 41%;
    --camo-6-hsl: 59 65% 36%;
    --camo-7-hsl: 56 67% 33%;
    --camo-8-hsl: 54 70% 29%;
    --camo-9-hsl: 54 69% 25%;
    --camo-10-hsl: 53 69% 22%;
    --camo-11-hsl: 53 69% 18%;
    --camo-12-hsl: 52 69% 13%;
    --jungle-0-hsl: 74 98% 84%;
    --jungle-1-hsl: 74 79% 78%;
    --jungle-2-hsl: 74 68% 71%;
    --jungle-3-hsl: 75 62% 65%;
    --jungle-4-hsl: 74 56% 59%;
    --jungle-5-hsl: 74 53% 53%;
    --jungle-6-hsl: 74 55% 47%;
    --jungle-7-hsl: 74 66% 42%;
    --jungle-8-hsl: 74 79% 36%;
    --jungle-9-hsl: 73 90% 32%;
    --jungle-10-hsl: 73 91% 26%;
    --jungle-11-hsl: 73 91% 21%;
    --jungle-12-hsl: 73 90% 16%;
  }
}