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/PatientDetailPage.tsx

@@ -195,10 +195,10 @@ export default function PatientDetailPage() {
               display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
               padding: '10px 14px', border: 'none', background: 'none', cursor: 'pointer',
               fontFamily: 'inherit', fontSize: 13, fontWeight: on ? 700 : 500,
-              color: on ? '#5559ce' : '#616161',
-              borderBottom: `2px solid ${on ? '#5559ce' : 'transparent'}`,
+              color: on ? 'var(--primary)' : 'var(--text-2)',
+              borderBottom: `2px solid ${on ? 'var(--primary)' : 'transparent'}`,
             }}>
-              {t.icon(on ? '#5559ce' : '#616161')} {t.label}
+              {t.icon(on ? 'var(--primary)' : 'var(--text-2)')} {t.label}
             </button>
           );
         })}
@@ -237,8 +237,8 @@ export default function PatientDetailPage() {
               <button className={sessionFilter === 'archived' ? 'on' : ''} onClick={() => setSessionFilter('archived')}>آرشیو</button>
             </div>
             {canUpdate && (
-              <Link to={`/admin/patients/${uuid}/session/new`} className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, background: '#5559ce', color: '#fff', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
-                <AddTurn color="#fff" /> سرویس جدید
+              <Link to={`/admin/patients/${uuid}/session/new`} className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, background: 'var(--primary)', color: 'var(--on-primary)', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
+                <AddTurn color="var(--on-primary)" /> سرویس جدید
               </Link>
             )}
           </div>
@@ -485,9 +485,9 @@ interface Note { uuid: string; body: string; pinned: boolean; author: string | n
 /** آیکن سنجاق (پین) — پرشده وقتی یادداشت پین است. Heroicons سنجاق ندارد. */
 function PinIcon({ filled, color, size = 15 }: { filled?: boolean; color: string; size?: number }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? color : 'none'} stroke={color} strokeWidth={filled ? 0 : 1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? color : 'none'} stroke="currentColor" strokeWidth={filled ? 0 : 1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ color }}>
       <path d="M9 4h6l-1 5 3 3v2H7v-2l3-3-1-5Z" />
-      <line x1="12" y1="14" x2="12" y2="21" stroke={color} strokeWidth={1.8} />
+      <line x1="12" y1="14" x2="12" y2="21" stroke="currentColor" strokeWidth={1.8} />
     </svg>
   );
 }
@@ -988,16 +988,16 @@ function AppointmentsTab({ uuid, q }: {
           <div style={{ width: 320, maxWidth: '100%' }}>
             <SearchableSelect options={APPT_SORT_OPTS} value={sort} onChange={(v) => setSort(String(v ?? 'newest'))} height={48} />
           </div>
-          <button type="button" aria-label="فیلتر" className="flex items-center justify-center rounded-[4px] cursor-pointer" style={{ width: 62, height: 48, border: '1px solid #5559ce', background: 'transparent' }}>
-            <TurnsFilter color="#5559ce" />
+          <button type="button" aria-label="فیلتر" className="flex items-center justify-center rounded-[4px] cursor-pointer" style={{ width: 62, height: 48, border: '1px solid var(--primary)', background: 'transparent' }}>
+            <TurnsFilter color="var(--primary)" />
           </button>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <Link to="/admin/appointments/reserve" className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, border: '1px solid #5559ce', color: '#5559ce', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
-            <AddTurn color="#5559ce" /> نوبت رزرو
+          <Link to="/admin/appointments/reserve" className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, border: '1px solid var(--primary)', color: 'var(--primary)', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
+            <AddTurn color="var(--primary)" /> نوبت رزرو
           </Link>
-          <Link to="/admin/appointments/new" className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, background: '#5559ce', color: '#fff', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
-            <AddTurn color="#fff" /> نوبت جدید
+          <Link to="/admin/appointments/new" className="flex items-center justify-center gap-2 rounded-[8px]" style={{ height: 48, minWidth: 137, background: 'var(--primary)', color: 'var(--on-primary)', textDecoration: 'none', padding: '0 16px', fontSize: 14 }}>
+            <AddTurn color="var(--on-primary)" /> نوبت جدید
           </Link>
         </div>
       </div>