fix(docs): make the secondary hero button visible in dark mode

An outlined Material button takes its text and border from the primary
colour, which is the header's dark brown. On the dark page that left "Get
started" at 1.71:1 against its own background, drawn but not visible, and its
hover state at 2.13:1, since Material writes white on the light green accent.
Both now use a foreground chosen for that background: 12.44 and 7.59.

Fixing it turned up why the light scheme never looked brown. The brand
primary and accent were declared on :root, where Material's own scheme block
outranks them, so light mode kept the stock indigo for links and buttons
underneath a brown and green header. Declared on the scheme itself they take,
and both now read 7.46 against the page.

Dark-mode links keep Material's blue. It is legible at 5.27 and is what a
link is expected to look like, so it is left alone rather than made warm for
consistency's sake.

Author: joanroig

docs/stylesheets/extra.css

@@ -2,10 +2,7 @@
   --admincraft-dirt: #805539;
   --admincraft-grass: #5f7f3b;
   --admincraft-ink: #252018;
-  --md-primary-fg-color: #6f4933;
-  --md-primary-fg-color--light: #94684a;
-  --md-primary-fg-color--dark: #4b3022;
-  --md-accent-fg-color: #658746;
+  --admincraft-sand: #e3d3bd;
 }
 
 /* Tint Material's own schemes rather than declaring new ones.
@@ -19,6 +16,13 @@
   --md-default-bg-color: #fbf9f4;
   --md-default-fg-color: var(--admincraft-ink);
   --md-code-bg-color: #eee9dd;
+  /* These sat on :root, where Material's own scheme block outranked them, so
+   * light mode kept the stock indigo for links and buttons under a brown and
+   * green header. They have to be set on the scheme itself to take. */
+  --md-primary-fg-color: #6f4933;
+  --md-primary-fg-color--light: #94684a;
+  --md-primary-fg-color--dark: #4b3022;
+  --md-accent-fg-color: #658746;
 }
 
 [data-md-color-scheme="slate"] {
@@ -93,6 +97,22 @@
   border-color: var(--admincraft-grass) !important;
 }
 
+/* An outlined button takes its text and border from --md-primary-fg-color,
+ * which is the header colour. That is a dark brown here, so on the dark page
+ * the secondary button sat at 1.7:1 against its own background: drawn, but not
+ * visible. Material's hover then paints it with the accent and writes on it in
+ * --md-accent-bg-color, which slate leaves as white, giving 2.1:1 on light
+ * green. Both need a foreground chosen for this background rather than
+ * inherited from the header. */
+[data-md-color-scheme="slate"] .md-button {
+  color: var(--admincraft-sand);
+}
+
+[data-md-color-scheme="slate"] .md-button:focus,
+[data-md-color-scheme="slate"] .md-button:hover {
+  color: var(--admincraft-ink);
+}
+
 @media (max-width: 44.9844em) {
   .admincraft-hero {
     padding: 1.5rem 1rem;