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

@@ -91,7 +91,7 @@ function ChartFrame({
       <div className="flex-1 flex min-h-0" style={{ alignItems: 'stretch' }}>
         {/* y-axis ticks, aligned to gridlines */}
         <div
-          className="flex flex-col justify-between text-[14px] font-normal text-[#858D9D] text-left pl-[4px] shrink-0"
+          className="flex flex-col justify-between text-[14px] font-normal text-[var(--text-2)] text-left pl-[4px] shrink-0"
           style={{ width: yWidth, alignItems: 'flex-start' }}
         >
           {ticks.map((t, i) => (
@@ -106,7 +106,7 @@ function ChartFrame({
           {ticks.map((_, i) => (
             <div
               key={i}
-              className="absolute left-0 right-0 border-t border-dashed border-[#E7E7E7] dark:border-[#35343D]"
+              className="absolute left-0 right-0 border-t border-dashed border-[var(--border)]"
               style={{ top: `${(i / (ticks.length - 1)) * 100}%` }}
             />
           ))}
@@ -116,7 +116,7 @@ function ChartFrame({
       {/* x-axis labels */}
       <div className="flex pt-[8px]" style={{ paddingRight: yWidth, alignItems: 'flex-start' }}>
         {labels.map((l, i) => (
-          <span key={i} className="flex-1 min-w-0 overflow-hidden text-center text-[10px] font-normal text-[#7E7E7E] whitespace-nowrap">
+          <span key={i} className="flex-1 min-w-0 overflow-hidden text-center text-[10px] font-normal text-[var(--text-2)] whitespace-nowrap">
             {l}
           </span>
         ))}
@@ -145,7 +145,7 @@ export function TauriBarChart({ data }: { data: ChartPoint[] }) {
           <div key={i} className="flex-1 min-w-0 flex items-end justify-center" style={{ alignItems: 'flex-end' }}>
             <div
               title={faNum.format(d.value)}
-              className="w-[60%] max-w-[24px] rounded-t-[3px] bg-[#5559CE]"
+              className="w-[60%] max-w-[24px] rounded-t-[3px] bg-[var(--primary)]"
               style={{
                 height: `${(d.value / top) * 100}%`,
                 minHeight: d.value > 0 ? 4 : 0,
@@ -278,7 +278,7 @@ export function TauriLineChart({ data, actualCount }: { data: ChartPoint[]; actu
                   top: `${(pts[i][1] / H) * 100}%`,
                   transform: 'translate(-50%, calc(-100% - 12px))',
                   background: isForecast ? 'var(--accent)' : 'var(--text)',
-                  color: '#fff',
+                  color: 'var(--on-primary)',
                   boxShadow: 'var(--shadow)',
                 }}
               >
@@ -302,7 +302,7 @@ export function TauriLineChart({ data, actualCount }: { data: ChartPoint[]; actu
 
 function EmptyChart() {
   return (
-    <div className="h-[300px] w-full grid place-items-center text-[13px] text-[#7E7E7E]">
+    <div className="h-[300px] w-full grid place-items-center text-[13px] text-[var(--text-2)]">
       داده‌ای برای نمایش نیست
     </div>
   );