/** * Fakhr Pro - Theme Presets * ثيمات جاهزة للاختيار من لوحة تحكم المدير * كل ثيم يضبط متغيرات CSS تلقائياً * * ملاحظة: تُطبَّق بإضافة class على ، مثل: * */ /* 1. Royal Brown — البني الملكي (الثيم الافتراضي لفخر الأصالة) */ body.theme-royal-brown { --brand: #5e3b23; --brand-2: #a66e3f; --brand-dark: #3f2817; --brand-soft: #faf7f2; --accent: #c08040; --bg: #f6f1eb; --bg-2: #faf7f2; --line: #e8ddd3; --line-2: #eadfd5; } /* 2. Desert Sand — الصحراء الذهبية */ body.theme-desert-sand { --brand: #8b5a2b; --brand-2: #d4a373; --brand-dark: #5c3a1a; --brand-soft: #fdf6ec; --accent: #e8b867; --bg: #fbf3e7; --bg-2: #fdf8ef; --line: #efdec4; --line-2: #e7d0a6; } /* 3. Ocean Blue — الأزرق البحري */ body.theme-ocean-blue { --brand: #1e3a8a; --brand-2: #3b82f6; --brand-dark: #172554; --brand-soft: #eff6ff; --accent: #60a5fa; --bg: #f0f5ff; --bg-2: #f8fafc; --line: #dbeafe; --line-2: #c7dbfb; } /* 4. Emerald — الزمردي الأنيق */ body.theme-emerald { --brand: #064e3b; --brand-2: #059669; --brand-dark: #022c22; --brand-soft: #ecfdf5; --accent: #10b981; --bg: #f0fdf4; --bg-2: #f7fffb; --line: #d1fae5; --line-2: #bbf7d0; } /* 5. Royal Purple — البنفسجي الملكي */ body.theme-royal-purple { --brand: #581c87; --brand-2: #9333ea; --brand-dark: #3b0764; --brand-soft: #faf5ff; --accent: #c084fc; --bg: #faf5ff; --bg-2: #fdfaff; --line: #ede9fe; --line-2: #ddd6fe; } /* 6. Rose Gold — الوردي الذهبي (أنيق، مناسب لمحلات السيدات) */ body.theme-rose-gold { --brand: #9f1239; --brand-2: #e11d48; --brand-dark: #4c0519; --brand-soft: #fff1f2; --accent: #fb7185; --bg: #fff5f6; --bg-2: #fffafb; --line: #ffe4e6; --line-2: #fecdd3; } /* 7. Midnight — الليلي الأنيق (أسود/رمادي فاخر) */ body.theme-midnight { --brand: #0f172a; --brand-2: #475569; --brand-dark: #020617; --brand-soft: #f1f5f9; --accent: #64748b; --bg: #f8fafc; --bg-2: #f1f5f9; --line: #e2e8f0; --line-2: #cbd5e1; } /* 8. Turquoise — الفيروزي (هادئ ومنعش) */ body.theme-turquoise { --brand: #0e7490; --brand-2: #06b6d4; --brand-dark: #164e63; --brand-soft: #ecfeff; --accent: #22d3ee; --bg: #f0fdff; --bg-2: #f8feff; --line: #cffafe; --line-2: #a5f3fc; } /* 9. Sunset — الغروب الدافئ (برتقالي/أحمر متدرج) */ body.theme-sunset { --brand: #9a3412; --brand-2: #ea580c; --brand-dark: #7c2d12; --brand-soft: #fff7ed; --accent: #fb923c; --bg: #fff7ed; --bg-2: #fffbf5; --line: #fed7aa; --line-2: #fdba74; } /* 10. Forest — الغابة الخضراء (أخضر داكن فخم) */ body.theme-forest { --brand: #14532d; --brand-2: #16a34a; --brand-dark: #052e16; --brand-soft: #f0fdf4; --accent: #22c55e; --bg: #f7fdf7; --bg-2: #f0fdf4; --line: #dcfce7; --line-2: #bbf7d0; } /* ========================================================= Dark Mode Override (when user enables dark mode manually) ========================================================= */ body.dark-mode { --bg: #0f172a; --bg-2: #1e293b; --card: #1e293b; --text: #e2e8f0; --text-muted: #94a3b8; --text-soft: #cbd5e1; --line: #334155; --line-2: #475569; } body.dark-mode .nav { background: rgba(30,41,59,.8); border-color: var(--line); } body.dark-mode .nav a { background: #334155; color: #e2e8f0; border-color: #475569; } body.dark-mode .nav a:hover { background: #475569; } body.dark-mode .input, body.dark-mode .select, body.dark-mode .textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; } body.dark-mode .table { background: #1e293b; color: #e2e8f0; } body.dark-mode .table th { background: #334155; color: #fde68a; } body.dark-mode .table tbody tr:hover { background: #334155; } body.dark-mode .card.hero { background: linear-gradient(135deg,#1e293b,#0f172a); }