From e264f673d7e787d58f23f6cf1642b1f9a3255b8e Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Sat, 27 Jun 2026 21:15:08 +1000
Subject: [PATCH] fix(ui): readable light mode over the board backdrop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Body text washed out in light mode — the secondary/tertiary text tokens were
too light against the bright sandstone board image. Darken light --text-dim and
--text-faint, and heavily strengthen the light-theme scrim so the board drops
to a faint texture behind content. Dark mode unchanged.
---
 src/styles/global.css | 15 +++++++++------
 src/styles/tokens.css |  6 ++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 62803ad..e61f14a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -409,18 +409,21 @@ svg {
     );
 }
 [data-theme="light"] .site-bg__scrim {
+  /* Light mode needs a much heavier wash than dark — the sandstone board has
+     bright AND mid-tone areas that wreck text contrast. Keep it a faint ghost
+     behind content (dark mode stays the showcase). */
   background:
     linear-gradient(
       90deg,
-      rgba(246, 248, 251, 0.86) 0%,
-      rgba(246, 248, 251, 0.56) 44%,
-      rgba(246, 248, 251, 0.4) 100%
+      rgba(246, 248, 251, 0.96) 0%,
+      rgba(246, 248, 251, 0.9) 50%,
+      rgba(246, 248, 251, 0.86) 100%
     ),
     linear-gradient(
       180deg,
-      rgba(246, 248, 251, 0.22) 0%,
-      rgba(246, 248, 251, 0.54) 58%,
-      rgba(246, 248, 251, 0.82) 100%
+      rgba(246, 248, 251, 0.5) 0%,
+      rgba(246, 248, 251, 0.66) 55%,
+      rgba(246, 248, 251, 0.9) 100%
     );
 }
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index efe37c5..07a9453 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -78,8 +78,10 @@
   --border-strong: rgba(2, 6, 23, 0.18);
 
   --text: #0e1726;
-  --text-dim: #475467;
-  --text-faint: #6b7689;
+  /* Darker secondary/tertiary text — the body sits over the (light) board image,
+     so these need more contrast than on a flat page to stay readable. */
+  --text-dim: #2c3a4d;
+  --text-faint: #46546a;
 
   /* Accent — same electric cyan→magenta as dark, dropped in value for contrast
      on the light sandstone board. */