feat: update UI components to use CSS variables for dark mode compatibility

assets/admin/pages/SubscriptionPage.tsx

@@ -27,17 +27,17 @@ const PLAN_META: Record<string, {
 }> = {
   free: {
     label: 'رایگان', desc: 'برای شروع کار با سیستم',
-    color: '#64748b', bg: '#f1f5f9', border: '#cbd5e1',
+    color: 'var(--text-2)', bg: 'var(--surface-2)', border: 'var(--border)',
     icon: ShieldCheckIcon,
   },
   basic: {
     label: 'پایه', desc: 'برای مطب‌های کوچک و متوسط',
-    color: '#2563eb', bg: '#eff6ff', border: '#93c5fd',
+    color: 'var(--info)', bg: 'var(--info-bg)', border: 'color-mix(in oklch, var(--info) 40%, transparent)',
     icon: RocketLaunchIcon,
   },
   professional: {
     label: 'حرفه‌ای', desc: 'برای کلینیک‌های بزرگ',
-    color: '#7c3aed', bg: '#f5f3ff', border: '#c4b5fd',
+    color: 'var(--violet)', bg: 'var(--violet-bg)', border: 'color-mix(in oklch, var(--violet) 40%, transparent)',
     icon: SparklesIcon,
   },
 };
@@ -207,14 +207,14 @@ export default function SubscriptionPage() {
       {/* ── بنر تریال (اگر هنوز استفاده نشده و اشتراکی ندارد) ── */}
       {!myLoading && !my && !usedTrial && (
         <div style={{
-          background: 'linear-gradient(135deg, #eff6ff, #f5f3ff)',
-          border: '1.5px dashed #93c5fd',
+          background: 'linear-gradient(135deg, var(--info-bg), var(--violet-bg))',
+          border: '1.5px dashed color-mix(in oklch, var(--info) 50%, transparent)',
           borderRadius: 'var(--r-lg)',
           padding: '18px 22px',
           marginBottom: 24,
           display: 'flex', alignItems: 'center', gap: 14,
         }}>
-          <SparklesIcon style={{ width: 28, color: '#2563eb', flexShrink: 0 }} />
+          <SparklesIcon style={{ width: 28, color: 'var(--info)', flexShrink: 0 }} />
           <div style={{ flex: 1 }}>
             <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text)', marginBottom: 2 }}>
               یک ماه تریال رایگان دارید!
@@ -307,16 +307,16 @@ export default function SubscriptionPage() {
             {/* انتخاب درگاه */}
             {isTestMode ? (
               <div style={{
-                background: '#fef9c3',
-                border: '1px solid #fbbf24',
+                background: 'var(--warning-bg)',
+                border: '1px solid var(--warning)',
                 borderRadius: 10,
                 padding: '12px 16px',
                 display: 'flex', alignItems: 'center', gap: 10,
               }}>
                 <span style={{ fontSize: 20 }}>⚠️</span>
                 <div>
-                  <div style={{ fontWeight: 700, fontSize: 13.5, color: '#92400e' }}>درگاه آزمایشی فعال است</div>
-                  <div style={{ fontSize: 12, color: '#b45309', marginTop: 2 }}>پول واقعی کسر نخواهد شد — این تراکنش آزمایشی است</div>
+                  <div style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--warning)' }}>درگاه آزمایشی فعال است</div>
+                  <div style={{ fontSize: 12, color: 'var(--warning)', marginTop: 2, opacity: 0.8 }}>پول واقعی کسر نخواهد شد — این تراکنش آزمایشی است</div>
                 </div>
               </div>
             ) : (
@@ -475,10 +475,10 @@ function PlanCard({
               <span style={{
                 width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
                 display: 'grid', placeItems: 'center',
-                background: enabled ? '#dcfce7' : 'var(--surface-3)',
+                background: enabled ? 'var(--success-bg)' : 'var(--surface-3)',
               }}>
                 {enabled
-                  ? <CheckIcon style={{ width: 12, color: '#16a34a' }} />
+                  ? <CheckIcon style={{ width: 12, color: 'var(--success)' }} />
                   : <XMarkIcon style={{ width: 11, color: 'var(--text-3)' }} />
                 }
               </span>
@@ -493,8 +493,8 @@ function PlanCard({
         {trialPeriod && !usedTrial && plan.level > 0 && !isDowngrade && (
           <div style={{
             marginTop: 14, padding: '10px 12px', borderRadius: 'var(--r-sm)',
-            background: 'linear-gradient(135deg, #eff6ff, #f5f3ff)',
-            border: '1px dashed #93c5fd', fontSize: 12.5,
+            background: 'linear-gradient(135deg, var(--info-bg), var(--violet-bg))',
+            border: '1px dashed color-mix(in oklch, var(--info) 50%, transparent)', fontSize: 12.5,
             display: 'flex', alignItems: 'center', gap: 8,
           }}>
             <span>🎁</span>
@@ -520,8 +520,8 @@ function PlanCard({
             <div style={{
               display: 'flex', alignItems: 'center', gap: 8,
               padding: '10px 12px', borderRadius: 'var(--r-sm)',
-              background: '#fef9c3', border: '1px solid #fbbf24',
-              fontSize: 12.5, color: '#92400e', marginBottom: 2,
+              background: 'var(--warning-bg)', border: '1px solid var(--warning)',
+              fontSize: 12.5, color: 'var(--warning)', marginBottom: 2,
             }}>
               <span style={{ fontSize: 15 }}>🔒</span>
               <span>تا پایان اشتراک فعلی قابل انتخاب نیست</span>