Add color scheme support

full/style.css

@@ -66,40 +66,80 @@ h6 {
 :root {
   /* auto light/dark based on user choice */
   color-scheme: light dark;
-  --text: light-dark(#000000, #FFFFFF);
-  --bg: light-dark(#FFFFFF, #000000);
+}
 
-  font-family: sans-serif;
+.drop-shadow {
+  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19);
+}
+
+/* Dead Orbit */
+html:has(option[value="drifting"]:checked) {
+  --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0));
+  --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0));
+  --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0));
+  --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0));
+}
+
+/* Future War Cult */
+html:has(option[value="ascendant"]:checked) {
+  --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27));
+  --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4));
+  --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27));
+  --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0));
+}
+
+/* New Monarchy */
+html:has(option[value="aristocratic"]:checked) {
+  --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27));
+  --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0));
+  --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27));
+  --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0));
 }
 
 
 /* https://smolweb.org/subset.html */
 /* structural */
 body {
-  background: #383838;
+  background: var(--color-background);
   margin: 0 auto;
-  max-width: max(768px, 100ch);
+  max-width: max(768px, 80ch);
 }
 
 html {
+  font-family: "SF Pro Display",
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    "Inter",
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
   /* respect user font choices */
   font-size: 100%;
+  font-weight: 400;
+  color: var(--color-text);
 }
 
 
 /* semantic */
 header {
-  background: #afafaf;
+  background: var(--color-header-footer);
 
   strong {
     margin: 0.5rem;
     font-size: 1.6rem;
   }
+
+  label {
+    font-size: 0.8rem;
+  }
 }
 
 footer {
-  background: #afafaf;
-  font-size: 0.9rem;
+  background: var(--color-header-footer);
+  font-size: 0.8rem;
 
   p {
     margin: 0.5rem;
@@ -107,7 +147,7 @@ footer {
 }
 
 main {
-  background: #cccccc;
+  background: var(--color-main);
   padding: 1rem;
 }
 
@@ -136,6 +176,10 @@ p {
 /* hypertextual */
 /* listing */
 /* forms */
+label {
+  margin: 0.5rem;
+}
+
 /* basic table */
 /* image */
 /* presentation */