From a5b3c0c0e3c7674629c84e23f450db81d7829700 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Sat, 20 Jun 2026 18:46:43 -0400
Subject: [PATCH] feat(theme): monochrome black accent and light/dark surfaces

---
 src/styles/app.css    | 29 +++++++++---------
 src/styles/tokens.css | 69 ++++++++++++++++++++++++++++++-------------
 2 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/styles/app.css b/src/styles/app.css
index 34d2c8f..3191ebf 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -118,17 +118,16 @@ button {
   transition: color 120ms var(--ease);
 }
 
-.brand .mark {
-  font-family: var(--font-book);
-  font-size: 19px;
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  color: var(--ink);
+.brand .back-label {
+  font-family: var(--font-ui);
+  font-size: var(--t-3);
+  font-weight: 600;
+  color: var(--ink-soft);
   transition: color 120ms var(--ease);
 }
 
 .brand:hover,
-.brand:hover .mark {
+.brand:hover .back-label {
   color: var(--accent);
 }
 
@@ -162,7 +161,7 @@ button {
 }
 
 .chapter:hover {
-  background: rgba(35, 32, 27, 0.04);
+  background: var(--accent-wash);
   color: var(--ink);
 }
 
@@ -410,14 +409,14 @@ button {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(35, 32, 27, 0.16);
+  background: var(--line-strong);
   border-radius: 6px;
   border: 3px solid transparent;
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(35, 32, 27, 0.28);
+  background: var(--ink-faint);
   background-clip: content-box;
 }
 
@@ -491,7 +490,7 @@ button {
   align-items: center;
   gap: 1px;
   padding: 5px;
-  background: rgba(252, 251, 247, 0.86);
+  background: var(--glass);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: 1px solid var(--line);
@@ -519,7 +518,7 @@ button {
 
 .tool[data-on="true"] {
   background: var(--accent);
-  color: #fff;
+  color: var(--accent-contrast);
 }
 
 .tool-sep {
@@ -608,7 +607,7 @@ button {
 
 .figure-controls button[data-on="true"] {
   background: var(--accent);
-  color: #fff;
+  color: var(--accent-contrast);
 }
 
 .pdf-pages {
@@ -851,7 +850,7 @@ button {
 
 .card-book,
 .card-example {
-  background: #fffefb;
+  background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: var(--shadow-page);
 }
@@ -934,7 +933,7 @@ button {
   padding: 9px 20px;
   border-radius: var(--r-sm);
   background: var(--accent);
-  color: #fff;
+  color: var(--accent-contrast);
   transition: background 120ms var(--ease);
 }
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index abdd1d6..e591ee4 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -2,26 +2,6 @@
   --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-book: "Literata", Georgia, "Times New Roman", serif;
 
-  --paper: #fcfbf7;
-  --shell: #f1ece2;
-  --sidebar: #ece6da;
-  --raised: #fbfaf6;
-
-  --ink: #23201b;
-  --ink-soft: #6b6458;
-  --ink-faint: #9b9484;
-
-  --line: #e3ddce;
-  --line-strong: #d6cfbd;
-
-  --accent: #b5532e;
-  --accent-ink: #97431f;
-  --accent-wash: rgba(181, 83, 46, 0.1);
-  --selection: rgba(181, 83, 46, 0.16);
-
-  --shadow-page: 0 1px 2px rgba(35, 32, 27, 0.06), 0 14px 30px rgba(35, 32, 27, 0.09);
-  --shadow-pop: 0 8px 24px rgba(35, 32, 27, 0.14);
-
   --r-sm: 5px;
   --r-md: 8px;
   --r-lg: 12px;
@@ -37,3 +17,52 @@
 
   --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
 }
+
+:root,
+:root[data-theme="light"] {
+  --paper: #fcfbf7;
+  --shell: #f1ece2;
+  --sidebar: #ece6da;
+  --raised: #fbfaf6;
+
+  --ink: #23201b;
+  --ink-soft: #6b6458;
+  --ink-faint: #9b9484;
+
+  --line: #e3ddce;
+  --line-strong: #d6cfbd;
+
+  --accent: #2a2622;
+  --accent-ink: #100e0b;
+  --accent-wash: rgba(35, 32, 27, 0.08);
+  --accent-contrast: #faf7f0;
+  --selection: rgba(35, 32, 27, 0.14);
+  --glass: rgba(252, 251, 247, 0.86);
+
+  --shadow-page: 0 1px 2px rgba(35, 32, 27, 0.06), 0 14px 30px rgba(35, 32, 27, 0.09);
+  --shadow-pop: 0 8px 24px rgba(35, 32, 27, 0.14);
+}
+
+:root[data-theme="dark"] {
+  --paper: #1d1a16;
+  --shell: #151310;
+  --sidebar: #1a1713;
+  --raised: #232019;
+
+  --ink: #ece6da;
+  --ink-soft: #a89f8e;
+  --ink-faint: #756d5e;
+
+  --line: #2c2823;
+  --line-strong: #3a352d;
+
+  --accent: #efe9dc;
+  --accent-ink: #ffffff;
+  --accent-wash: rgba(239, 233, 220, 0.12);
+  --accent-contrast: #1a1714;
+  --selection: rgba(239, 233, 220, 0.18);
+  --glass: rgba(33, 30, 25, 0.88);
+
+  --shadow-page: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.5);
+  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
+}