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

@@ -67,7 +67,7 @@ export default function PaymentDetailPage() {
         ]}
         action={
           <button onClick={() => navigate('/admin/payments')}
-            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
+            className="flex items-center gap-2 text-sm text-[var(--text-2)] hover:text-[var(--text)] transition-colors">
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
           </button>
@@ -82,7 +82,7 @@ export default function PaymentDetailPage() {
         </div>
       ) : payment ? (
         <div className="max-w-lg">
-          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
+          <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6">
             <InfoRow label="شناسه" value={<span dir="ltr" className="font-mono text-xs">{payment.uuid}</span>} />
             <InfoRow label="شماره سفارش" value={payment.order_id ? <span dir="ltr" className="font-mono text-xs">{payment.order_id}</span> : null} />
             <InfoRow label="بیمار" value={payment.patient_name} />
@@ -109,7 +109,7 @@ export default function PaymentDetailPage() {
           </div>
 
           {payment.refunds && payment.refunds.length > 0 && (
-            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mt-4">
+            <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6 mt-4">
               <h3 className="text-sm font-semibold mb-3">استردادها</h3>
               {payment.refunds.map((r, i) => (
                 <InfoRow
@@ -118,7 +118,7 @@ export default function PaymentDetailPage() {
                   value={
                     <span>
                       {formatRial(r.amount)}
-                      {r.ref && <span dir="ltr" className="font-mono text-xs text-gray-400"> ({r.ref})</span>}
+                      {r.ref && <span dir="ltr" className="font-mono text-xs text-[var(--text-3)]"> ({r.ref})</span>}
                     </span>
                   }
                 />
@@ -153,7 +153,7 @@ export default function PaymentDetailPage() {
           />
         </div>
       ) : (
-        <div className="bg-white rounded-2xl border border-gray-100 p-16 text-center text-gray-400">
+        <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] p-16 text-center text-[var(--text-3)]">
           پرداختی یافت نشد
         </div>
       )}