fix: improve badge text color contrast for WCAG AA compliance

Added CSS custom properties --type-{name}-text for each article type with appropriate text colors per theme:
- Dark mode: all types use black text (#000000) for sufficient contrast
- Light mode: tech and photo types use white text (#ffffff), life/quote/link use black text (#000000)

Updated article-header.html and article-card.html to use color: var(--type-{name}-text) instead of hardcoded text-white class.

Improves contrast ratios:
- Quote type dark mode: 1.34:1 → 15.66:1 (white on #00ff88 was failing WCAG AA)
- All other types now pass 4.5:1 minimum for WCAG AA small text

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2 files changed, 3 insertions, 3 deletions

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-card.html b/themes/danix-xyz-hacker/layouts/partials/article-card.html
index 0f5cfb9..d803464 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-card.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-card.html
@@ -41,8 +41,8 @@
     <!-- Type badge pill overlay -->
     {{ if $typeData }}
     <div
-      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity"
-      style="background-color: var(--type-{{ $articleType }});"
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
+      style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
     >
       {{ i18n $articleType }}
     </div>
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html
index 63b2a97..94c78a5 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html
@@ -63,7 +63,7 @@
 
     <!-- Type badge -->
     {{ if and $typeData $hasType }}
-    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200 text-white" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }});">
+    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);">
       {{ i18n $articleType }}
     </span>
     {{ end }}