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/dashboard/TauriDashboardView.tsx

@@ -31,7 +31,7 @@ function SmSelector({ options, value, onChange }: { options: SelectorOption[]; v
 }
 
 function ChartTitle({ text }: { text: string }) {
-  return <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] font-bold">{text}</p>;
+  return <p className="text-[var(--text)] text-[14px] md:text-[16px] font-bold">{text}</p>;
 }
 
 function ChartCard({
@@ -48,7 +48,7 @@ function ChartCard({
   children: React.ReactNode;
 }) {
   return (
-    <div className="w-full rounded-[8px] border border-solid border-[#EFEFEF] dark:border-transparent bg-[#FFF] dark:bg-[#222433]">
+    <div className="w-full rounded-[8px] border border-solid border-[var(--border)] dark:border-transparent bg-[var(--surface)]">
       <div className="flex px-[20px] py-[12px] md:py-[14px] lg:py-[16px] items-center justify-between gap-[12px]">
         <ChartTitle text={title} />
         <SmSelector options={selectorOptions} value={selectorValue} onChange={onSelectorChange} />
@@ -141,12 +141,12 @@ export function TauriDashboardView({
       </div>
 
       {/* New appointments list */}
-      <div className="w-full rounded-[8px] border border-solid border-transparent md:border-[#EFEFEF] dark:border-transparent bg-transparent md:bg-[#FFF] md:dark:bg-[#222433]">
+      <div className="w-full rounded-[8px] border border-solid border-transparent md:border-[var(--border)] dark:border-transparent bg-transparent md:bg-[var(--surface)] md:dark:bg-[var(--surface)]">
         <div className="md:pt-[18px] md:px-[24px] md:pb-[20px] flex items-center justify-between">
-          <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] font-bold">لیست نوبت‌های جدید</p>
+          <p className="text-[var(--text)] text-[14px] md:text-[16px] font-bold">لیست نوبت‌های جدید</p>
           <Link
             to="/admin/appointments"
-            className="flex items-center gap-[4px] p-1 text-[12px] md:text-[14px] text-[#616161] dark:text-[#A1A1A1] font-normal hover:text-[#5559ce]"
+            className="flex items-center gap-[4px] p-1 text-[12px] md:text-[14px] text-[var(--text-2)] font-normal hover:text-[var(--primary)]"
           >
             نوبت‌ها
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none">