/* * رموز التصميم — منصة كارت * * مصدر واحد لكل لون ومسافة وحدّ في المنصة. كانت هذه القيم مكرّرة يدوياً في * مئات المواضع، فتغيير الهوية البصرية كان يعني تعديل كل موضع على حدة، والوضع * الليلي كان مستحيلاً بنيوياً. * * القاعدة: لا يُكتب لون صريح في أي ملف آخر — يُشتقّ من هنا. * * الوضع الليلي مبنيّ هنا لكنه **غير مُفعَّل تلقائياً** عن قصد: الواجهة ما * زالت تحوي ألواناً صريحة ومئات خصائص style المضمّنة لم تُحوَّل إلى رموز بعد، * فتفعيله باتباع تفضيل النظام كان سيشحن ثيماً نصف مكتمل لكل زائر هاتفه ليلي. * * ثلاث حالات صريحة على : * بلا سمة → نهاري (الافتراضي اليوم) * data-theme="dark" → ليلي دائماً * data-theme="auto" → يتبع تفضيل النظام * * بعد اكتمال تحويل الألوان الصريحة إلى رموز، يصبح تفعيل "auto" افتراضياً * تغييرَ سطر واحد. */ :root { /* ── الهوية ── */ --primary: #0f172a; --primary-dark: #020617; --secondary: #334155; --accent: #f59e0b; --accent-light: #fef3c7; /* ── الأسطح ── */ --bg-body: #f8fafc; --bg-card: #ffffff; --bg-subtle: #f1f5f9; /* ── النص ── */ --text-main: #1e293b; --text-muted: #64748b; --text-inverse: #ffffff; /* ── الحدود والفواصل ── */ --border: #e2e8f0; --border-strong: #cbd5e1; /* ── دلالات الحالة (منفصلة عن لون الهوية عمداً) ── */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; /* ── الاستدارة ── */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-pill: 999px; /* ── الظلال ── */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -2px rgba(15, 23, 42, .05); --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .18); /* ── المسافات ── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; /* ── سلّم الخط ── */ --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.85rem; /* ── سلّم الرمادي ── كان معرّفاً ثلاث مرات: في قالب لوحة التحكم وصفحتَي الدخول والتسجيل، بقيم متطابقة تُعدَّل يدوياً في كل موضع. مصدره الآن هنا وحده. */ --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* أسماء تستخدمها لوحة التحكم */ --dark: #0f172a; --light: #f8fafc; /* أسطح دلالية خفيفة (خلفيات التنبيهات والشارات) */ --danger-soft: #fee2e2; --success-soft: #dcfce7; --warning-soft: #fef3c7; --info-soft: #e0f2fe; /* الطرف الثاني لتدرّج البنر العلوي */ --gradient-end: #1e3a5f; /* أسطح شبه شفافة (ترويسة ملتصقة، ألواح عائمة فوق المحتوى) */ --surface-blur: rgba(255, 255, 255, 0.8); --surface-blur-strong: rgba(255, 255, 255, 0.94); color-scheme: light; } /* * اتباع تفضيل النظام — يعمل فقط عند اختيار "auto" صراحةً، ولا يعمل إن اختار * المستخدم النهاري صراحةً. تُعاد تعريف الرموز فقط فترث كل المكوّنات التغيير. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"]:not([data-theme="light"]) { --primary: #e2e8f0; --primary-dark: #f8fafc; --secondary: #cbd5e1; --accent: #fbbf24; --accent-light: #3a2f14; --bg-body: #0b1120; --bg-card: #131c31; --bg-subtle: #1b2540; --text-main: #e8edf7; --text-muted: #97a3b8; --text-inverse: #0b1120; --border: #263148; --border-strong: #33415c; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #38bdf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 10px 15px -3px rgba(0, 0, 0, .6), 0 4px 6px -2px rgba(0, 0, 0, .4); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .75); /* سلّم الرمادي ينقلب في الوضع الليلي: 100 يصبح الأغمق لا الأفتح، وإلا ظهر نص فاتح على سطح فاتح في كل مكوّن يستخدمه. */ --gray-100: #1b2540; --gray-200: #263148; --gray-300: #33415c; --gray-400: #55627d; --gray-500: #97a3b8; --gray-600: #b6c0d0; --gray-700: #d3dae5; --gray-800: #e8edf7; --gray-900: #f8fafc; --dark: #e8edf7; --light: #131c31; /* الأسطح الدلالية في الوضع الليلي: داكنة بما يكفي ليبقى النص فوقها مقروءاً */ --danger-soft: #3a1a1a; --success-soft: #12301f; --warning-soft: #33270f; --info-soft: #10283a; --gradient-end: #24406b; --surface-blur: rgba(11, 17, 32, 0.85); --surface-blur-strong: rgba(11, 17, 32, 0.96); --gradient-end: #24406b; --surface-blur: rgba(11, 17, 32, 0.85); --surface-blur-strong: rgba(11, 17, 32, 0.96); color-scheme: dark; } } /* اختيار المستخدم الصريح للوضع الليلي يتقدّم على تفضيل النظام. */ :root[data-theme="dark"] { --primary: #e2e8f0; --primary-dark: #f8fafc; --secondary: #cbd5e1; --accent: #fbbf24; --accent-light: #3a2f14; --bg-body: #0b1120; --bg-card: #131c31; --bg-subtle: #1b2540; --text-main: #e8edf7; --text-muted: #97a3b8; --text-inverse: #0b1120; --border: #263148; --border-strong: #33415c; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #38bdf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 10px 15px -3px rgba(0, 0, 0, .6), 0 4px 6px -2px rgba(0, 0, 0, .4); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .75); /* سلّم الرمادي ينقلب في الوضع الليلي: 100 يصبح الأغمق لا الأفتح، وإلا ظهر نص فاتح على سطح فاتح في كل مكوّن يستخدمه. */ --gray-100: #1b2540; --gray-200: #263148; --gray-300: #33415c; --gray-400: #55627d; --gray-500: #97a3b8; --gray-600: #b6c0d0; --gray-700: #d3dae5; --gray-800: #e8edf7; --gray-900: #f8fafc; --dark: #e8edf7; --light: #131c31; /* الأسطح الدلالية في الوضع الليلي: داكنة بما يكفي ليبقى النص فوقها مقروءاً */ --danger-soft: #3a1a1a; --success-soft: #12301f; --warning-soft: #33270f; --info-soft: #10283a; color-scheme: dark; } /* احترام تفضيل تقليل الحركة على مستوى المنصة كلها. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }