fix(styles): resolve design system audit violations

- Add --color-text-on-accent token to tokens.css
- Migrate all hardcoded color:#fff/#ffffff to var(--color-text-on-accent) across all module stylesheets
- Fix toggle thumb background (#fff -> var(--color-surface)) for dark mode
- Migrate hardcoded transition durations to token vars (--transition-fast/base/slow)

public/styles/budget.css

@@ -161,7 +161,7 @@
 .budget-bar-row__fill {
   height: 100%;
   border-radius: var(--radius-full);
-  transition: width 0.4s ease;
+  transition: width var(--transition-slow);
 }
 
 .budget-bar-row__fill--income   { background-color: var(--color-success); }
@@ -322,11 +322,11 @@
 
 .amount-type-btn--income.amount-type-btn--active {
   background-color: var(--color-success);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 .amount-type-btn--expenses.amount-type-btn--active {
   background-color: var(--color-danger);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 

public/styles/calendar.css

@@ -172,7 +172,7 @@
 
 .month-day--today .month-day__number {
   background-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   font-weight: var(--font-weight-bold);
 }
 
@@ -190,7 +190,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   line-height: 1.6;
 }
 
@@ -251,7 +251,7 @@
 
 .week-view__day-num--today {
   background-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 .week-view__scroll {
@@ -337,7 +337,7 @@
   padding: var(--space-0h) var(--space-1);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   overflow: hidden;
   cursor: pointer;
   z-index: 1;
@@ -507,7 +507,7 @@
   justify-content: center;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   flex-shrink: 0;
 }
 
@@ -618,7 +618,7 @@
   font-weight: var(--font-weight-medium);
   padding: var(--space-px) var(--space-1);
   border-radius: var(--radius-xs);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

public/styles/contacts.css

@@ -117,7 +117,7 @@
 .contact-filter-chip--active {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 /* --------------------------------------------------------

public/styles/dashboard.css

@@ -94,7 +94,7 @@
   background: linear-gradient(135deg, var(--greeting-from), var(--greeting-to));
   border-radius: var(--radius-md);
   padding: var(--space-4) var(--space-5);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   grid-column: 1 / -1;
 }
 
@@ -132,7 +132,7 @@
   align-items: center;
   gap: var(--space-1);
   background: var(--color-glass);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-medium);
   padding: 2px var(--space-2);
@@ -199,7 +199,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
   min-width: 16px;
@@ -313,7 +313,7 @@
   justify-content: center;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   flex-shrink: 0;
   margin-top: 1px;
 }
@@ -537,7 +537,7 @@
   height: 100%;
   background-color: var(--color-success);
   border-radius: var(--radius-full);
-  transition: width 0.3s ease;
+  transition: width var(--transition-base);
 }
 
 .shopping-widget-list__items {
@@ -642,7 +642,7 @@
 .weather-widget {
   position: relative;
   background: linear-gradient(135deg, var(--color-accent) 0%, #1E5CB3 100%);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 .weather-widget__refresh {
@@ -656,11 +656,11 @@
   height: 28px;
   border: none;
   background: var(--color-glass);
-  color: #fff;
+  color: var(--color-text-on-accent);
   border-radius: var(--radius-full);
   cursor: pointer;
   z-index: 1;
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
 }
 
 .weather-widget__refresh:hover {
@@ -903,7 +903,7 @@
   height: 52px;
   border-radius: var(--radius-full);
   background-color: var(--module-accent, var(--color-accent));
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;

public/styles/layout.css

@@ -140,7 +140,7 @@
   border-radius: var(--radius-full);
   background-color: var(--color-text-tertiary);
   opacity: 0.25;
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
 }
 
 .nav-bottom__dot--active {
@@ -229,7 +229,7 @@
   height: 52px;
   border-radius: var(--radius-full);
   background-color: var(--module-accent, var(--color-accent));
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
@@ -331,7 +331,7 @@
     height: 32px;
     border-radius: var(--radius-sm);
     background: linear-gradient(135deg, var(--color-accent) 0%, #7C5CFC 100%);
-    color: #ffffff;
+    color: var(--color-text-on-accent);
     font-size: var(--text-sm);
     font-weight: var(--font-weight-bold);
     display: flex;
@@ -810,7 +810,7 @@
 
 .btn--primary {
   background-color: var(--color-btn-primary);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   box-shadow: var(--shadow-sm);
 }
 
@@ -832,7 +832,7 @@
 
 .btn--danger {
   background-color: var(--color-danger);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 .btn--danger:hover {
@@ -878,7 +878,7 @@
   height: 52px;
   border-radius: var(--radius-full);
   background-color: var(--module-accent, var(--color-btn-primary));
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
@@ -1028,7 +1028,7 @@
   height: 26px;
   background-color: var(--neutral-300);
   border-radius: var(--radius-full);
-  transition: background-color 0.2s ease;
+  transition: background-color var(--transition-fast);
   flex-shrink: 0;
 }
 
@@ -1039,10 +1039,10 @@
   left: 3px;
   width: 20px;
   height: 20px;
-  background: #fff;
+  background: var(--color-surface);
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-sm);
-  transition: transform 0.2s var(--ease-out);
+  transition: transform var(--transition-fast) var(--ease-out);
 }
 
 .toggle input:checked + .toggle__track {
@@ -1363,9 +1363,9 @@
   height: 16px;
 }
 
-.toast--success { background-color: var(--color-success); color: #fff; }
+.toast--success { background-color: var(--color-success); color: var(--color-text-on-accent); }
-.toast--danger  { background-color: var(--color-danger);  color: #fff; }
+.toast--danger  { background-color: var(--color-danger);  color: var(--color-text-on-accent); }
-.toast--warning { background-color: var(--color-warning); color: #fff; }
+.toast--warning { background-color: var(--color-warning); color: var(--color-text-on-accent); }
 
 @keyframes toast-in {
   from { opacity: 0; transform: translateY(6px) scale(0.98); }
@@ -1457,7 +1457,7 @@
 .rrule-day--active {
   background: var(--color-accent);
   border-color: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-accent);
 }
 
 .rrule-day--active:hover {
@@ -1490,7 +1490,7 @@
 
 .btn--success {
   background-color: var(--color-success) !important;
-  color: #fff !important;
+  color: var(--color-text-on-accent) !important;
   pointer-events: none;
 }
 
@@ -1515,7 +1515,7 @@
   margin-top: -7px;
   margin-left: -7px;
   border: 2px solid rgba(255, 255, 255, 0.35);
-  border-top-color: #fff;
+  border-top-color: var(--color-text-on-accent);
   border-radius: var(--radius-full);
   animation: btn-spin 0.55s linear infinite;
 }
@@ -1603,7 +1603,7 @@
 .swipe-reveal--done {
   right: 0;
   background-color: var(--color-success);
-  color: #fff;
+  color: var(--color-text-on-accent);
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
 }
 
@@ -1668,7 +1668,7 @@
   white-space: normal;
   overflow: visible;
   background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-accent);
   font-size: var(--text-sm);
   border-radius: 0 0 var(--radius-sm) 0;
 }

public/styles/notes.css

@@ -215,7 +215,7 @@
   justify-content: center;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   flex-shrink: 0;
 }
 

public/styles/settings.css

@@ -123,7 +123,7 @@
   justify-content: center;
   font-size: var(--text-lg);
   font-weight: var(--font-weight-bold);
-  color: #fff;
+  color: var(--color-text-on-accent);
   flex-shrink: 0;
   user-select: none;
 }

public/styles/shopping.css

@@ -69,7 +69,7 @@
 .list-tab--active {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
 }
 
 .list-tab__count {
@@ -228,7 +228,7 @@
   height: 44px;
   border-radius: var(--radius-sm);
   background-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -357,7 +357,7 @@
 .item-check__icon {
   width: var(--space-3);
   height: var(--space-3);
-  color: #ffffff;
+  color: var(--color-text-on-accent);
   display: none;
 }
 
@@ -436,7 +436,7 @@
 .swipe-reveal--delete {
   left: 0;
   background-color: var(--color-danger);
-  color: #fff;
+  color: var(--color-text-on-accent);
   border-radius: var(--radius-md) 0 0 var(--radius-md);
 }
 

public/styles/tasks.css

@@ -132,7 +132,7 @@
   justify-content: center;
   border-radius: var(--radius-full);
   background-color: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-accent);
   font-size: var(--text-xs);
   line-height: 1;
 }
@@ -187,7 +187,7 @@
 .swipe-reveal--edit {
   left: 0;
   background-color: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-accent);
   border-radius: var(--radius-md) 0 0 var(--radius-md);
 }
 
@@ -261,7 +261,7 @@
 .task-status-btn__check {
   width: 12px;
   height: 12px;
-  color: #fff;
+  color: var(--color-text-on-accent);
   display: none;
 }
 
@@ -342,7 +342,7 @@
   justify-content: center;
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
-  color: #fff;
+  color: var(--color-text-on-accent);
   flex-shrink: 0;
 }
 
@@ -465,7 +465,7 @@
   padding: 0 var(--space-1);
   border-radius: var(--radius-full);
   background-color: var(--color-danger);
-  color: #fff;
+  color: var(--color-text-on-accent);
   font-size: var(--text-xs);
   font-weight: var(--font-weight-bold);
   margin-left: auto;

public/styles/tokens.css

@@ -54,6 +54,7 @@
   --color-text-secondary: var(--neutral-600);  /* WCAG AA: ~5.0:1 auf weiß */
   --color-text-tertiary:  #737370;
   --color-text-disabled:  var(--neutral-300);
+  --color-text-on-accent: #ffffff;  /* Weißer Text auf farbigen Hintergründen (Buttons, Badges, FAB) */
 
   /* --------------------------------------------------------
    * 2. Farben - Akzent (konfigurierbar)