Convert almost all variables from sass to css. Move reset into base.

assets/sass/base/_base.scss

@@ -1,6 +1,7 @@
 // Base styles.
 
 // Broken into modular pieces to make it easier to edit.
+@import 'reset/reset';
 @import 'document/document';
 @import 'forms/forms';
 @import 'grouping/grouping';

assets/sass/base/document/_document.scss

@@ -4,14 +4,14 @@ html {
   // Change the default font family in all browsers.
   font-family: var(--ff-body);
   // Set base font size in percent.
-  font-size: calc(#{$base-font-size} / 16 * 100%);
+  font-size: calc(var(--base-font-size) / 16 * 100%);
   // Set text colour.
   color: var(--color-text);
 }
 
 body {
   // Correct the line height in all browsers.
-  line-height: $base-line-height;
+  line-height: var(--base-line-height);
   // Output a horizontal grid to help with debugging typography. The
   // $debug variable will toggle its output.
   @include debug-grid();

assets/sass/base/reset/_reset.scss

@@ -0,0 +1,101 @@
+// stylelint-disable property-no-vendor-prefix
+
+// Reset browsers to some sane defaults.
+
+// Document
+
+// Use the saner border-box model for all elements.
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  // Activate transition to intrinsic sizes like auto and fit-content.
+  interpolate-size: allow-keywords;
+}
+
+// Transitioning page view.
+@view-transition {
+  navigation: auto;
+}
+
+html {
+  // Prevent adjustments of font size.
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  // Improve text rendering.
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Sections
+
+body {
+  // Remove the margin in all browsers.
+  margin: 0;
+  padding: 0;
+  // On short pages, we want the body to fill the entire height
+  // of the browser.
+  min-height: 100vh;
+}
+
+// Embedded content
+
+img,
+svg,
+picture,
+audio,
+video,
+canvas,
+iframe,
+embed,
+object {
+  display: block;
+}
+
+img,
+svg,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+figure {
+  margin-inline: 0;
+}
+
+// Form defaults.
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+}
+
+[type='search'] {
+  @include respond-to(s) {
+    // Correct the odd appearance in Safari on desktop.
+    -webkit-appearance: textfield;
+  }
+}
+
+// Code
+
+code,
+kbd,
+samp {
+  font-family: var(--ff-monospace);
+}
+
+// Numbers
+
+td,
+math,
+time[datetime*=':'] {
+  font-variant-numeric: tabular-nums lining-nums;
+}