From f219072881c611bee3c38e04790e3642b91e1390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 1 Jul 2026 23:44:55 +0200
Subject: [PATCH] style(theme): soften the light-mode neutral spine

Lift the light theme off the pure-black-on-white extreme. Foreground
moves from a near-black L0.24 to a dark tinted neutral (foreground-on-
card drops from 16.5:1 to a comfortable 13.2:1), the card leaves pure
white so surfaces separate by lightness, borders lift to stay visible,
and every neutral carries a faint mauve tint toward the brand hue. Adds
an Alucard light value for the yellow accent so charts stop glaring.
Accents, chart hues, and the dark theme are unchanged. themeColor for
light matches the new background.
---
 src/app/globals.css | 66 ++++++++++++++++++++++++++-------------------
 src/app/layout.tsx  |  2 +-
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 95ee9ba77..acc5100af 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -288,25 +288,34 @@
 
 /* ── Light mode (Alucard — official Dracula light) ── */
 :root.light {
-  --background: #f5f5f5;
-  --foreground: #1f1f1f;
-  --card: #ffffff;
-  --card-foreground: #1f1f1f;
-  --popover: #ffffff;
-  --popover-foreground: #1f1f1f;
+  /*
+   * Neutral spine (retuned v1.26.0). Softened off the pure-white / pure-black
+   * high-contrast set — a faint mauve tint (hue ~295–300) runs through every
+   * neutral so the light theme reads gentle rather than harsh. Foreground is a
+   * tinted near-black (not #000), dropping fg-on-card from ~16.5:1 to a
+   * comfortable ~13:1. Accent + semantic tokens below stay as the Alucard
+   * AA-tuned set. oklch throughout so lightness steps are perceptually even.
+   */
+  --background: oklch(0.964 0.004 300);
+  --foreground: oklch(0.3 0.012 295);
+  --card: oklch(0.988 0.003 300);
+  --card-foreground: oklch(0.3 0.012 295);
+  --popover: oklch(0.992 0.002 300);
+  --popover-foreground: oklch(0.3 0.012 295);
   --primary: #644ac9;
-  --primary-foreground: #ffffff;
-  --secondary: #dcdeef;
-  --secondary-foreground: #1f1f1f;
-  --muted: #dcdeef;
-  --muted-foreground: #5b6273;
-  /* Inactive tab-trigger text — the light muted-foreground already clears
-   * AA (4.58:1) on the light muted strip, so the token mirrors it. */
-  --tab-inactive: #5b6273;
-  /* Light-theme counterpart of the NativeSelect chevron (see dark block). */
-  --native-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6273' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-  --accent: #dcdeef;
-  --accent-foreground: #1f1f1f;
+  --primary-foreground: oklch(0.99 0.002 300);
+  --secondary: oklch(0.95 0.008 300);
+  --secondary-foreground: oklch(0.3 0.012 295);
+  --muted: oklch(0.955 0.006 300);
+  --muted-foreground: oklch(0.515 0.02 295);
+  /* Inactive tab-trigger text — the light muted-foreground clears AA on the
+   * light muted strip, so the token mirrors it. */
+  --tab-inactive: oklch(0.515 0.02 295);
+  /* Light-theme counterpart of the NativeSelect chevron (see dark block).
+   * Stroke tracks the muted-foreground hex (#686572). */
+  --native-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23686572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  --accent: oklch(0.95 0.008 300);
+  --accent-foreground: oklch(0.3 0.012 295);
   --destructive: #cb3a2a;
   /*
    * Alucard light-mode overrides for the semantic tokens — straight Dracula
@@ -318,22 +327,23 @@
   --info: #036a96;
   /* White glyph on the darker light-mode green — ~6.1:1 on `#14720a`. */
   --success-foreground: #ffffff;
-  --border: #cfcfde;
-  --input: #cfcfde;
-  --ring: #644ac9;
+  --border: oklch(0.885 0.008 300);
+  --input: oklch(0.87 0.009 300);
+  --ring: oklch(0.6 0.13 292);
   --chart-1: #644ac9;
   --chart-2: #14720a;
   --chart-3: #a3134d;
   --chart-4: #036a96;
   --chart-5: #a34d14;
-  --sidebar: #ffffff;
-  --sidebar-foreground: #1f1f1f;
+  --dracula-yellow: #846e15;
+  --sidebar: oklch(0.988 0.003 300);
+  --sidebar-foreground: oklch(0.3 0.012 295);
   --sidebar-primary: #644ac9;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #dcdeef;
-  --sidebar-accent-foreground: #1f1f1f;
-  --sidebar-border: #cfcfde;
-  --sidebar-ring: #644ac9;
+  --sidebar-primary-foreground: oklch(0.99 0.002 300);
+  --sidebar-accent: oklch(0.95 0.008 300);
+  --sidebar-accent-foreground: oklch(0.3 0.012 295);
+  --sidebar-border: oklch(0.885 0.008 300);
+  --sidebar-ring: oklch(0.6 0.13 292);
 
   /*
    * v1.18.7 — wellness-ring per-metric arc colours (Alucard light), CALM pass.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index debecd730..1322ebb68 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -88,7 +88,7 @@ export const viewport: Viewport = {
   // `--background` from `app/globals.css` for each theme so the bar
   // edge never seams against the page on cold paint.
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: light)", color: "#f3f2f5" },
     { media: "(prefers-color-scheme: dark)", color: "#282a36" },
   ],
 };