🌓 Adds Dark Mode (#210)

* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links

assets/css/base/_radio-buttons.scss

@@ -0,0 +1,53 @@
+.radio-wrapper {
+  & + & {
+    margin-top: 0.25rem;
+  }
+
+  [type='radio'] {
+    opacity: 0;
+    position: absolute;
+  }
+
+  & label {
+    --inner-size: 0.25rem;
+    --outer-top: 0.33rem;
+    line-height: 1;
+
+    padding-left: 1.55rem;
+    position: relative;
+
+    &::after,
+    &::before {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &::after {
+      border: var(--inner-size) solid var(--clr-foreground);
+      left: var(--inner-size);
+      opacity: 0;
+      top: calc(var(--inner-size) + var(--outer-top));
+      transition: opacity 0.12s ease-out;
+    }
+
+    &::before {
+      background: var(--clr-background);
+      border: 0.125rem solid var(--clr-foreground);
+      height: 1rem;
+      left: 0;
+      top: var(--outer-top);
+      width: 1rem;
+    }
+  }
+
+  [type='radio']:focus + label::before {
+    outline: 0.125rem solid var(--clr-foreground);
+    outline-offset: 0.125rem;
+  }
+
+  [type='radio']:checked + label::after {
+    opacity: 1;
+  }
+}