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/pages/MyPatientsPage.tsx

@@ -901,7 +901,7 @@ function MyPatientsPageInner() {
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "center",
-                                    color: "#fff",
+                                    color: "var(--on-primary)",
                                     fontWeight: 700,
                                     fontSize: 16,
                                 }}
@@ -1066,11 +1066,11 @@ function MyPatientsPageInner() {
                             {selectedPatientName}
                         </span>
                         {hasUnpaid ? (
-                            <span style={{ background: "rgba(255,192,81,0.15)", color: "#f59e0b", fontSize: 14, fontWeight: 500, padding: "4px 12px", borderRadius: 8 }}>
+                            <span style={{ background: "rgba(255,192,81,0.15)", color: "var(--warning)", fontSize: 14, fontWeight: 500, padding: "4px 12px", borderRadius: 8 }}>
                                 تکمیل نشده
                             </span>
                         ) : (
-                            <span style={{ background: "rgba(60,154,79,0.15)", color: "#3C9A4F", fontSize: 14, fontWeight: 500, padding: "4px 12px", borderRadius: 8 }}>
+                            <span style={{ background: "rgba(60,154,79,0.15)", color: "var(--success)", fontSize: 14, fontWeight: 500, padding: "4px 12px", borderRadius: 8 }}>
                                 تکمیل شده
                             </span>
                         )}
@@ -1089,12 +1089,12 @@ function MyPatientsPageInner() {
                 {/* وسط: شماره تماس و تاریخ تشکیل پرونده */}
                 <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                     <BannerInfoRow
-                        icon={<PhoneArrowUpRightIcon style={{ width: 20, color: "#F17732" }} />}
+                        icon={<PhoneArrowUpRightIcon style={{ width: 20, color: "var(--accent)" }} />}
                         label="شماره تماس:"
                         value={<span dir="ltr">{selectedPatientPhone}</span>}
                     />
                     <BannerInfoRow
-                        icon={<CalendarDaysIcon style={{ width: 20, color: "#F17732" }} />}
+                        icon={<CalendarDaysIcon style={{ width: 20, color: "var(--accent)" }} />}
                         label="تاریخ تشکیل پرونده:"
                         value={formatDate(selectedRecord.created_at)}
                     />
@@ -1115,7 +1115,7 @@ function MyPatientsPageInner() {
                         <button
                             onClick={() => toast.info("امکان یادداشت به‌زودی اضافه می‌شود")}
                             style={{
-                                background: "#F17732", color: "#fff", border: "none", cursor: "pointer",
+                                background: "var(--accent)", color: "var(--on-primary)", border: "none", cursor: "pointer",
                                 display: "inline-flex", alignItems: "center", gap: 6,
                                 padding: "8px 16px", borderRadius: 12, fontSize: 15, fontWeight: 500,
                             }}
@@ -1714,7 +1714,7 @@ function patientAvatar(_name: string, size = 32) {
             style={{
                 width: size, height: size, borderRadius: "50%", flexShrink: 0,
                 background: "var(--accent, #F17732)",
-                color: "#fff", display: "grid", placeItems: "center",
+                color: "var(--on-primary)", display: "grid", placeItems: "center",
             }}
         >
             <UserIcon style={{ width: size * 0.6, height: size * 0.6 }} />
@@ -1882,8 +1882,8 @@ function VisitSummaryCard({
                     }}
                 >
                     {paid
-                        ? <CheckCircleIcon style={{ width: 20, color: "#3C9A4F" }} />
-                        : <ClockIcon style={{ width: 20, color: "#F17732" }} />}
+                        ? <CheckCircleIcon style={{ width: 20, color: "var(--success)" }} />
+                        : <ClockIcon style={{ width: 20, color: "var(--accent)" }} />}
                 </div>
             </div>