From a21cd99664b7ef75774f313b9728b4484bc9e107 Mon Sep 17 00:00:00 2001
From: Oberonskii <oberonskii@users.noreply.github.com>
Date: Tue, 21 Jul 2026 20:58:49 +0200
Subject: [PATCH] fix: Improve How It Works heading and step-card contrast for
 dark mode

- Add 'var(--card-text)' color to heading, step titles, and descriptions
  for WCAG AA contrast compliance in both light and dark themes
- Remove 'opacity: 0.8' on step descriptions that reduced legibility
- Use 'var(--card-bg)' with proper theme-aware background instead of
  the barely-visible rgba fallback on step cards

Closes #276
---
 frontend/src/components/HowItWorks.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/HowItWorks.tsx b/frontend/src/components/HowItWorks.tsx
index fa963903..69a94479 100644
--- a/frontend/src/components/HowItWorks.tsx
+++ b/frontend/src/components/HowItWorks.tsx
@@ -28,7 +28,7 @@ export const HowItWorks: React.FC = () => {
         borderTop: '1px solid var(--border-color, rgba(128, 128, 128, 0.2))',
       }}
     >
-      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.2rem', fontWeight: '600' }}>
+      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.2rem', fontWeight: '600', color: 'var(--card-text)' }}>
         How It Works
       </h3>
 
@@ -40,24 +40,25 @@ export const HowItWorks: React.FC = () => {
               flex: '1 1 250px',
               minWidth: '250px',
               padding: '24px 20px',
-              background: 'var(--card-bg, rgba(128, 128, 128, 0.05))',
+              background: 'var(--card-bg)',
               borderRadius: 'var(--radius-md, 8px)',
               border: '1px solid var(--border-color, rgba(128, 128, 128, 0.1))',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
               textAlign: 'center',
+              color: 'var(--card-text)',
             }}
           >
             <div style={{ color: '#818cf8', marginBottom: '16px' }}>{step.icon}</div>
-            <h4 style={{ margin: '0 0 8px 0', fontSize: '1.05rem', fontWeight: '600' }}>
+            <h4 style={{ margin: '0 0 8px 0', fontSize: '1.05rem', fontWeight: '600', color: 'var(--card-text)' }}>
               {step.title}
             </h4>
             <p
               style={{
                 margin: 0,
                 fontSize: 'var(--font-size-sm, 0.875rem)',
-                opacity: 0.8,
+                color: 'var(--card-text)',
                 lineHeight: '1.5',
               }}
             >