From bf494bb0436d3378ebb4bc0a470fe58d76724c2c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 1 Apr 2026 06:14:51 +0000
Subject: [PATCH] fix: use dark text on blue accent step-number badges across
 all flow types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#60a5fa (electric blue) is a light colour — near-white and muted-foreground
text on it produced ~1.9–2.1:1 contrast, well below WCAG AA.

- TreeNavigationPage: option number badges + timer badge → text-[#0e1016]
- StepChecklist: active step was blue badge on blue row (invisible); now
  inverts to navy circle with blue number when current, dark-on-blue otherwise
- StepDetail: step number circle → text-[#0e1016] (was near-white on light blue)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/procedural/StepChecklist.tsx | 5 ++++-
 frontend/src/components/procedural/StepDetail.tsx    | 2 +-
 frontend/src/pages/TreeNavigationPage.tsx            | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 3bdd4942..1fc6af91 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -52,7 +52,10 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
               ) : (
                 <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
               )}
-              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
+              <span className={cn(
+                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold',
+                isCurrent ? 'bg-[#0e1016] text-accent' : 'bg-accent text-[#0e1016]'
+              )}>
                 {index + 1}
               </span>
               <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
diff --git a/frontend/src/components/procedural/StepDetail.tsx b/frontend/src/components/procedural/StepDetail.tsx
index d64c8e72..986b23b9 100644
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -91,7 +91,7 @@ export function StepDetail({
     <div className="space-y-4">
       {/* Step header */}
       <div className="flex items-start gap-3">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-foreground">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-bold text-[#0e1016]">
           {stepNumber}
         </span>
         <div className="min-w-0 flex-1">
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 643c3c75..ceb7c20f 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -687,7 +687,7 @@ export function TreeNavigationPage() {
           <div className="flex items-center gap-3">
             <h1 className="text-xl font-bold font-heading text-foreground">{tree.name}</h1>
             {timerDisplay && (
-              <span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-muted-foreground">
+              <span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-[#0e1016]">
                 <Clock className="h-4 w-4" />
                 {timerDisplay}
               </span>
@@ -874,7 +874,7 @@ export function TreeNavigationPage() {
                         <Spinner size="sm" className="h-4 w-4 border-t-foreground" />
                       </span>
                     ) : (
-                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-[#0e1016]">
                         {index + 1}
                       </span>
                     )