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/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--danger  { background-color: var(--color-danger);  color: #fff; }
-.toast--warning { background-color: var(--color-warning); color: #fff; }
+.toast--success { background-color: var(--color-success); color: var(--color-text-on-accent); }
+.toast--danger  { background-color: var(--color-danger);  color: var(--color-text-on-accent); }
+.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;
 }