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

@@ -26,13 +26,13 @@ function InfoRow({ icon, label, value, chip = false, valueStyle }: {
     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
         {icon}
-        <span className="dark:text-[#A1A1A1]" style={{ fontSize: 12, color: '#616161' }}>{label}:</span>
+        <span style={{ fontSize: 12, color: 'var(--text-2)' }}>{label}:</span>
       </div>
       <span
-        className={chip ? 'dark:bg-[#404040] dark:text-[#D7D8ED]' : 'dark:text-[#D7D8ED]'}
+        className={chip ? 'dark:bg-[var(--surface-2)]' : ''}
         style={{
-          fontSize: 12, color: '#525252', textAlign: 'left',
-          ...(chip ? { background: '#efefef', borderRadius: 8, padding: '2px 8px', color: '#2f2f2f' } : {}),
+          fontSize: 12, color: 'var(--text)', textAlign: 'left',
+          ...(chip ? { background: 'var(--surface-2)', borderRadius: 8, padding: '2px 8px', color: 'var(--text)' } : {}),
           ...valueStyle,
         }}
       >
@@ -55,7 +55,7 @@ export default function AppointmentTurnCard({ appointment, queryKey }: {
   const title = appointment.service_name || 'نوبت';
   return (
     <div
-      className="bg-white dark:bg-[#222433] border border-[#EDEDED] dark:border-[#35343D]"
+      className="bg-[var(--surface)] border border-[var(--border)]"
       style={{ width: 277, maxWidth: '100%', minHeight: 249, borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 1px 6px rgba(15,23,42,0.06)' }}
     >
       {/* Header */}
@@ -63,13 +63,13 @@ export default function AppointmentTurnCard({ appointment, queryKey }: {
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
           <FilesServiceSuccess />
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3, minWidth: 0 }}>
-            <span className="dark:text-[#D7D8ED]" style={{ fontSize: 14, fontWeight: 600, color: '#525252', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
+            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
           </div>
         </div>
-        <FilesServiceMore style={{ color: '#9CA3AF', flexShrink: 0 }} />
+        <FilesServiceMore style={{ color: 'var(--text-3)', flexShrink: 0 }} />
       </div>
 
-      <div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
+      <div style={{ borderTop: '1px solid var(--border)' }} />
 
       {/* Middle: date & time chips */}
       <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -77,7 +77,7 @@ export default function AppointmentTurnCard({ appointment, queryKey }: {
         <InfoRow icon={<ClockP />} label="ساعت" chip value={formatTime(appointment.starts_at)} />
       </div>
 
-      <div className="dark:border-[#35343D]" style={{ borderTop: '1px solid #F1F1F1' }} />
+      <div style={{ borderTop: '1px solid var(--border)' }} />
 
       {/* Bottom: personnel & status */}
       <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>