From aac70ec76511a55a0e1891a5c44c4112f74a0a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 5 Jun 2026 12:58:33 +0200
Subject: [PATCH] fix(insights): route medication status counts through
 semantic colour tokens

The taken / skipped / missed counts on the medications page used raw
Dracula green / orange / red, which clear only ~1.9:1 on the white card
in light mode and fail WCAG AA for small text. Route them through the
success / warning / destructive tokens, which carry the light-mode
overrides that clear AA in both themes. The word labels stay as the
non-colour differentiator.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app/insights/medications/page.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/insights/medications/page.tsx b/src/app/insights/medications/page.tsx
index 7af41c192..fd74c703b 100644
--- a/src/app/insights/medications/page.tsx
+++ b/src/app/insights/medications/page.tsx
@@ -258,17 +258,15 @@ export default function InsightsMedikamentePage() {
                 </div>
                 <div className="text-muted-foreground flex justify-between text-xs">
                   <span>
-                    <span className="text-dracula-green">{med.taken7}</span>{" "}
+                    <span className="text-success">{med.taken7}</span>{" "}
                     {t("insights.taken")}
                   </span>
                   <span>
-                    <span className="text-dracula-orange">
-                      {med.skipped7}
-                    </span>{" "}
+                    <span className="text-warning">{med.skipped7}</span>{" "}
                     {t("insights.skipped")}
                   </span>
                   <span>
-                    <span className="text-dracula-red">{med.missed7}</span>{" "}
+                    <span className="text-destructive">{med.missed7}</span>{" "}
                     {t("insights.missed")}
                   </span>
                 </div>