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}