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/inventory/PackagesView.tsx

@@ -26,22 +26,22 @@ function PackageCard({ pkg, onEdit, onDelete }: { pkg: InventoryPackage } & Pick
   const canUpdate = can('inventory', 'update');
   const canDelete = can('inventory', 'delete');
   const [expanded, setExpanded] = useState(false);
-  const divider = <div style={{ height: 1, background: '#d7d7d7', margin: '8px 0' }} className="inv-divider" />;
+  const divider = <div style={{ height: 1, background: 'var(--border-2)', margin: '8px 0' }} className="inv-divider" />;
 
   return (
     <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 8, padding: 16 }}>
       {/* Header */}
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ width: 20, height: 20, background: '#f0753b', borderRadius: '50%', flexShrink: 0 }} />
+          <span style={{ width: 20, height: 20, background: 'var(--accent)', borderRadius: '50%', flexShrink: 0 }} />
           <span style={{ fontWeight: 500, fontSize: 16, color: 'var(--text)' }}>{pkg.title}</span>
         </div>
         <span
           style={{
             width: 122, height: 34, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
             borderRadius: 4, fontWeight: 600, fontSize: 16,
-            color: pkg.available ? '#3f9954' : '#d32f2f',
-            background: pkg.available ? '#f0faf2' : '#fdebed',
+            color: pkg.available ? 'var(--success)' : 'var(--danger)',
+            background: pkg.available ? 'var(--success-bg)' : 'var(--danger-bg)',
           }}
         >
           {pkg.available ? 'موجودی کافی' : 'موجودی ناکافی'}