/* ============================================================ نظام التصميم الموحد — رموز الهوية البصرية (Design Tokens) مصدر الحقيقة الوحيد لألوان العلامة والخطوط عبر كل الصفحات. بقية الملفات تستهلك هذه المتغيرات بصيغة var(--token, fallback) بحيث لا يتغير الشكل حتى لو غاب هذا الملف عن صفحة ما. ============================================================ */ :root { /* لوحة العلامة الأساسية */ --brand-bg: #0f172a; /* كحلي غامق — خلفية المنصة */ --brand-gold: #facc15; /* أصفر العلامة الرئيسي */ --brand-pink: #f43f5e; /* وردي التنبيهات والتمييز */ --brand-text: #f8fafc; /* نص فاتح على الخلفيات الداكنة */ /* أسماء تاريخية مستخدمة في index.css — تُبقى مرادفات */ --bg-color: var(--brand-bg); --primary-yellow: var(--brand-gold); --primary-pink: var(--brand-pink); --text-light: var(--brand-text); /* الخط الرسمي */ --brand-font: 'Tajawal', sans-serif; } /* ============================================================ إصلاح الشريط الأبيض السفلي المزعج في كل الصفحات السبب: عنصر بلا خلفية، فتظهر خلفية المتصفح البيضاء أسفل الصفحة (منطقة شريط تنقّل النظام على الجوال). الحل: خلفية داكنة على html + دعم المنطقة الآمنة. ============================================================ */ html { background: var(--brand-bg, #0f172a); } body { background-color: var(--brand-bg, #0f172a); }