From a0815ced5d5a21b09b1d2b67bade09238e2eba5d Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Sat, 2 May 2026 21:27:20 -0500
Subject: [PATCH] fix: dark-mode contrast on blue pills, brand logo, stable
 channel chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: stable channel chip referenced --color-primary, which
  is undefined; falling back to the browser-default visited-link color
  rendered it purple. Switch to the actually-defined --color-accent.
- css/style.css: lift dark-mode pill backgrounds (--color-accent-soft,
  --color-Tracking, --color-Title) so pills have a visible edge against
  the near-black page bg (~1.5:1 → ~2.2:1 adjacency contrast). Accent
  text on the lighter pills stays at 3.6:1, fine for short labels.
- css/style.css: brand-logo's navy <rect> blends into the page bg in
  dark mode; override its fill to a lighter steel-blue so the rounded
  square stays visible.

Light mode is untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 css/style.css | 30 ++++++++++++++++++++----------
 index.html    |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/css/style.css b/css/style.css
index d88f298..12cf773 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1014,16 +1014,16 @@ tr:nth-child(even) td {
     --color-text-muted: #8b949e;
     --color-text-light: #6e7681;
     --color-border: #30363d;
-    
+
     --color-accent: #58a6ff;
     --color-accent-hover: #3d84c2;
-    --color-accent-soft: #1a3550;
+    --color-accent-soft: #1f4d7a;
     --color-accent-dark: #79c0ff;
-    
-    --color-Tracking: #1e3a5f;
+
+    --color-Tracking: #264e7d;
     --color-Revision: #134a29;
     --color-Status: #5c4a00;
-    --color-Title: #2d3440;
+    --color-Title: #3a4659;
   }
 }
 
@@ -1036,16 +1036,26 @@ html[data-theme="dark"] {
   --color-text-muted: #8b949e;
   --color-text-light: #6e7681;
   --color-border: #30363d;
-  
+
   --color-accent: #58a6ff;
   --color-accent-hover: #3d84c2;
-  --color-accent-soft: #1a3550;
+  --color-accent-soft: #1f4d7a;
   --color-accent-dark: #79c0ff;
-  
-  --color-Tracking: #1e3a5f;
+
+  --color-Tracking: #264e7d;
   --color-Revision: #134a29;
   --color-Status: #5c4a00;
-  --color-Title: #2d3440;
+  --color-Title: #3a4659;
+}
+
+/* Brand logo's navy bg-rect blends into the dark page bg; lift it. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo > rect {
+    fill: #2a5a8a;
+  }
+}
+html[data-theme="dark"] .brand-logo > rect {
+  fill: #2a5a8a;
 }
 
 /* ── Pain badge dark mode ── */
diff --git a/index.html b/index.html
index 20b66d5..2c746cb 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
     .channel-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
     .channel-row a { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text); }
     .channel-row a:hover { background: var(--color-bg-subtle); }
-    .channel-row .channel-stable { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
+    .channel-row .channel-stable { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
     .channel-row .channel-beta, .channel-row .channel-alpha { color: var(--color-text-muted); }
     .install-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); }
     .install-card { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-subtle); }