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/common/autocomplete.scss

@@ -1,6 +1,6 @@
 .ui-autocomplete.ui-widget {
   font-size: var(--text-sm);
-  border: var(--autocomplete-border);
+  border: 1px solid var(--autocomplete-border-color);
 
   div.ui-menu-item-wrapper {
     padding: 0.25em 0.4em;

app/javascript/src/styles/common/buttons.scss

@@ -14,16 +14,16 @@ input[type="button"], input[type="submit"], button {
   padding: 0.25em 1em;
 
   background: var(--form-button-background);
-  border: var(--form-button-border);
+  border: 1px solid var(--form-button-border-color);
   color: var(--form-button-text-color);
 
   &:hover {
-    box-shadow: var(--form-button-hover-box-shadow);
+    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
     background: var(--form-button-hover-background);
   }
 
   &:active {
-    box-shadow: var(--form-button-hover-box-shadow);
+    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
     background: var(--form-button-active-background);
   }
 }

app/javascript/src/styles/common/jquery_ui_custom.scss

@@ -61,7 +61,7 @@ div.ui-dialog {
 .ui-button {
   margin: 0;
   padding: 0.25em 1em;
-  border: var(--form-button-border);
+  border: 1px solid var(--form-button-border-color);
   background: var(--form-button-background);
   color: var(--form-button-text-color);
 
@@ -75,12 +75,12 @@ div.ui-dialog {
   }
 
   &:hover {
-    box-shadow: var(--form-button-hover-box-shadow);
+    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
     background: var(--form-button-hover-background);
   }
 
   &:active {
-    box-shadow: var(--form-button-hover-box-shadow);
+    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
     background: var(--form-button-active-background);
     color: var(--form-button-text-color);
   }

app/javascript/src/styles/common/main_layout.scss

@@ -17,7 +17,7 @@ footer#page-footer {
   margin-top: 1em;
   text-align: center;
   padding: 1em 0 1em;
-  border-top: var(--footer-border);
+  border-top: 1px solid var(--footer-border-color);
 
   .social-icon img {
     vertical-align: bottom;

app/javascript/src/styles/common/news.scss

@@ -1,7 +1,7 @@
 div#news-updates {
   padding: 5px;
   background: var(--news-updates-background);
-  border-bottom: var(--news-updates-border);
+  border-bottom: 2px solid var(--news-updates-border-color);
   overflow: hidden;
   font-size: 0.8em;
 

app/javascript/src/styles/common/notices.scss

@@ -41,10 +41,10 @@ div#notice {
 
 .notice-info {
   background: var(--notice-info-background);
-  border: var(--notice-info-border);
+  border: 1px solid var(--notice-info-border-color);
 }
 
 .notice-error {
   background: var(--notice-error-background);
-  border: var(--notice-error-border);
+  border: 1px solid var(--notice-error-border-color);
 }

app/javascript/src/styles/common/tables.scss

@@ -5,7 +5,7 @@ table.striped {
 
   tbody {
     tr {
-      border-bottom: var(--table-row-border);
+      border-bottom: 1px solid var(--table-row-border-color);
 
       &:hover {
         background: var(--table-row-hover-background);
@@ -15,7 +15,7 @@ table.striped {
 
   thead {
     tr {
-      border-bottom: var(--table-header-border);
+      border-bottom: 1px solid var(--table-header-border-color);
     }
 
     th {

app/javascript/src/styles/common/utilities.scss

@@ -23,6 +23,7 @@ $spacer: 0.25rem; /* 4px */
 
 .mb-2  { margin-bottom: 2 * $spacer; }
 .mb-4  { margin-bottom: 4 * $spacer; }
+.mb-8  { margin-bottom: 8 * $spacer; }
 
 .ml-4  { margin-left: 4 * $spacer; }