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/session/SessionAuditModal.tsx

@@ -16,9 +16,9 @@ const FIELD_LABELS: Record<string, string> = {
 };
 
 const OP_LABELS: Record<string, { label: string; color: string }> = {
-  create: { label: 'ایجاد',  color: '#3c9a4f' },
-  update: { label: 'ویرایش', color: '#5559ce' },
-  delete: { label: 'حذف',    color: '#EF4444' },
+  create: { label: 'ایجاد',  color: 'var(--success)' },
+  update: { label: 'ویرایش', color: 'var(--primary)' },
+  delete: { label: 'حذف',    color: 'var(--danger)' },
 };
 
 // مقادیر پولی (ریال) را با فرمت تومان نشان بده؛ بقیه را خام.
@@ -53,7 +53,7 @@ export default function SessionAuditModal({ sessionUuid, onClose }: { sessionUui
               <div key={i} className="card" style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                   <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <span className="badge" style={{ fontSize: 11, color: '#fff', background: op.color, borderRadius: 4, padding: '2px 8px' }}>{op.label}</span>
+                    <span className="badge" style={{ fontSize: 11, color: 'var(--on-primary)', background: op.color, borderRadius: 4, padding: '2px 8px' }}>{op.label}</span>
                     <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{FIELD_LABELS[r.field] ?? r.field}</span>
                   </span>
                   <span style={{ fontSize: 12, color: 'var(--text-3)' }}>{formatDateTime(r.created_at)}</span>