css: rework color scheme to use new color palette.

Add a new color palette and rework all site colors (both light mode and dark mode) to
use the new palette.

This ensures that colors are used consistently, from a carefully designed color palette,
instead of being chosen at random.

Before, colors in light mode were chosen on an ad-hoc basis, which resulted in a lot of
random colors and inconsistent design.

The new palette has 7 hues: red, orange, yellow, green, blue, azure (a lighter blue), and
purple. There's also a greyscale. Each hue has 10 shades of brightness, which (including
grey) gives us 80 total colors.

Colors are named like this:

    var(--red-0);    /* very light red */
    var(--red-2);    /* light red */
    var(--red-5);    /* medium red */
    var(--red-7);    /* dark red */
    var(--red-9);    /* very dark red */
    var(--green-7);  /* dark green */
    var(--blue-5);   /* medium blue */
    var(--purple-3); /* light purple */
                     /* etc */

The color palette is designed to meet the following criteria:

* To have close equivalents to the main colors used in the old color scheme,
  especially tag colors, so that changes to major colors are minimized.
* To produce a set of colors that can be used as as main text colors, as background
  colors, and as accent colors, both in light mode and dark mode.
* To ensure that colors at the same brightness level have the same perceived brightness.
  Green-4, blue-4, red-4, purple-4, etc should all have the same brightness and contrast
  ratios. This way colors look balanced. This is actually a difficult problem, because human
  color perception is non-linear, so you can't just scale brightness values linearly.

There's a color palette test page at https://danbooru.donmai/static/colors

Notable changes to colors in light mode:

* Username colors are the same as tag colors.
* Copyright tags are a deeper purple.
* Builders are a deeper purple (fixes #4626).
* Moderators are green.
* Gold users are orange.
* Parent borders are a darker green.
* Child borders are a darker orange.
* Unsaved notes have a thicker red border.
* Selected notes have a thicker blue (not green) border.

app/javascript/src/styles/specific/common_tooltips.scss

@@ -9,7 +9,7 @@ div[data-tippy-root].tooltip-loading {
   color: var(--text-color);
   background-color: var(--post-tooltip-background-color);
   background-clip: padding-box;
-  box-shadow: var(--post-tooltip-box-shadow);
+  box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color);
 
   /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
   &[data-placement^=bottom] {

app/javascript/src/styles/specific/notes.scss

@@ -10,7 +10,7 @@
     display: none;
     position: absolute;
     font-size: 14px;
-    border: var(--note-body-border);
+    border: 1px solid var(--note-body-border-color);
     background: var(--note-body-background);
     color: var(--note-body-text-color);
     min-width: 140px;
@@ -88,7 +88,7 @@
     align-items: center;
     text-align: center;
     position: absolute !important;
-    border: var(--note-box-border);
+    border: 1px solid var(--note-box-border-color);
     min-width: 5px;
     min-height: 5px;
     width: 100px;
@@ -105,11 +105,11 @@
     }
 
     &.unsaved {
-      border: var(--unsaved-note-box-border);
+      border: 2px solid var(--unsaved-note-box-border-color);
     }
 
     &.movable {
-      border: var(--movable-note-box-border);
+      border: 2px solid var(--movable-note-box-border-color);
     }
 
     &.embedded {
@@ -118,7 +118,7 @@
       opacity: 1;
 
       &:hover {
-        border: var(--note-box-border);
+        border: 1px solid var(--note-box-border-color);
         box-shadow: var(--note-box-shadow);
 
         &.editing,
@@ -160,7 +160,7 @@
 div#note-preview {
   position: absolute;
   cursor: crosshair;
-  border: var(--note-preview-border);
+  border: 2px solid var(--note-preview-border-color);
   opacity: 0.6;
   display: none;
   background: var(--note-preview-background);

app/javascript/src/styles/specific/posts.scss

@@ -102,7 +102,7 @@ div#c-posts {
     margin: 0.5em 0;
     padding: 0.5em;
     overflow: hidden;
-    border: var(--post-notice-border);
+    border: 1px solid var(--post-notice-border-color);
 
     p {
       margin-bottom: 0;
@@ -172,7 +172,7 @@ div#c-posts {
     }
 
     #artist-commentary {
-      border: var(--post-artist-commentary-container-border);
+      border: 1px solid var(--post-artist-commentary-container-border-color);
       border-radius: 3px;
       background: var(--post-artist-commentary-container-background);
       margin-bottom: 0.5em;
@@ -219,7 +219,7 @@ div#c-posts, div#c-uploads {
   /* Fetch source data box */
   div#source-info {
     border-radius: 4px;
-    border: var(--fetch-source-data-border);
+    border: 1px solid var(--fetch-source-data-border-color);
 
     &:not(.loading) #source-info-loading { display: none; }
     &.loading #source-info-content { display: none; }