diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 4b612df..14e2e26 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -4437,6 +4437,16 @@ p:last-child { margin-bottom: 0; }
   user-select: none;
   overflow: visible;
 }
+/* SVG text / lines resolved from CSS design tokens so colours are correct
+   at first paint (before the JS animator fires) and update instantly on
+   theme toggle — CSS presentation-attribute override takes priority over
+   the hardcoded fill="…" attributes in the SVG markup. */
+.dashboard-chart .ct,
+.dashboard-chart .cv       { fill: var(--color-text); }
+.dashboard-chart .cl       { fill: var(--color-text-muted); }
+.dashboard-chart .grid-line { stroke: var(--color-border); }
+.dashboard-chart #pie-center      { fill: var(--color-bg); stroke: var(--color-border); }
+.dashboard-chart #pie-center-text { fill: var(--color-text); }
 /* Reduced-motion: JS already checks the media query, belt-and-suspenders */
 @media (prefers-reduced-motion: reduce) {
   .dashboard-chart .bar,