From c37fe8c4b39ea2edd7ce451340ea50ce8607bbef Mon Sep 17 00:00:00 2001
From: pthmas <9058370+pthmas@users.noreply.github.com>
Date: Tue, 31 Mar 2026 17:03:32 +0200
Subject: [PATCH 1/2] Make dark mode gray text white

---
 frontend/src/index.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index f3d843e..aaa61ee 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -20,12 +20,13 @@
     --color-text-subtle: 148 163 184;
     --color-text-faint: 100 116 139;
     --color-border: 45 45 58;
-    --color-gray-200: 226 232 240;
-    --color-gray-300: 203 213 225;
-    --color-gray-400: 148 163 184;
-    --color-gray-500: 107 114 128;
-    --color-gray-600: 75 85 99;
-    --color-gray-700: 55 65 81;
+    /* Keep legacy text-gray-* usage readable on branded dark backgrounds. */
+    --color-gray-200: 248 250 252;
+    --color-gray-300: 248 250 252;
+    --color-gray-400: 248 250 252;
+    --color-gray-500: 248 250 252;
+    --color-gray-600: 248 250 252;
+    --color-gray-700: 248 250 252;
   }
 
   :root[data-theme='light'] {

From 17d31d3b46547a146e1a5dc9f26a6dd459bc947e Mon Sep 17 00:00:00 2001
From: pthmas <9058370+pthmas@users.noreply.github.com>
Date: Wed, 1 Apr 2026 14:29:26 +0200
Subject: [PATCH 2/2] Scope dark gray override to text

---
 frontend/src/index.css | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index aaa61ee..d063cfd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -20,13 +20,12 @@
     --color-text-subtle: 148 163 184;
     --color-text-faint: 100 116 139;
     --color-border: 45 45 58;
-    /* Keep legacy text-gray-* usage readable on branded dark backgrounds. */
-    --color-gray-200: 248 250 252;
-    --color-gray-300: 248 250 252;
-    --color-gray-400: 248 250 252;
-    --color-gray-500: 248 250 252;
-    --color-gray-600: 248 250 252;
-    --color-gray-700: 248 250 252;
+    --color-gray-200: 226 232 240;
+    --color-gray-300: 203 213 225;
+    --color-gray-400: 148 163 184;
+    --color-gray-500: 107 114 128;
+    --color-gray-600: 75 85 99;
+    --color-gray-700: 55 65 81;
   }
 
   :root[data-theme='light'] {
@@ -57,6 +56,18 @@
   }
 }
 
+@layer utilities {
+  /* Keep legacy text-gray-* readable in dark mode without affecting bg/border gray utilities. */
+  :root:not([data-theme='light']) .text-gray-200,
+  :root:not([data-theme='light']) .text-gray-300,
+  :root:not([data-theme='light']) .text-gray-400,
+  :root:not([data-theme='light']) .text-gray-500,
+  :root:not([data-theme='light']) .text-gray-600,
+  :root:not([data-theme='light']) .text-gray-700 {
+    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+  }
+}
+
 @layer components {
   body {
     @apply font-sans antialiased transition-colors duration-200;