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

@@ -47,7 +47,7 @@ interface UnassignedDoctor {
 function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
     <div className="cp-info-row items-start gap-4">
-      <span className="text-sm text-gray-500 w-40 shrink-0">{label}</span>
+      <span className="text-sm text-[var(--text-2)] w-40 shrink-0">{label}</span>
       <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
@@ -191,10 +191,10 @@ export default function RepresentationDetailPage() {
             { label: 'جزئیات' },
           ]}
         />
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-pulse">
+        <div className="bg-[var(--surface)] rounded-2xl shadow-sm border border-[var(--border)] p-6 animate-pulse">
           <div className="space-y-4">
             {[1, 2, 3, 4, 5].map((i) => (
-              <div key={i} className="h-8 bg-gray-100 rounded" />
+              <div key={i} className="h-8 bg-[var(--surface-2)] rounded" />
             ))}
           </div>
         </div>
@@ -212,7 +212,7 @@ export default function RepresentationDetailPage() {
             { label: 'نمایندگان', to: '/admin/representations' },
           ]}
         />
-        <div className="cp-card p-12 text-center text-slate-400 dark:text-slate-500">
+        <div className="cp-card p-12 text-center text-[var(--text-3)]">
           نماینده‌ای با این شناسه یافت نشد.
         </div>
       </div>
@@ -237,8 +237,8 @@ export default function RepresentationDetailPage() {
               disabled={toggleActiveMutation.isPending}
               className={`flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border transition-colors disabled:opacity-50 ${
                 isActive
-                  ? 'border-red-300 text-red-600 hover:bg-red-50'
-                  : 'border-green-300 text-green-600 hover:bg-green-50'
+                  ? 'border-[var(--danger)] text-[var(--danger)] hover:bg-[var(--danger-bg)]'
+                  : 'border-[var(--success)] text-[var(--success)] hover:bg-[var(--success-bg)]'
               }`}
             >
               {isActive
@@ -248,14 +248,14 @@ export default function RepresentationDetailPage() {
             </button>
             <button
               onClick={openEdit}
-              className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border border-[var(--border-2)] text-[var(--text)] hover:bg-[var(--surface-2)] transition-colors"
             >
               <PencilIcon className="w-4 h-4" />
               ویرایش
             </button>
             <button
               onClick={() => setDeleteOpen(true)}
-              className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border border-red-300 text-red-600 hover:bg-red-50 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border border-[var(--danger)] text-[var(--danger)] hover:bg-[var(--danger-bg)] transition-colors"
             >
               <TrashIcon className="w-4 h-4" />
               حذف
@@ -275,7 +275,7 @@ export default function RepresentationDetailPage() {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Basic Info */}
         <div className="cp-card p-6">
-          <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات پایه</h2>
+          <h2 className="text-sm font-semibold text-[var(--text)] mb-4">اطلاعات پایه</h2>
           <DetailRow label="نام کامل" value={rep.full_name} />
           <DetailRow label="موبایل" value={
             rep.mobile_number
@@ -290,7 +290,7 @@ export default function RepresentationDetailPage() {
 
         {/* Bank Account */}
         <div className="cp-card p-6">
-          <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات بانکی</h2>
+          <h2 className="text-sm font-semibold text-[var(--text)] mb-4">اطلاعات بانکی</h2>
           {rep.bank_account ? (
             <>
               <DetailRow label="شماره کارت" value={
@@ -306,7 +306,7 @@ export default function RepresentationDetailPage() {
               } />
             </>
           ) : (
-            <p className="text-sm text-gray-400 text-center py-6">اطلاعات بانکی ثبت نشده</p>
+            <p className="text-sm text-[var(--text-3)] text-center py-6">اطلاعات بانکی ثبت نشده</p>
           )}
         </div>
       </div>
@@ -316,7 +316,7 @@ export default function RepresentationDetailPage() {
         <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
           <div className="flex items-center gap-2">
             <UserGroupIcon className="w-5 h-5 text-[var(--text-3)]" />
-            <h2 className="text-sm font-semibold text-gray-700">پزشکان این نماینده</h2>
+            <h2 className="text-sm font-semibold text-[var(--text)]">پزشکان این نماینده</h2>
             <span className="badge violet">{formatNumber(repDoctorsTotal)}</span>
           </div>
           <button className="btn primary sm inline-flex items-center gap-1" onClick={() => setAttachOpen(true)}>
@@ -324,11 +324,11 @@ export default function RepresentationDetailPage() {
           </button>
         </div>
         {doctorsQuery.isLoading ? (
-          <p className="text-sm text-gray-400 text-center py-8">در حال بارگذاری…</p>
+          <p className="text-sm text-[var(--text-3)] text-center py-8">در حال بارگذاری…</p>
         ) : repDoctors.length === 0 ? (
           <div className="text-center py-10">
-            <UserGroupIcon className="w-10 h-10 mx-auto text-gray-300 mb-2" />
-            <p className="text-sm text-gray-400">این نماینده هنوز پزشکی ندارد</p>
+            <UserGroupIcon className="w-10 h-10 mx-auto text-[var(--text-3)] mb-2" />
+            <p className="text-sm text-[var(--text-3)]">این نماینده هنوز پزشکی ندارد</p>
             <button className="btn primary sm mt-3 inline-flex items-center gap-1" onClick={() => setAttachOpen(true)}>
               <PlusIcon className="w-4 h-4" /> افزودن اولین پزشک
             </button>
@@ -366,7 +366,7 @@ export default function RepresentationDetailPage() {
         <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
           <div className="flex items-center gap-2">
             <CalendarDaysIcon className="w-5 h-5 text-[var(--text-3)]" />
-            <h2 className="text-sm font-semibold text-gray-700">نوبت‌های این نماینده</h2>
+            <h2 className="text-sm font-semibold text-[var(--text)]">نوبت‌های این نماینده</h2>
             {!appointmentsQuery.isLoading && <span className="badge blue">{formatNumber(repAppointmentsTotal)}</span>}
           </div>
           <div className="seg">
@@ -375,11 +375,11 @@ export default function RepresentationDetailPage() {
           </div>
         </div>
         {appointmentsQuery.isLoading ? (
-          <p className="text-sm text-gray-400 text-center py-8">در حال بارگذاری…</p>
+          <p className="text-sm text-[var(--text-3)] text-center py-8">در حال بارگذاری…</p>
         ) : repAppointments.length === 0 ? (
           <div className="text-center py-10">
-            <CalendarDaysIcon className="w-10 h-10 mx-auto text-gray-300 mb-2" />
-            <p className="text-sm text-gray-400">
+            <CalendarDaysIcon className="w-10 h-10 mx-auto text-[var(--text-3)] mb-2" />
+            <p className="text-sm text-[var(--text-3)]">
               {apptScope === 'upcoming' ? 'نوبت آینده‌ای ثبت نشده است' : 'نوبت گذشته‌ای وجود ندارد'}
             </p>
           </div>
@@ -422,16 +422,16 @@ export default function RepresentationDetailPage() {
           onChange={(e) => setAttachSearch(e.target.value)}
         />
         {unassignedQuery.isLoading ? (
-          <p className="text-sm text-gray-400 text-center py-6">در حال بارگذاری…</p>
+          <p className="text-sm text-[var(--text-3)] text-center py-6">در حال بارگذاری…</p>
         ) : unassignedDoctors.length === 0 ? (
-          <p className="text-sm text-gray-400 text-center py-6">پزشکِ بدون نماینده‌ای یافت نشد</p>
+          <p className="text-sm text-[var(--text-3)] text-center py-6">پزشکِ بدون نماینده‌ای یافت نشد</p>
         ) : (
           <div style={{ maxHeight: 360, overflowY: 'auto' }}>
             {unassignedDoctors.map((d) => (
-              <div key={d.uuid} className="flex items-center justify-between py-2 border-b border-gray-100">
+              <div key={d.uuid} className="flex items-center justify-between py-2 border-b border-[var(--border)]">
                 <div>
                   <b className="text-sm">{d.name}</b>
-                  <div className="text-xs text-gray-400" dir="ltr">{d.medical_code ?? d.mobile ?? '—'}</div>
+                  <div className="text-xs text-[var(--text-3)]" dir="ltr">{d.medical_code ?? d.mobile ?? '—'}</div>
                 </div>
                 <button className="btn primary sm" disabled={attachMutation.isPending}
                   onClick={() => attachMutation.mutate(d.uuid)}>افزودن</button>