/* ================================================================== بوابة العميل — طبقة التوكنز المصدر الأوحد لكل لون ومسافة وحجم خط في البوابة. (كان هذا الرأس يحمل اسم المشغّل الأوّل مرّتين ومسارَ مجلّد تصميمه على جهازه. الملفّ يُنزَّل حرفياً إلى متصفّح كل مشترك ويُشحن إلى كل مشترٍ، فاسمٌ فيه اسمٌ في المخرَج لا في تعليق. الهوية كلّها تعيش في جدول `brand`، وتصل هذه الطبقةَ من `/portal-api/brand.css`.) ثلاث طبقات، ولا يجوز قفزها: 1. المقاييس الخام --color-* --space-* --text-size-* لا يستعملها مكوّن 2. الأدوار الدلالية --surface-* --text-* --state-* يستعملها المكوّن 3. الوضع الداكن يعيد توجيه الأدوار فقط، والمقاييس لا تتغيّر ممنوع كتابة أي قيمة لون أو مسافة خارج هذا الملف. ================================================================== */ /* ---------- 0. الخط — مستضاف ذاتياً، لا CDN ------------------------ نفس ملفات uploads/customization/fonts/ التي يستعملها custom.css، فلا تحميل مكرّر. المجموعات مقسومة كما يشحنها مصمّم الخط: قارئ العربية لا ينزّل محارف لاتينية والعكس. */ @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.ttf') format('truetype')} :root{ /* ---------- 1. المقاييس الخام: اللون ------------------------------ ── سلّم `--color-primary-*` نُزع من هنا ──────────────────────────── كان عشر درجات مكتوبة بأزرق المشغّل الأوّل حرفياً — أطولَ كتلة لون شركةٍ بعينها بقيت في الطبقة بعد أن صارت الأدوار كلّها تأتي من `/portal-api/brand.css`. ولماذا نُزع بدل أن يُشتقّ: **لا أحد يقرؤه.** قِيس على كل ما يُخدَم لمشترك (‏`base.css` · `components.css` · `layout.css` · `portal.js` · كل قوالب `client_zone`): تسعٌ من العشر بلا مرجع واحد، والعاشرة `--color-primary-200` يقرؤها سطرٌ وحيد هو `base.css:59` وهو محصور في `[data-theme='dark']` — حيث تُعرَّف الدرجة مرّتين أسفل هذا الملفّ وتأتي فوقهما من طبقة العلامة. أي أن القيمة النهارية المكتوبة هنا لم تصل بكسلاً واحداً على أي شاشة. واشتقاق سلّم ميّت من جدول العلامة يزيد الحساب ولا يزيد الصحّة؛ والحذف يُنقص سطراً يستطيع مكوّنٌ جديد أن يقفز إليه فوق الطبقة الدلالية — وهو بالضبط ما فعله `base.css:59`. الدرجة الوحيدة الحيّة تبقى معرَّفة في كتلتَي الوضع الداكن أدناه، رماديّةً محايدة، حتى يُصلَح ذلك السطر بدورٍ اسمه `--text-link-hover` في نطاق صاحب `base.css`. */ /* سلّم رمادي من تسع درجات + الأبيض. لا رمادي خارج هذا السلّم. */ --color-neutral-0:#FFFFFF; --color-neutral-50:#F7F7F8; --color-neutral-100:#EEEEEF; --color-neutral-200:#D9D9DB; --color-neutral-300:#BDBEC0; --color-neutral-400:#939598; --color-neutral-500:#666666; --color-neutral-600:#4D4D4D; --color-neutral-700:#3E3F43; --color-neutral-800:#26272A; --color-neutral-900:#0B0B0B; --color-success-100:#E3F5EE; --color-success-300:#6EE7B7; --color-success-500:#10B981; --color-success-700:#0A6B4D; --color-success-900:#0B2C21; --color-warning-100:#FBF0D8; --color-warning-300:#F2CE6B; --color-warning-500:#D9A21B; --color-warning-700:#7A5608; --color-warning-900:#2E2208; --color-danger-100:#FCEAEA; --color-danger-300:#F5A5A5; --color-danger-500:#DC2626; --color-danger-700:#A11B1B; --color-danger-900:#351414; /* سلّم «معلومة» — أزرق حالةٍ لا لونَ شركة. الدرجتان المستعملتان هما 100/700 نهاراً و900/300 ليلاً، زوجَي `--state-informative-*`. والدرجة 500 نُزعت: لا مرجع لها في الطبقة كلّها، **وقيمتها كانت مطابقة حرفياً لما يحمله جدول العلامة اليوم في `BRAND_COLOR`** — فأيّ فحصٍ يبحث عن لون المشغّل في الكود يجدها ولا يستطيع أن يفرّق. سطرٌ ميّت لا يستحقّ أن يُدافَع عنه في كل مراجعة. */ --color-info-100:#E2F3FD; --color-info-300:#86CFF5; --color-info-700:#0A6C9C; --color-info-900:#0A2A3C; /* ── سلّم `--color-connect-*` نُزع من هنا ─────────────────────────── ستّ درجات منقولة من دليل علامة المشغّل الأوّل، ومعها حبرُه. صارت ميّتةً تماماً منذ أن انتقلت الأدوار إلى طبقة العلامة: صفر مرجع في `base.css` و`components.css` و`layout.css` و`portal.js` وكل قوالب `client_zone` — مقيساً لا مقدَّراً. وميّتٌ يحمل هوية أخطرُ من حيّ يحملها: الحيّ يُرى فيُصلَح، والميّت يُنسخ إلى تركيب المشتري ويبقى فيه سنين لا يقرؤه أحد ولا يحذفه أحد. ولو احتاج أحدٌ يوماً تدرّجاً بلون العلامة فمكانه `brand.palette()` حيث يُشتقّ ويُقاس، لا سطرٌ مكتوب هنا. */ /* ---------- 2. المقاييس الخام: الطباعة --------------------------- السلّم الست درجات كما تحدّده مواصفة المنتج: 34 · 28 · 22 · 18 · 16 · 14. الحد الأدنى المطلق 14px وهو للتسميات والشرح الثانوي فقط؛ النص الأساسي 16px ولا ينزل عنه. (نظام التصميم الأمّ يستعمل سلّماً أوسع؛ مواصفة البوابة أخصّ منه وهي الحاكمة هنا.) */ --font-sans:'IBM Plex Sans Arabic', system-ui, sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, monospace; --weight-regular:400; --weight-semibold:600; --weight-bold:700; /* بالبكسل لا بالـrem، وهذا ليس اختصاراً. UCRM يفرض `body,html{font-size:14px}` على الجذر، فالـrem عنده يساوي 14px لا 16px. السلّم كان مكتوباً بالـrem فانكمش كلّه 12.5%: النص الأساسي خرج 14px والتسمية 12.25px — تحت الحد الأدنى الذي تفرضه المواصفة، وقيس على الصفحة الحيّة لا افتُرض. رفع جذر الصفحة إلى 16px كان سيُعيد قياس مكوّنات UCRM نفسها في صفحات لم نُعِد بناءها بعد، فالسلّم بالبكسل هو الإصلاح الذي لا يمسّ ما لا نملكه. */ --text-size-xs:14px; --text-size-sm:16px; --text-size-md:18px; --text-size-lg:22px; --text-size-xl:28px; --text-size-2xl:34px; /* العربية تحتاج فسحة أكبر من اللاتينية. 1.7 للنص و1.25 للعناوين. */ --leading-body:1.7; --leading-tight:1.25; /* أدوار الطباعة. المكوّن يذكر الدور لا الدرجة، فيتحرّك السلّم كلّه من مكان واحد. التراتب بالحجم والوزن معاً — لا عنوان فرعي أثقل من رئيسيه. */ --type-figure-size:var(--text-size-2xl); /* «المستحق الآن» */ --type-figure-weight:var(--weight-bold); --type-h1-size:var(--text-size-xl); /* عنوان الصفحة */ --type-h1-weight:var(--weight-bold); --type-h2-size:var(--text-size-lg); /* «خطك يعمل» */ --type-h2-weight:var(--weight-bold); --type-h3-size:var(--text-size-md); /* عنوان بطاقة */ --type-h3-weight:var(--weight-semibold); --type-body-size:var(--text-size-sm); /* نص أساسي وأزرار */ --type-body-weight:var(--weight-regular); --type-label-size:var(--text-size-xs); /* تسمية وشرح ثانوي */ --type-label-weight:var(--weight-semibold); /* ---------- 3. المقاييس الخام: المسافة والشكل -------------------- سلّم 4px. لا مسافة خارجه. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-full:999px; /* مسمّاة بالدور، فتتغيّر زوايا البطاقات كلها من سطر واحد. */ --radius-control:var(--radius-sm); --radius-card:var(--radius-md); --radius-panel:var(--radius-lg); --radius-pill:var(--radius-full); --shadow-sm:0 1px 2px rgba(11,11,11,0.06); --shadow-md:0 4px 12px rgba(11,11,11,0.08); --shadow-lg:0 12px 32px rgba(11,11,11,0.12); /* أصغر مساحة لمس. لا عنصر تفاعلي دونها، بلا استثناء. */ --touch-min:44px; /* عرض الحاوية على الحاسوب — 1152px كما تطلب المواصفة. */ --container-max:1152px; /* نقاط الانكسار ثلاث فقط: 0 / 768 / 1024. مكتوبة هنا للتوثيق؛ الـ@media لا تقبل المتغيّرات فالأرقام مكرّرة في layout.css. */ --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms; --motion-ease:cubic-bezier(0.4,0,0.2,1); /* ---------- 4. الأدوار الدلالية — ما تستعمله المكوّنات ---------- */ color-scheme:light; --surface-page:var(--color-neutral-50); --surface-card:var(--color-neutral-0); --surface-raised:var(--color-neutral-100); /* حدّان لا واحد. حدّ البطاقة زينة: البطاقة تُميَّز بأرضيتها وظلّها أيضاً، فـ3:1 لا تنطبق عليه. حدّ الحقل هو الشيء الوحيد الذي يقول أين يبدأ الحقل وأين ينتهي، فيخضع لـWCAG 1.4.11 ويجب أن يبلغ 3:1 — و#D9D9DB يقيس 1.41 فقط. */ --surface-border:var(--color-neutral-200); --surface-border-control:var(--color-neutral-500); --text-strong:var(--color-neutral-900); --text-body:var(--color-neutral-700); --text-muted:var(--color-neutral-500); /* ── ما تملكه العلامة ───────────────────────────────────────────── الأدوار التسعة التالية (وتسعة تقابلها في كتلتي الوضع الداكن) لم تعد تُكتب هنا. تصلها القيمة من `/portal-api/brand.css` وهو يشتقّها من جدول `brand` عند كل طلب: هوَ يأتي بعد هذا الملفّ في الرأس وبنفس شكل المحدّد، فالترتيب وحده يرجّحه بلا `!important`. وما هو مكتوب هنا هو **الاحتياط** لا الهوية: رماديّات محايدة مشتقّة من افتراضيات `brand.py` نفسها بنفس الدالة. إن لم يصل ذلك الملفّ — الخدمة متوقّفة، الوسيط مضبوط خطأ — بقيت البوابة مقروءة بلا علامة، لا مكسورة، ولا لابسةً أزرق شركة أخرى. والفرق ظاهر للقياس: أزرق يعني أن الاشتقاق حيّ، ورمادي يعني أنه لم يصل. الأرقام (مقيسة، لا مقدّرة): الحبر ‎#374151‎ يسجّل 10.31 على البطاقة و9.63 على أرضية الصفحة و8.89 على الأرضية المرتفعة؛ والأبيض على زرّ ‎#1F2937‎ يسجّل 14.68. */ --text-link:#1F2937; --text-negative:var(--color-danger-700); /* الأزرار والروابط: احتياط رماديّ محايد — القيمة الحيّة من طبقة العلامة. لا لون شركةٍ بعينها هنا. */ --surface-action:#1F2937; --surface-action-hover:#314158; --surface-action-quiet:#F1F4F7; /* لون النصّ على الزرّ ليس أبيض بالضرورة: مزوّد لونه أصفر يبقى زرّه أصفر ويُكتب عليه بالأسود (13.88) بدل أن يُغمَّق حتى يصير زيتونياً لا يعرفه أحد. الاختيار يقع في brand.py مع لون الزرّ، زوجاً واحداً. */ --text-on-action:#FFFFFF; --surface-destructive:var(--color-danger-500); --surface-destructive-hover:var(--color-danger-700); --text-on-destructive:var(--color-neutral-0); /* دور مستقل عن لون الفعل: الإطار يُرسم على ما خلفه، وأزرق الزر على بطاقة داكنة سجّل 2.58 — دون 3:1 التي يفرضها WCAG 1.4.11. */ --focus-ring:#1F2937; /* الحالات أزواج دائماً: الأرضية التي تجلس عليها الشريحة، والحبر الذي يُقرأ عليها. اللون وحده لا ينقل حالة — تسنده كلمة. */ --state-positive-surface:var(--color-success-100); --state-positive-text:var(--color-success-700); --state-caution-surface:var(--color-warning-100); --state-caution-text:var(--color-warning-700); --state-negative-surface:var(--color-danger-100); --state-negative-text:var(--color-danger-700); --state-informative-surface:var(--color-info-100); --state-informative-text:var(--color-info-700); /* أدوار العناصر المملوءة. تُعاد توجيهها في الوضع الداكن وحده. */ --surface-track-off:var(--color-neutral-300); --surface-track-on:var(--surface-action); --surface-step-now:var(--surface-action); --surface-fill:var(--surface-action); --surface-fill-danger:var(--surface-destructive); /* علامة المنتج: النقطة، مؤشّر التبويب النشط، أعمدة الرسم. */ --accent-mark:#4B5563; --accent-ink:#374151; --accent-quiet:#F2F4F5; /* ---------- 5. لوحة الرسوم البيانية ------------------------------ ست سلاسل متمايزة بالصبغة لا بالدرجة — لا أزرقان متقاربان في رسم واحد. مرتّبة بحيث تبقى أول ثلاث سلاسل مميّزة لعمى الألوان الأحمر-الأخضر. كل سلسلة تُسند بتسمية نصية دائماً. */ /* ست صبغات متباعدة، والقياس بـCIEDE2000 لا بالنظر. أصل الشرط أن سلسلتين كانتا تفصلهما ΔE = 2.72 — أي أنهما اللون نفسه — وأن الذهبي كان يقيس 2.30:1 على البطاقة البيضاء فلا يُرى. ── تصحيح رقمٍ كان مكتوباً هنا وليس صحيحاً ───────────────────────── كان مكتوباً «أدنى ΔE بين أي زوج ≥ 21». أُعيد قياس الأزواج الخمسة عشر في الوضعين، والحقيقة: نهاراً أدنى زوج 19.94 (‏5-6) ثم 20.76 (‏1-5) ليلاً أدنى زوج 12.52 (‏5-6) ثم 13.14 (‏4-6) أي أن الشرط لم يتحقّق يوماً في الوضع الليلي، والرقم 21 كان يُقرأ في تعليقٍ ويُبنى عليه قرار. (بمقياس ΔE76 القديم تخرج 33.91 و20.92، فلعلّه حُسب به.) الأرقام أعلاه هي **الحالة القائمة**، وهي الأرضية التي لا يجوز أن تنزل عنها أي لوحة تُشتقّ لمزوّد لاحقاً. ── ولماذا لم يعد `--chart-1` لون مشغّل ──────────────────────────── كان يحمل قيمة `BRAND_COLOR_ACTION` لأوّل مشغّل حرفاً بحرف — أي لونَ شركةٍ بعينها يُشحن إلى كل مشترٍ ويُرسم على قوس مقياس السرعة وأعمدة الاستهلاك ومنحنى الإشارة، وهي ثلاث رسوم يراها مشترك. (والقيمة نفسها لا تُكتب هنا: هي بالضبط ما يُنزَع من هذا الملفّ.) والاشتقاق من لون العلامة قيس ورُفض ويبقى مرفوضاً: بتثبيت الخمس الأخرى تنزل 34 صبغة من 36 تحت الأرضية، وأفضل تباعد ممكن خارج الخانة الزرقاء 13.08 نهاراً و7.95 ليلاً. العطل كان في الاشتقاق لا في الفكرة — فالستّ الآن **يملكها جدول العلامة** كما تملك الألوان الثلاثة، ومزوّدٌ يضبط لوحته كاملةً لا سلسلةً واحدة. وما هنا هو الافتراض وحده: ما يُرسم إن لم يضبط المزوّد شيئاً، أو إن لم تصل `brand.css` أصلاً. والافتراض الأوّل رماديّ لا أزرق. أزرقُ آخر في تلك الخانة يبدو أزرقَ البائع أياً كان من اختاره، والرماد هو ما يفترضه هذا الملفّ أصلاً في `--accent-mark` وأخواته وللسبب نفسه: تركيبٌ بلا علامة يجب أن يُقرأ وأن يبدو بلا علامة. وهو ليس تنازلاً عن القياس — الرماديان درجتان من سلّم الحياد هنا لا لونان مخترعان، وكلاهما **أبعد** عمّا حوله ممّا حلّ محلّه: نهاراً ← #3E3F43 أقرب جار 20.76 ← 23.43 ليلاً ← #D9D9DB أقرب جار 22.08 ← 23.00 وكلاهما فوق 3:1 على كل سطح يُرسم عليه (9.07 و7.46)، ولا يلتبس بمحور الرسم الذي يقف عليه (13.80 و18.55). وأرضية اللوحة كما هي 19.94 و12.52 — تصنعها السلسلتان الخامسة والسادسة لا الأولى. */ --chart-1:#3E3F43; /* رمادي — افتراض بلا علامة، انظر أعلاه */ --chart-2:#7A5608; /* ذهبي 41° */ --chart-3:#0A6B4D; /* أخضر 160° */ --chart-4:#A11B1B; /* أحمر 0° */ --chart-5:#6B4FA1; /* بنفسجي 265° */ --chart-6:#A21C6B; /* أرجواني 330° */ --chart-grid:var(--color-neutral-200); --chart-axis:var(--color-neutral-500); } /* ---------- 6. الوضع الداكن --------------------------------------- يعيد توجيه الأدوار فقط. لا مقياس خام يتغيّر، فلا مكوّن يعرف أصلاً في أي وضع هو. غير مقيّد بـ:root ليمكن لصفحة داكنة أن تحمل بطاقة فاتحة إن لزم. */ [data-theme='dark']{ color-scheme:dark; --surface-page:var(--color-neutral-900); --surface-card:var(--color-neutral-800); --surface-raised:var(--color-neutral-700); --surface-border:var(--color-neutral-700); --text-strong:var(--color-neutral-0); --text-body:var(--color-neutral-200); /* نفس قيمة الكتلة الوسائطية أدناه بالضبط. السمتان يجب أن تتّفقا: أصلحتُ الوسائطية وحدها أوّلاً، والمتصفّح على وضع نهاري مع data-theme='dark' لم يرَ الإصلاح — واستمرّ وقت الإشعار عند 3.97. */ --text-muted:var(--color-neutral-300); /* احتياط العلامة على الغامق — يقابله سطراً بسطر في الكتلة الوسائطية أدناه، ويأتي كلاهما من نفس القائمة في brand.py حين تصل brand.css. */ --text-link:#9AACC6; --text-negative:var(--color-danger-300); --surface-action:#4E678A; --surface-action-hover:#3F5470; --text-on-action:#FFFFFF; --surface-action-quiet:#1F2937; --focus-ring:#728CB0; --surface-track-off:var(--color-neutral-600); /* حدّ الحقل على الغامق: neutral-500 يقيس 2.38 على البطاقة، و400 يقيس 4.97. */ --surface-border-control:var(--color-neutral-400); /* لون الفعل الذي يخدم هذا التركيب اليوم يقيس 2.58 على بطاقة داكنة — وهو الرقم الذي يذكره هذا الملف نفسه وقد فُصل من أجله --focus-ring. لكنه ظلّ يُطلى حدّاً لعنصر تحكّم في ثلاثة مواضع على الغامق، فالمشكلة كانت نُقلت لا حُلّت. هذه الأدوار الثلاثة تُعاد توجيهها هنا. */ --surface-track-on:#728CB0; --surface-step-now:#1F2937; --surface-fill:#728CB0; --surface-fill-danger:var(--color-danger-300); --state-positive-surface:var(--color-success-900); --state-positive-text:var(--color-success-300); --state-caution-surface:var(--color-warning-900); --state-caution-text:var(--color-warning-300); --state-negative-surface:var(--color-danger-900); --state-negative-text:var(--color-danger-300); --state-informative-surface:var(--color-info-900); --state-informative-text:var(--color-info-300); /* على الغامق تُقرأ العلامة بالدرجة 300 كما تفرض دليل العلامة. */ --accent-ink:#A2ACB9; --accent-quiet:#2F353E; /* base.css:59 يرسم لون مرور المؤشّر على الرابط من المقياس الخام مباشرة. ذاك الملفّ ليس من نطاقنا، فالدرجة نفسها صارت مشتقّة في brand.css كي لا يبقى شيءٌ واحد على الصفحة بلون المشغّل الأوّل عند كل مزوّد. القيمة هنا احتياط محايد: 9.97 على البطاقة الداكنة. */ --color-primary-200:#CAD4E1; /* نفس الصبغات مرفوعة الإضاءة لتُقرأ على أرضية سوداء. */ --chart-1:#D9D9DB; --chart-2:#F2CE6B; --chart-3:#6EE7B7; --chart-4:#F5A5A5; --chart-5:#C9A6E8; --chart-6:#F0A6CE; --chart-grid:var(--color-neutral-700); --chart-axis:var(--color-neutral-400); } [data-theme='light']{color-scheme:light} /* من لم يختر وضعاً يتبع نظام جهازه. الاختيار الصريح [data-theme] أقوى من هذه القاعدة لأنه يأتي بعدها في الترتيب. */ /* ── الاتّباع التلقائي لوضع النظام ───────────────────────────────── أُعيد بعد المرحلة 5. كان معطّلاً لأن اللوحات الثلاث عشرة كانت تكتب ألوانها يدوياً فتختفي عناوينها على أرضية سوداء — رُئي في لقطة شاشة حقيقية. لم تعد أي لوحة تكتب لوناً: صفر قيمة #RRGGBB في الطبقة كلها، وكل لون يمرّ بدور دلالي يُعاد توجيهه هنا. من لم يختر وضعاً يتبع نظام جهازه، والاختيار الصريح [data-theme] أقوى لأنه يأتي بعده في الترتيب. */ @media (prefers-color-scheme:dark){ :root:not([data-theme='light']){ color-scheme:dark; --surface-page:var(--color-neutral-900); --surface-card:var(--color-neutral-800); --surface-raised:var(--color-neutral-700); --surface-border:var(--color-neutral-700); --text-strong:var(--color-neutral-0); --text-body:var(--color-neutral-200); /* neutral-400 يكفي على البطاقة الداكنة (4.98) ويسقط على البطاقات الملوّنة: وقت الإشعار فوق أغمق بطاقة ملوّنة كان **3.97**. و neutral-300 يمرّ على الثلاث (8.05 · 10.58 · 6.41)، فالإصلاح في الرمز لا في خمسة محدّدات. */ --text-muted:var(--color-neutral-300); --text-link:#9AACC6; --text-negative:var(--color-danger-300); --surface-action:#4E678A; --surface-action-hover:#3F5470; --text-on-action:#FFFFFF; --surface-action-quiet:#1F2937; --focus-ring:#728CB0; /* ما يلي كان في `[data-theme='dark']` وحدها. سبعة أدوار كانت تسقط عن كل من لم يختر وضعاً واتّبع نظام جهازه: حدّ الحقل عاد إلى neutral-500 (2.38 على البطاقة الداكنة بدل 4.97)، وأزرق التحكّم بقي 2.58، ولوّنا السلسلتين ٥ و٦ بقيتا على القيمتين اللتين أُصلحتا هناك — وكانت chart-6 يومها سماويّةً يفصلها عن chart-1 فرقٌ لا يكاد يُرى، وهو بعينه العطل الذي يمنعه شرط ΔE المذكور في القسم ٥. أُصلحت واحدة دون الأخرى مرّة من قبل ووُثّق ذلك أعلاه؛ الآن تتطابق الكتلتان سطراً بسطر، ويحرسهما اختبار. */ --surface-border-control:var(--color-neutral-400); --surface-track-off:var(--color-neutral-600); --surface-track-on:#728CB0; --surface-step-now:#1F2937; --surface-fill:#728CB0; --surface-fill-danger:var(--color-danger-300); --state-positive-surface:var(--color-success-900); --state-positive-text:var(--color-success-300); --state-caution-surface:var(--color-warning-900); --state-caution-text:var(--color-warning-300); --state-negative-surface:var(--color-danger-900); --state-negative-text:var(--color-danger-300); --state-informative-surface:var(--color-info-900); --state-informative-text:var(--color-info-300); --accent-ink:#A2ACB9; --accent-quiet:#2F353E; --color-primary-200:#CAD4E1; --chart-1:#D9D9DB; --chart-2:#F2CE6B; --chart-3:#6EE7B7; --chart-4:#F5A5A5; --chart-5:#C9A6E8; --chart-6:#F0A6CE; --chart-grid:var(--color-neutral-700); --chart-axis:var(--color-neutral-400); } } /* من طلب حركة أقل يحصل عليها من مصدر واحد: المدد تصير صفراً فتتوقّف كل حركة في النظام بلا أن يعرف أي مكوّن بذلك. */ @media (prefers-reduced-motion:reduce){ :root{ --motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; } }