Update tailwind.config.js

tailwind.config.js

@@ -1,17 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}", // به Tailwind می‌گوید کجا دنبال کلاس‌ها بگردد
+    "./src/**/*.{js,jsx,ts,tsx}",
   ],
-  darkMode: 'class', // برای فعال کردن حالت تاریک با کلاس CSS
+  darkMode: 'class',
   theme: {
     extend: {
-      // اینجا می‌توانید انیمیشن‌ها و رنگ‌های سفارشی اضافه کنید اگر لازم شد
-      // فعلاً برای سادگی خالی می‌گذاریم، چون انیمیشن‌ها باید از کلاس‌های Tailwind بیایند
+      // *** NEW: تعریف رنگ‌های سفارشی بر اساس متغیرهای CSS شما ***
+      colors: {
+        // نام 'background' و 'foreground' را برای سادگی انتخاب می‌کنیم
+        // شما می‌توانید نام‌های دیگری انتخاب کنید
+        'custom-background': 'var(--background)', // استفاده از متغیر CSS
+        'custom-foreground': 'var(--foreground)', // استفاده از متغیر CSS
+        'custom-popover': 'var(--popover)',
+        'custom-popover-foreground': 'var(--popover-foreground)',
+        'custom-border': 'var(--border)',
+        // رنگ‌های لوگو دیگر نیازی به تعریف اینجا ندارند چون کلاس کامل در safelist است
+        // اما اگر بخواهید برای آنها نام مستعار بسازید، می‌توانید:
+        // 'brand-blue-200': '#bfdbfe', // مثال
+      },
+      animation: {
+        'popover-open-top-center': 'popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards',
+        'popover-close-top-center': 'popover-lift-out 0.3s ease-in forwards',
+      },
+      keyframes: {
+        'popover-drop-in': {
+          '0%': { opacity: '0', transform: 'translateY(-100%) scale(0.9)' },
+          '70%': { opacity: '1', transform: 'translateY(5px) scale(1.02)' },
+          '100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
+        },
+        'popover-lift-out': {
+          '0%': { opacity: '1', transform: 'translateY(0) scale(1)' },
+          '100%': { opacity: '0', transform: 'translateY(-100%) scale(0.9)' },
+        }
+      },
     },
   },
   plugins: [],
-  // این لیست مهم است تا Tailwind کلاس‌های رنگی لوگو را حذف نکند
   safelist: [
     'bg-blue-200', 'dark:bg-blue-700',
     'bg-blue-300', 'dark:bg-blue-600',