Move per-theme CSS variables to top

When defining colors relative to other colors defined per theme, it's
helpful to have these all defined as variables and have all the
variables defined in one place.  Let's do that.

Author: traviscross

theme/reference.css

@@ -1,5 +1,54 @@
 /* Custom CSS for the Rust Specification. */
 
+/* Per-theme variables. */
+:root {
+    --railroad-background-color: hsl(30, 20%, 95%);
+    --railroad-background-image:
+        linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
+    --railroad-path-stroke: black;
+    --railroad-rect-stroke: black;
+    --railroad-rect-fill: hsl(-290, 70%, 90%);
+}
+.light {
+    --alert-note-color: #0969da;
+    --alert-warning-color: #9a6700;
+    --alert-edition-color: #1a7f37;
+    --alert-example-color: #8250df;
+    --gramar-literal-bg: #fafafa;
+}
+.rust {
+    --alert-note-color: #023b95;
+    --alert-warning-color: #603700;
+    --alert-edition-color: #008200;
+    --alert-example-color: #8250df;
+    --grammar-literal-bg: #dedede;
+}
+.coal, .navy {
+    --alert-note-color: #4493f8;
+    --alert-warning-color: #d29922;
+    --alert-edition-color: #3fb950;
+    --alert-example-color: #ab7df8;
+    --grammar-literal-bg: #1d1f21;
+}
+.ayu {
+    --alert-note-color: #74b9ff;
+    --alert-warning-color: #f0b72f;
+    --alert-edition-color: #2bd853;
+    --alert-example-color: #d3abff;
+    --gramar-literal-bg: #191f26;
+}
+.coal, .navy, .ayu {
+    --railroad-background-color: hsl(230, 10%, 20%);
+    --railroad-background-image:
+        linear-gradient(to right, rgba(150, 150, 150, .05) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(150, 150, 150, .05) 1px, transparent 1px);
+    --railroad-path-stroke: hsl(200, 10%, 60%);
+    --railroad-text-fill: hsl(230, 30%, 80%);
+    --railroad-rect-stroke: hsl(200, 10%, 50%);
+    --railroad-rect-fill: hsl(230, 20%, 20%);
+}
+
 /*
 .parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping
 the end parenthesis onto its own line. Use in a span between the last word and
@@ -58,31 +107,6 @@ See mdbook-spec/src/admonitions.rs.
     margin-right: 8px;
 }
 
-.light .alert {
-    --alert-note-color: #0969da;
-    --alert-warning-color: #9a6700;
-    --alert-edition-color: #1a7f37;
-    --alert-example-color: #8250df;
-}
-.ayu .alert {
-    --alert-note-color: #74b9ff;
-    --alert-warning-color: #f0b72f;
-    --alert-edition-color: #2bd853;
-    --alert-example-color: #d3abff;
-}
-.rust .alert {
-    --alert-note-color: #023b95;
-    --alert-warning-color: #603700;
-    --alert-edition-color: #008200;
-    --alert-example-color: #8250df;
-}
-.coal .alert,
-.navy .alert {
-    --alert-note-color: #4493f8;
-    --alert-warning-color: #d29922;
-    --alert-edition-color: #3fb950;
-    --alert-example-color: #ab7df8;
-}
 .alert-note blockquote {
     border-inline-start-color: var(--alert-note-color);
 }
@@ -596,20 +620,8 @@ main > .rule {
     color: var(--inline-code-color);
 }
 
-.light .grammar-literal {
-    background-color: #fafafa;
-}
-.rust .grammar-literal {
-    background-color: #dedede;
-}
-.coal .grammar-literal {
-    background-color: #1d1f21;
-}
-.navy .grammar-literal {
-    background-color: #1d1f21;
-}
-.ayu .grammar-literal {
-    background-color: #191f26;
+.grammar-literal {
+    background-color: var(--grammar-literal-bg);
 }
 
 .grammar-production:target, .railroad-production:target {
@@ -653,25 +665,6 @@ main > .rule {
     display: none;
 }
 
-:root {
-    --railroad-background-color: hsl(30, 20%, 95%);
-    --railroad-background-image: linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
-        linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
-    --railroad-path-stroke: black;
-    --railroad-rect-stroke: black;
-    --railroad-rect-fill: hsl(-290, 70%, 90%);
-}
-
-.coal, .navy, .ayu {
-    --railroad-background-color: hsl(230, 10%, 20%);
-    --railroad-background-image: linear-gradient(to right, rgba(150, 150, 150, .05) 1px, transparent 1px),
-        linear-gradient(to bottom, rgba(150, 150, 150, .05) 1px, transparent 1px);
-    --railroad-path-stroke: hsl(200, 10%, 60%);
-    --railroad-text-fill: hsl(230, 30%, 80%);
-    --railroad-rect-stroke: hsl(200, 10%, 50%);
-    --railroad-rect-fill: hsl(230, 20%, 20%);
-}
-
 svg.railroad {
     background-color: var(--railroad-background-color);
     background-size: 15px 15px;