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/ui/AppointmentStatusDropdown.tsx

@@ -8,15 +8,15 @@ import ConfirmAppointmentModal from '../appointments/ConfirmAppointmentModal';
 
 // Labels follow the Figma نوبت‌ها design (ثبت شده / قطعی شده / ویزیت شده …).
 export const STATUS_META: Record<string, { label: string; color: string }> = {
-  pending:              { label: 'ثبت شده',         color: '#3b82f6' },
-  confirmed:            { label: 'قطعی شده',        color: '#14b8a6' },
-  following_up:         { label: 'در حال پیگیری',   color: '#f59e0b' },
-  salon:                { label: 'سالن',             color: '#8b5cf6' },
-  completed:            { label: 'ویزیت شده',       color: '#22c55e' },
-  cancelled_by_doctor:  { label: 'لغو شده',          color: '#ef4444' },
-  cancelled_by_user:    { label: 'لغو توسط بیمار',  color: '#ef4444' },
-  no_show:              { label: 'غیبت',             color: '#9ca3af' },
-  expired:              { label: 'منقضی شده',        color: '#9ca3af' },
+  pending:              { label: 'ثبت شده',         color: 'var(--info)' },
+  confirmed:            { label: 'قطعی شده',        color: 'var(--primary)' },
+  following_up:         { label: 'در حال پیگیری',   color: 'var(--warning)' },
+  salon:                { label: 'سالن',             color: 'var(--violet)' },
+  completed:            { label: 'ویزیت شده',       color: 'var(--success)' },
+  cancelled_by_doctor:  { label: 'لغو شده',          color: 'var(--danger)' },
+  cancelled_by_user:    { label: 'لغو توسط بیمار',  color: 'var(--danger)' },
+  no_show:              { label: 'غیبت',             color: 'var(--text-3)' },
+  expired:              { label: 'منقضی شده',        color: 'var(--text-3)' },
 };
 
 // Mirrors Appointment::ALLOWED_TRANSITIONS on the backend.
@@ -83,7 +83,7 @@ export default function AppointmentStatusDropdown({ uuid, currentStatus, version
     onError: (e: any) => toast.error(e?.message || 'خطا در تغییر وضعیت'),
   });
 
-  const meta = STATUS_META[currentStatus] ?? { label: currentStatus, color: '#9ca3af' };
+  const meta = STATUS_META[currentStatus] ?? { label: currentStatus, color: 'var(--text-3)' };
   const nextStatuses = TRANSITIONS[currentStatus] ?? [];
 
   function handleToggle() {
@@ -142,7 +142,7 @@ export default function AppointmentStatusDropdown({ uuid, currentStatus, version
           }}
         >
           {nextStatuses.map(s => {
-            const sm = STATUS_META[s] ?? { label: s, color: '#9ca3af' };
+            const sm = STATUS_META[s] ?? { label: s, color: 'var(--text-3)' };
             return (
               <button
                 key={s}

assets/admin/components/ui/PersianCalendar.tsx

@@ -191,7 +191,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
                     border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                     fontWeight: sel || tod ? 700 : 400,
                     background: sel ? 'var(--primary)' : tod ? 'var(--surface-2)' : 'transparent',
-                    color: sel ? '#fff' : tod ? 'var(--text)' : 'var(--text)',
+                    color: sel ? 'var(--on-primary)' : tod ? 'var(--text)' : 'var(--text)',
                     transition: 'background 0.1s',
                   }}
                   onMouseEnter={e => { if (!sel && !tod) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
@@ -216,7 +216,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
                 key={m}
                 type="button"
                 onClick={() => { setViewMonth(m); setMode('day'); }}
-                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
+                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? 'var(--on-primary)' : 'var(--text)' }}
                 onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
                 onMouseLeave={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
               >
@@ -237,7 +237,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
                 key={y}
                 type="button"
                 onClick={() => { setViewYear(y); setMode('month'); }}
-                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
+                style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? 'var(--on-primary)' : 'var(--text)' }}
                 onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
                 onMouseLeave={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'transparent'; }}
               >

assets/admin/components/ui/StatCard.tsx

@@ -33,7 +33,7 @@ export default function StatCard({ tone, label, value, icon }: Props) {
         <div
           style={{
             width: 44, height: 44, borderRadius: 12, flexShrink: 0,
-            background: c.fg, color: '#fff',
+            background: c.fg, color: 'var(--on-primary)',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}
         >

assets/admin/components/ui/appointmentStatusMeta.test.ts

@@ -23,7 +23,7 @@ describe('STATUS_META', () => {
   it.each(BACKEND_STATUSES)('has a Persian label and colour for %s', (status) => {
     expect(STATUS_META[status]).toBeDefined();
     expect(STATUS_META[status].label.trim()).not.toBe('');
-    expect(STATUS_META[status].color).toMatch(/^#[0-9a-f]{6}$/i);
+    expect(STATUS_META[status].color).toMatch(/^var\(--[a-z0-9-]+\)$/);
   });
 
   it('carries no label that is still English', () => {