From de804c8fc5aa9eb795004f7463bd72527555aaa4 Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Mon, 28 Sep 2026 09:10:00 -0500
Subject: [PATCH] =?UTF-8?q?feat(theme):=20Workshop=20atmosphere=20?=
 =?UTF-8?q?=E2=80=94=20Moi's=20graph-paper=20grid=20+=20mint/clay=20washes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Moi dark material is not just tokens: site.css paints a 24px hairline grid (rgba(235,230,220,0.035)) plus pine and clay radial washes over the paper. Applied the identical background stack to .main under both workshop themes (fixed attachment), with per-theme --wk-grid/--wk-wash-mint/--wk-wash-clay/--wk-copper tokens from Moi's light and dark blocks. Sidebar stays a clean opaque surface. Verified against the live Moi site in a browser: both render body #12110f with grid:true, wash:true, pine #7eb89a, copper #d4a574.
---
 frontend/src/styles.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b7f6dc1..f8f6bc6 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -600,6 +600,11 @@ html[data-theme='cosmic'] .empty-state {
   --shadow-modal: 0 12px 40px rgba(28, 24, 20, 0.18);
   --radius: 14px;
   --radius-sm: 9px;
+  /* Moi atmosphere layer: hairline graph-paper grid + soft mint/clay washes */
+  --wk-grid: rgba(28, 24, 20, 0.04);
+  --wk-wash-mint: rgba(33, 92, 72, 0.1);
+  --wk-wash-clay: rgba(191, 112, 64, 0.1);
+  --wk-copper: #8b5a32;
 }
 
 /* Workshop type: Iowan/Palatino serif for display surfaces, everything
@@ -649,10 +654,37 @@ html[data-theme='workshop'] h2 {
   --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.6);
   --radius: 14px;
   --radius-sm: 9px;
+  /* Moi dark atmosphere (site.css dark block): pale grid + pine/clay washes */
+  --wk-grid: rgba(235, 230, 220, 0.035);
+  --wk-wash-mint: rgba(126, 184, 154, 0.08);
+  --wk-wash-clay: rgba(212, 165, 116, 0.07);
+  --wk-copper: #d4a574;
 }
 
 /* One accent rule: pine carries focus and active states; copper marks
    index-like mono elements instead of a second saturated hue. */
+html[data-theme='workshop'] .main,
+html[data-theme='workshop-dark'] .main {
+  /* Moi body canvas: graph-paper hairlines at 24px + mint/clay washes.
+     Applied to .main (the scroll surface) with fixed attachment so it
+     reads as the room, not a texture on a panel. */
+  background-image:
+    linear-gradient(var(--wk-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--wk-grid) 1px, transparent 1px),
+    radial-gradient(50% 40% at 88% 8%, var(--wk-wash-mint), transparent 70%),
+    radial-gradient(45% 36% at 8% 92%, var(--wk-wash-clay), transparent 68%);
+  background-size:
+    24px 24px,
+    24px 24px,
+    auto,
+    auto;
+  background-attachment: fixed;
+}
+html[data-theme='workshop'] .sidebar,
+html[data-theme='workshop-dark'] .sidebar {
+  /* keep the sidebar a clean surface over the grid */
+  background: var(--surface);
+}
 html[data-theme='workshop'] code,
 html[data-theme='workshop-dark'] code,
 html[data-theme='workshop'] .mono,