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/views/static/colors.html.erb

@@ -0,0 +1,86 @@
+<div id="c-static">
+  <div id="a-colors">
+    <h1>Colors</h1>
+
+    <div class="space-y-4">
+      <table style="border-spacing: 0.25rem; border-collapse: separate">
+        <tr>
+          <td></td>
+          <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+            <td class="text-muted text-center"><%= i %></td>
+          <% end %>
+        </tr>
+
+        <% ColorPalette::HUES.each do |hue, _| %>
+          <tr>
+            <td class="text-muted"><%= hue %></td>
+            <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+              <td style="height: 2rem; width: 4rem; background-color: var(--<%= "#{hue}-#{i}" %>)"></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </table>
+
+      <table style="border-spacing: 0.25rem; border-collapse: separate">
+        <tr>
+          <td></td>
+          <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+            <td class="text-muted text-center"><%= i %></td>
+          <% end %>
+        </tr>
+
+        <% ColorPalette::HUES.each do |hue, _| %>
+          <tr>
+            <td class="text-muted"><%= hue %></td>
+            <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+              <td class="text-center" style="height: 2rem; width: 4rem; background-color: white; color: var(--<%= "#{hue}-#{i}" %>)">
+                Aa
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </table>
+
+      <table style="border-spacing: 0.25rem; border-collapse: separate">
+        <tr>
+          <td></td>
+          <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+            <td class="text-muted text-center"><%= i %></td>
+          <% end %>
+        </tr>
+
+        <% ColorPalette::HUES.each do |hue, _| %>
+          <tr>
+            <td class="text-muted"><%= hue %></td>
+            <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+              <td class="text-center" style="height: 2rem; width: 4rem; background-color: var(--<%= "#{hue}-#{i}" %>)">
+                <span style="color: white">Aa</span>
+                <span style="color: var(--grey-9)">Aa</span>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </table>
+
+      <table style="border-spacing: 0.25rem; border-collapse: separate">
+        <tr>
+          <td></td>
+          <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+            <td class="text-muted text-center"><%= i %></td>
+          <% end %>
+        </tr>
+
+        <% ColorPalette::HUES.each do |hue, _| %>
+          <tr>
+            <td class="text-muted"><%= hue %></td>
+            <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
+              <td class="text-center" style="height: 2rem; width: 4rem; background-color: var(--grey-9); color: var(--<%= "#{hue}-#{i}" %>)">
+                Aa
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </table>
+    </div>
+  </div>
+</div>