--- a/mrjunejune/src/base.css	Tue Aug 04 15:12:18 2026 -0700
+++ b/mrjunejune/src/base.css	Tue Aug 04 16:49:01 2026 -0700
@@ -74,7 +74,7 @@
     0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
 }
 @media (prefers-color-scheme: dark) {
-  :root:not(.light-mode) {
+  :root:not([data-zen-theme]) {
     --white: hsl(224, 10%, 10%);
     --black: hsl(0, 0%, 90%);
     --darkgray: #cccccc;
@@ -98,6 +98,39 @@
   }
 }
 
+:root {
+  --zen-font-editorial: "More Thin", "Roboto", sans-serif;
+  --zen-font-playful: "More", "More Thin", sans-serif;
+  --zen-font-sans: var(--zen-font-editorial);
+}
+
+:root:not([data-zen-theme]),
+:root[data-zen-theme] {
+  --white: var(--zen-color-surface);
+  --black: var(--zen-color-text);
+  --darkgray: var(--zen-color-border-strong);
+  --lightgray: var(--zen-color-border-muted);
+  --gray-light: var(--zen-color-border-muted);
+  --green: var(--zen-color-success);
+  --orange: var(--zen-color-warning);
+  --purple: var(--zen-color-violet-400);
+  --red: var(--zen-color-danger);
+  --blue: var(--zen-color-info);
+  --darktext: var(--zen-color-text-muted);
+  --text: var(--zen-color-text);
+  --graytext: var(--zen-color-text-muted);
+  --lighttext: var(--zen-color-text-subtle);
+  --awesome: var(--zen-color-persimmon);
+  --accent: var(--zen-color-info);
+  --accent-dark: var(--zen-color-indigo);
+  --gray-dark: var(--zen-color-text);
+  --gray-gradient: linear-gradient(
+    var(--zen-color-canvas),
+    var(--zen-color-surface)
+  );
+  --box-shadow: var(--zen-shadow-md);
+}
+
 /* --- fonts --- */
 /* 
 @font-face {
@@ -141,7 +174,7 @@
 }
 
 body {
-  font-family: "More Thin", sans-serif;
+  font-family: var(--zen-font-sans, "More Thin", sans-serif);
   margin: 0;
   padding: 0;
   text-align: left;
@@ -149,7 +182,7 @@
   background-size: 100% 600px;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  color: rgb(var(--gray-dark));
+  color: var(--gray-dark);
   font-size: 20px;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
@@ -170,7 +203,7 @@
 h5,
 h6 {
   margin: 0 0 0.5rem 0;
-  color: rgb(var(--black));
+  color: var(--black);
   line-height: 1.2;
 }
 
@@ -228,7 +261,7 @@
 
 code {
   padding: 2px 5px;
-  background-color: rgb(var(--gray-light));
+  background-color: var(--gray-light);
   border-radius: 2px;
 }
 
@@ -250,7 +283,7 @@
 
 hr {
   border: none;
-  border-top: 1px solid rgb(var(--gray-light));
+  border-top: 1px solid var(--gray-light);
 }
 
 .center {
@@ -395,4 +428,3 @@
   /* Icon color = button text color */
   background-color: currentColor;
 }
-