/* ============================================================ توكنات محطة السراي — الهوية الكريمية المؤسسية (DEC-121 · D-1) ============================================================ قبل هذا الملف: المحطة بلا ملف CSS إطلاقًا — 340 لونًا صريحًا مبعثرًا في إحدى عشرة صفحة، كلٌّ بجذرها المحلي. هذا الملف هو **مصدر اللون الواحد**: الصفحات تحمّله قبل أنماطها وتحذف جذورها المحلية، فيتلوّن الجميع من هنا. الاتجاه المعتمد (الميثاق §الموجة D-1): ورقٌ كريمي دافئ بحبرٍ داكن مائل للأزرق الرمادي، والذهب هوية السراي **مقيَّدًا**: للأختام والحدود والعناوين الصغيرة — وحين يحمل نصًّا يُعمَّق حتى يتجاوز 4.5:1 على الكريمي. **التباين مقيس لا مقدَّر**: أزواج هذا الملف يقيسها `system/src/platform/colorContrastDec121.test.ts` بمعادلة WCAG نفسها — 4.5:1 للنص العادي و3:1 للكبير، في الوضعين الفاتح والداكن. الوضع الداكن خيارٌ بنفس التوكنات: `[data-theme="dark"]` يعيد قيم الليل المعهودة — لا لوحتان تُكتبان يدويًّا في الصفحات. ============================================================ */ :root { /* الأرضيات — ورق كريمي دافئ */ --bg: #F4EFE4; /* أرضية الصفحة */ --panel: #FBF8F1; /* الألواح — أفتح من الأرضية بدرجة */ --panel-2: #ECE5D3; /* عناصر مرتفعة/ثانوية */ --line: #D9CDB2; /* خط شعر دافئ بدل الحدود القوية */ /* الحبر */ --ink: #232B38; /* النص الأساسي — داكن مائل للأزرق الرمادي */ --muted: #55657A; /* ثانوي — ≥4.5:1 على الكريمي */ --placeholder: #55657A; /* مثالُ الحقل — 5.19:1 على --bg و5.61:1 على --panel */ /* (UI-F-S) رُفع من #5F6E82: كان 4.14:1 على `--panel-2` و4.25:1 على `--brand-soft` — أي أن «الأخفت» كان يكسر الشرط على أرضيتين من أربع، وزوجاهما لم يكونا في الشاهد. اليوم 4.71:1 و4.84:1 مقيسين، والزوجان مضافان. */ --dim: #57657A; /* أخفت — ≥4.5:1 على الأرضيات الأربع كلها */ /* هوية السراي — الذهب المقيَّد */ --brand: #7E6318; /* نص/أيقونات ذهب معمَّق — مقيس 4.97:1 على الكريمي */ --brand-deep: #6B5513; --brand-edge: #9E7719; /* حدود وأختام — مقيس 3.44:1 (عناصر كبيرة) */ /* (الموجة ح · س-ح-37(أ)) الغشاء والظلّ كانا rgba حرفيًّا في `crm.html`/`station-dialog.js` — توكنان لا لون في صفحة */ --overlay: rgba(2, 6, 23, .55); --shadow-float: 0 10px 26px rgba(2, 6, 23, .14); /* الحالات الدلالية — معايَرة للأساس الفاتح لا منقولة من الداكن */ --ok: #1E7A4E; --ok-bg: #E3F0E7; --warn: #7A5800; --warn-bg: #F5EBD3; --danger: #B02A37; --danger-bg: #F7E4E4; --info: #2B5FB8; --info-bg: #E4EBF7; /* فقاعات الدردشة (index.html/crm.html) */ --err: #B02A37; /* اسم بديل تاريخي للخطر (social.html) */ --brand-2: #9E7719; /* اللكنة الثانية — ذهب الحدود */ --brand-soft: #F1E8CF; /* خلفية ناعمة بلون الهوية */ --chip-ig: #A62B72; /* شارة إنستغرام نصًّا — 4.9:1 على خلفيتها */ --chip-ig-bg: #F6E3EE; --user: #E7DFC9; /* فقاعة الزبون — كريمي أعمق */ --agent: #DFEAE0; /* فقاعة الوكيل — اخضرار هادئ */ /* (UI-F-S · محور الاتساق) نصف القطر والحركة والظل والخط — بقيم المنصة نفسها: كان نصف قطر المحطة 12px مقابل 14px بالمنصة، وكانت العائلة `Rubik` (وليست خطًّا عربيًا أصلًا — فالعربية تسقط إلى Segoe UI) مقابل خطَّي المنصة. */ --radius: 14px; --radius-sm: 10px; --trans: 200ms cubic-bezier(.4, 0, .2, 1); --shadow: 0 2px 10px rgba(35, 43, 56, .07); --shadow-pop: 0 10px 26px rgba(35, 43, 56, .14); --font: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-display: "Noto Naskh Arabic", "Noto Sans Arabic", serif; /* ── (الموجة O · وصل الطلب A4) ألوان **الورق** — للطباعة من `receipt.html` ── الورق أبيض بحكم المطبعة لا بحكم الهوية، فهذه التوكنات لا تتبدّل مع سمة المحطة (لا تُعاد في كتلة الليل عمدًا). توكناتٌ لا ألوان حرفية لأن مسح D-1 يمنع اللون الحرفي في `crm/public`. المقيس: الحبر 18.9:1 والثانوي 8.6:1 والذهب 5.6:1 على الأبيض — كلها فوق 4.5:1. */ --paper: #FFFFFF; --paper-ink: #111111; --paper-muted: #4A4A4A; --paper-line: #C9BC9A; --paper-gold: #7E6318; --paper-soft: #F6F1E6; /* ── (الدفعة W1 · مسار الموقع) حبّات معاينة ثيمات **الموقع** في قسم «الموقع» ── ثلاث حبّات لكل ثيم: أرضيته وتمييزه وشريطه الداكن. هذه ألوان الموقع لا ألوان المحطة، فهي لا تتبدّل مع سمة المحطة (فاتحة/داكنة) — تُعرَّف هنا مرةً واحدة. وهي **توكنات لا ألوان حرفية** لأن مسح S64 يمنع اللون الحرفي في `crm/public`. حدُّ كل حبّة `--brand-edge` المقيس، وهي زخرفةٌ بلا نصٍّ فوقها فلا يلزمها 4.5:1. القيم منسوخة حرفًا من ملفات `website/public/css/themes/*.css` (الدفعة W2). */ --wt-base-bg: #FAF8F4; --wt-base-accent: #8A5A06; --wt-base-deep: #1C1917; --wt-winter-bg: #F4F7FA; --wt-winter-accent: #0F5C86; --wt-winter-deep: #0E1A26; --wt-spring-bg: #F7FAF4; --wt-spring-accent: #3F6B23; --wt-spring-deep: #182015; --wt-summer-bg: #FBF9F2; --wt-summer-accent: #00696B; --wt-summer-deep: #132022; --wt-autumn-bg: #FBF6EF; --wt-autumn-accent: #8A3D12; --wt-autumn-deep: #201408; --wt-ramadan-bg: #F7F6F2; --wt-ramadan-accent: #0C5B4A; --wt-ramadan-deep: #0A1614; --wt-eid-fitr-bg: #FAF9F5; --wt-eid-fitr-accent: #1F6B5E; --wt-eid-fitr-deep: #101A17; --wt-eid-adha-bg: #FAF7F1; --wt-eid-adha-accent: #6B4A12; --wt-eid-adha-deep: #17130B; --wt-valentine-bg: #FCF6F6; --wt-valentine-accent: #9B2141; --wt-valentine-deep: #1D0F13; } /* الوضع الداكن — نفس التوكنات بقيم الليل المعهودة (اختيار المستخدم) */ :root[data-theme="dark"] { --bg: #0F172A; --panel: #1E293B; --panel-2: #243449; --line: #334155; --ink: #E2E8F0; --muted: #94A3B8; --placeholder: #94A3B8; /* 6.96:1 على --bg و5.71:1 على --panel */ /* (UI-F-S) رُفع من #7C8CA3: كان 4.28:1 على `--panel` و3.69:1 على `--panel-2` — ونصوصه عناوينُ الأعمدة وعدّادات القنوات في `crm.html`. اليوم 5.32 و4.59. */ --dim: #909DB0; --brand: #E8CF7A; --brand-deep: #B8912E; --brand-edge: #D4AF37; --overlay: rgba(2, 6, 23, .72); --shadow-float: 0 10px 26px rgba(0, 0, 0, .35); --ok: #5FD394; --ok-bg: rgba(95, 211, 148, .12); --warn: #E5C558; --warn-bg: rgba(229, 197, 88, .12); --danger: #F08080; --danger-bg: rgba(240, 128, 128, .12); --info: #7DB8F0; --info-bg: rgba(125, 184, 240, .12); --err: #F08080; --chip-ig: #E77BBD; --chip-ig-bg: #4A1E3D; /* (UI-F-S) **انقلاب الهوية أُغلق**: كانت اللكنة الثانية ذهبًا `#9E7719` في الفاتح وتصير **أخضر زمرديًّا `#10B981`** في الداكن — أي أن هوية السراي تتبدّل بضغطة مبدّل وضع. صارت ذهب الليل نفسه (`--brand-edge`)، وخلفيتها الناعمة ظِلَّه لا ظلَّ الأخضر. */ --brand-2: #D4AF37; --brand-soft: rgba(212, 175, 55, .12); --user: #334155; --agent: #0E3D33; } /* ════════════════════════════════════════════════════════════════════════════ طبقة المكوّنات المشتركة (موجة UI-F-S — مراجعة المتصفح الحقيقي) ════════════════════════════════════════════════════════════════════════════ القاعدة الحاكمة: **ما تكرّر في عشر صفحات يُكتب هنا مرة**. الأصل أن كل صفحة كانت تكتب زرّها ورسائلها وشريط تنقّلها بنفسها، فوقع العطب الواحد عشر مرات وصار إصلاحه عشرة تحريرات يسهو عن أحدها أول من يضيف شاشة. */ /* ── الأساس: الخط عائلةُ المنصة نفسها (محور الاتساق الأول) ──────────────── كانت الصفحات الإحدى عشرة تستورد `Rubik` من خطوط جوجل بـ`@import` **حاجبٍ للرسم**، و`Rubik` ليس خطًّا عربيًا فالعربية تسقط إلى Segoe UI على كل حال. وأدهى: CSP المحطة في `deploy/Caddyfile` هو `style-src 'self'` و`font-src 'self'` بلا استثناء لجوجل — أي أن الاستيراد **محظورٌ أصلًا في الإنتاج**، وتعليق الملف نفسه يصرّح «مسح public/: صفر مرجع http(s) خارجي». فالحذف يجعل التصريح صادقًا ويزيل طلبَ شبكةٍ حاجبًا لا يُثمر حرفًا. */ body { background: var(--bg); color: var(--ink); font-family: var(--font); } h1, h2, h3 { font-family: var(--font-display); letter-spacing: .2px; } /* ── الزر الأساسي — قاعدة واحدة لعشر صفحات ──────────────────────────────── المقيس قبل هذا السطر: `.btn{background:var(--brand-deep);color:var(--ink)}` مكرّرةً حرفيًا في عشرة ملفات، ونسبتها **1.99:1** فاتحًا و**2.39:1** داكنًا (الحد 4.5:1) — أي أن نصّ زر العملية الأساسي شبه غير مقروء في المحطة كلها. وتأكيدٌ ذاتي أنه عطبٌ لا قصد: `:hover{background:var(--brand-soft)}` كان يجعل النص مقروءًا **عند التحويم وحده**. العلاج: الحبر على الذهب العميق يصير `--panel` (ورقُ اللوح) لا `--ink` — المقيس 6.75:1 فاتحًا و4.97:1 داكنًا، والتحويم يُعمَّق إلى `--brand` لا يُفتَّح إلى `--brand-soft` فتبقى النسبة فوق الحد في الحالتين (5.37 و9.50). */ .btn { background: var(--brand-deep); color: var(--panel); border: 0; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 13px; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 40px; /* هدف اللمس — الميثاق §5 */ transition: background var(--trans), color var(--trans), opacity var(--trans); } .btn:hover { background: var(--brand); color: var(--panel); } .btn:disabled { opacity: .55; cursor: default; } /* الزر الثانوي (نمط `button.ghost` بالمنصة حرفًا) */ .btn.ghost { background: transparent; border: 1px solid var(--brand-edge); color: var(--ink); } .btn.ghost:hover { background: var(--panel-2); border-color: var(--brand-edge); color: var(--ink); } .btn.danger { background: var(--danger); color: var(--panel); } .btn.danger:hover { background: var(--danger); color: var(--panel); filter: brightness(1.08); } /* ── (الموجة ز · ز-ع4/د) لون المثال في الحقل — أولُ قاعدةِ حقلٍ في ملف التوكنات ── أنماط حقول المحطة موزّعة على الصفحات (`crm.html` وأخواتها)، وهذا السطر لا ينقلها: يضبط **اللون وحده** حيث ينتمي — بجوار التوكن الذي يقرؤه. والسابقة قاعدةُ `.btn` نفسها التي وُحّدت هنا بعد أن كانت في عشرة ملفات. المقيس قبله: **2.05:1** على ما يثبّت `darkgray`؛ وبعده 5.19:1 على `--bg` و5.61:1 على `--panel`. و`opacity: 1` إلزامي — فايرفوكس يطبّق `.54` من ورقة عميله. */ input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; } /* ── (الموجة ح · ح-3/5 · ن-ح5-1 · س-ح-35) الرابط المجرّد بتوكن مقروء في السمتين ────────── كانت الورقة بلا قاعدة `a`، فرابطٌ بلا صنف (`#onCatalogLink` في قسم الأونلاين) يرث أزرق المتصفح: 1.90:1 في الليل. الذهب المعمَّق نصًّا مقيس 5.37:1 فاتحًا و9.50:1 داكنًا على الألواح، وتحويمه الذهب العميق 6.75/4.97. القواعد الأخصّ في الصفحات (التنقّل، الأزرار) تبقى بلونها. */ a { color: var(--brand); } a:hover, a:focus-visible { color: var(--brand-deep); } /* ── (الموجة ح · ح-3/5 · ن-ح5-7 · س-ح-38) حلقة التركيز الظاهرة قاعدةٌ واحدة في ملف التوكنات — بلون الحدّ المقيس (3.44/6.96) — والحارس يقيس وجودها في الورقتين */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-edge); outline-offset: 2px; } /* ── شريط التنقل: هدف اللمس أربعون بكسلًا في الصفحات الإحدى عشرة ────────── المقيس قبلها: 29–34px ارتفاعًا في كل رابط تنقّل بكل صفحة — والمحطة تُدار من الهاتف غالبًا (ردٌّ على زبون). الارتفاع وحده يُرفع: لا حجم خط يتغيّر ولا حشو أفقي، فالشكل هو الشكل وتكبر منطقة الإصبع. */ nav .links a, nav .links button { min-height: 40px; display: inline-flex; align-items: center; } /* مبدّل الوضع صار زرًّا (لا رابطًا) — فهيئتُه تُكتب هنا مرة لكل الصفحات. (الموجة ي · ط3-18) والمنتقي صار `#themeToggle` بلا تقييدٍ بشريط الروابط: الصفحاتُ الثماني تطبّق السمة، ومنها من شريطُها `