From 0511b018ca35fc4937e2264ea8db50d4f2fe7580 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 22:22:08 +0000
Subject: [PATCH] Update web/static/themes/forest.css

---
 web/static/themes/forest.css | 65 ++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/web/static/themes/forest.css b/web/static/themes/forest.css
index 41a1e36..a3f927e 100644
--- a/web/static/themes/forest.css
+++ b/web/static/themes/forest.css
@@ -1,5 +1,5 @@
 /* ===============================
-   Forest — bright, readable greens
+   Forest — bright, readable greens (with pine pattern)
    =============================== */
 
 html[data-theme="forest"] {
@@ -26,10 +26,10 @@ html[data-theme="forest"] {
   --forest-bar:        #0b4f38;  /* deep forest */
   --forest-bar-ink:    #ecfdf5;
 
-  /* Background shades */
-  --forest-bg-top: #e4f2ea;
-  --forest-bg-mid: #d5eadf;
-  --forest-bg-bot: #c8e2d6;
+  /* Background shades (darker) */
+  --forest-bg-top: #dcece4;
+  --forest-bg-mid: #cfe4da;
+  --forest-bg-bot: #c2dcd2;
 
   /* Controls */
   --btn-radius: 12px;
@@ -40,34 +40,35 @@ html[data-theme="forest"] {
 html[data-theme="forest"] body {
   min-height: 100vh;
   color: var(--forest-ink);
+
+  /* Layer order: vignette (top), pattern layers, base gradient (bottom) */
   background:
-    /* Faint pine outline (single SVG, no-repeat) */
+    /* Dark green vignette to anchor the page */
+    radial-gradient(1200px 520px at 85% -10%, rgba(11,63,45,.24), transparent 62%),
+
+    /* Pine pattern — fine grid */
     url("data:image/svg+xml;utf8,\
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 520' fill='none' stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
-  <g transform='translate(40,40)'>\
-    <polygon points='140,40 100,100 180,100'/>\
-    <polygon points='140,90 90,160 190,160'/>\
-    <polygon points='140,150 80,230 200,230'/>\
-    <line x1='140' y1='40' x2='140' y2='270'/>\
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
+  <g stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
+    <polygon points='80,16 58,48 102,48'/>\
+    <polygon points='80,46 50,88 110,88'/>\
+    <polygon points='80,86 44,136 116,136'/>\
+    <line x1='80' y1='16' x2='80' y2='172'/>\
   </g>\
-  <g transform='translate(240,100) scale(0.8)'>\
-    <polygon points='140,40 100,100 180,100'/>\
-    <polygon points='140,90 90,160 190,160'/>\
-    <polygon points='140,150 80,230 200,230'/>\
-    <line x1='140' y1='40' x2='140' y2='270'/>\
-  </g>\
-  <g transform='translate(0,140) scale(0.7)'>\
-    <polygon points='140,40 100,100 180,100'/>\
-    <polygon points='140,90 90,160 190,160'/>\
-    <polygon points='140,150 80,230 200,230'/>\
-    <line x1='140' y1='40' x2='140' y2='270'/>\
-  </g>\
-</svg>") right -60px top 30px / 440px auto no-repeat,
+</svg>") left top / 220px 300px repeat,
 
-    /* Dark green vignette */
-    radial-gradient(1200px 480px at 85% -10%, rgba(11,63,45,.22), transparent 62%),
+    /* Pine pattern — larger, offset for variation */
+    url("data:image/svg+xml;utf8,\
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
+  <g stroke='%230b3f2d' stroke-opacity='.06' stroke-width='2'>\
+    <polygon points='80,16 58,48 102,48'/>\
+    <polygon points='80,46 50,88 110,88'/>\
+    <polygon points='80,86 44,136 116,136'/>\
+    <line x1='80' y1='16' x2='80' y2='172'/>\
+  </g>\
+</svg>") 60px 40px / 300px 410px repeat,
 
-    /* Darker gradient base */
+    /* Base gradient */
     linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
 }
 
@@ -237,7 +238,13 @@ html[data-theme="forest"] .settings-console .sec-icon{
 /* Theme swatches */
 html[data-theme="forest"] .settings-console .swatch{
   border:1px solid var(--forest-border);
-  background: linear-gradient(135deg,#e8fbef,#cdeedd);
+  background:
+    url("data:image/svg+xml;utf8,\
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'>\
+  <polygon points='50,12 38,30 62,30' stroke='%230b3f2d' stroke-opacity='.18' stroke-width='3'/>\
+  <polygon points='50,28 34,50 66,50' stroke='%230b3f2d' stroke-opacity='.14' stroke-width='3'/>\
+</svg>") center/80% 80% no-repeat,
+    linear-gradient(135deg,#e8fbef,#cdeedd);
 }
 html[data-theme="forest"] .settings-console .swatch-name{
   background: rgba(255,255,255,.85);