Implement comprehensive dark/light mode overhaul for admin panel

- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes.
- Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`.
- Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors.
- Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system.
- Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes.
- Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.

assets/admin/components/appointments/ServiceSlotPicker.tsx

@@ -130,7 +130,7 @@ export default function ServiceSlotPicker({
                         border: active ? '1px solid var(--primary)' : '1px solid var(--border-2)',
                         background: active ? 'var(--primary)' : 'transparent',
                       }}>
-                        {active && <span style={{ width: 8, height: 8, background: '#fff', borderRadius: 2 }} />}
+                        {active && <span style={{ width: 8, height: 8, background: 'var(--surface)', borderRadius: 2 }} />}
                       </span>
                       {s.name}
                     </span>
@@ -182,7 +182,7 @@ export default function ServiceSlotPicker({
                 <button type="button" aria-label={`حذف ${s.name}`} onClick={() => remove(s.uuid)}
                   style={{
                     display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 999, flexShrink: 0,
-                    border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff',
+                    border: 'none', cursor: 'pointer', background: 'var(--primary)', color: 'var(--on-primary)',
                     fontSize: 13, lineHeight: 1, fontFamily: 'inherit',
                   }}>×</button>
               </div>
@@ -211,7 +211,7 @@ export default function ServiceSlotPicker({
                     style={{
                       fontSize: 13, padding: '6px 12px', borderRadius: 'var(--r-sm)', cursor: 'pointer', fontFamily: 'inherit',
                       border: active ? '1px solid var(--primary)' : '1px solid var(--border)',
-                      background: active ? 'var(--primary)' : 'var(--surface)', color: active ? '#fff' : 'var(--text)',
+                      background: active ? 'var(--primary)' : 'var(--surface)', color: active ? 'var(--on-primary)' : 'var(--text)',
                     }}>
                     {s.start_time}
                   </button>