Rework the background-color and color CSS vars

static/styles/root.css

@@ -17,9 +17,6 @@
     --purple: 161, 49, 232;
     --lilac: 187, 121, 245;
 
-    --background-color: rgb(var(--white));
-    --foreground-body-color: rgba(var(--black), 0.8);
-    --foreground-header-color: rgb(var(--black));
     --site-nav-link-color: rgb(var(--mid-blue));
 
     --separator-color: rgb(var(--lt-gray));
@@ -42,6 +39,15 @@
     --body-header-line-height: 1.1;
     --body-code-background-color: rgb(var(--super-lt-gray));
 
+    --heading-color: rgb(var(--black));
+
+    --html-background-color: rgb(var(--white));
+    --html-color: rgba(var(--black), 0.8);
+
+    --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
+    --platter-background-opacity: 0.6;
+    --platter-backdrop-filter: blur(10px);
+
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
@@ -55,13 +61,18 @@
 }
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: rgb(var(--black));
-        --foreground-body-color: rgba(var(--white), 0.8);
-        --foreground-header-color: rgb(var(--white));
         --separator-color: rgb(var(--dk-gray));
         --box-shadow-color: rgba(var(--dk-gray), 0.8);
         --body-code-background-color: rgb(var(--dk-gray));
 
+        --heading-color: rgb(var(--white));
+
+        --html-background-color: rgb(var(--black));
+        --html-color: rgba(var(--white), 0.8);
+
+        --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+        --platter-backdrop-filter: brightness(0.66) blur(10px);
+
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
         --instagram-icon: url(/icons/instagram-dark.svg);
@@ -120,7 +131,6 @@ blockquote {
 }
 
 body {
-    color: var(--foreground-body-color);
     font-size: var(--body-font-size);
     line-height: var(--body-line-height);
 }
@@ -224,7 +234,7 @@ footer.site p + p {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: var(--foreground-header-color);
+    color: var(--heading-color);
     font-family: var(--font-family-heading);
     font-weight: 600;
     margin-block: 3.5rem 1rem;
@@ -326,8 +336,8 @@ header.site .grid nav:last-of-type {
 }
 
 html {
-    background-color: var(--background-color);
+    background-color: var(--html-background-color);
-    color: var(--foreground-color);
+    color: var(--html-color);
     font-family: var(--font-family-body);
     font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
 }
@@ -375,13 +385,13 @@ nav.site li {
 nav.site .active { font-weight: bold; }
 
 nav.bulleted li:first-child::before {
-    color: var(--foreground-color);
+    color: var(--html-color);
     content: "";
     margin-inline-end: 0;
 }
 
 nav.bulleted li::before {
-    color: var(--foreground-header-color);
+    color: var(--heading-color);
     content: "•";
     font-size: 60%;
     font-weight: normal;
@@ -578,7 +588,7 @@ ol ol {
 }
 
 .platter {
-    background: var(--background-color);
+    background-color: var(--platter-background-color);
     border: 1px solid var(--header-border-color);
     border-radius: 12px;
     box-shadow: 3px 4px 4px var(--header-box-shadow-color);