/* ===================================================================== عون الأصول — رموز الهوية البصرية (aun-tokens.css) ⭐ **المصدر الوحيد** لكل قيمة بصرية في المشروع: الموقع، وبوابة الملّاك لاحقاً، ولوحة التحكم. يُربط **قبل أي ملف أنماط آخر**. منقول حرفياً من `الهوية-البصرية-عون` (خزنة System-Fawaz، معتمدة 2026-09-09). **لا يُخترع هنا لون ولا خط ولا مقاس** — ما ليس في الوثيقة لا يدخل هذا الملف، وما فيها لا يُعرَّف في ملف آخر. 🔴 ما نُقِض ولا يعود: الأخضر `#279022` وعائلته · `Inter`/`Tajawal`. التسمية **دلالية لا وصفية** حيث أمكن: `--aun-green-field` يبقى صحيحاً لو تغيّرت درجته، أما `--green-800` يصير كذباً لحظة تعديل السلّم. وهو ما يجعل قاعدة «الأرضية 800» منفَّذةً في الكود لا مكتوبة في وثيقة — من يكتب `var(--aun-green-field)` لا يخالفها سهواً. ===================================================================== */ /* ── الخطوط: مستضافة ذاتياً ────────────────────────────────────────── لا طلب إلى Google: عنوان IP كل زائر كان يُرسل إلى طرف ثالث بلا حاجة، وهو اعتبار PDPL نفسه الذي رُوعي في سياسة بيت النائف. والملفات ساكنة في المستودع فلا خطوة بناء ولا تبعية شبكة. `unicode-range` يجعل المتصفح ينزّل المجموعة الفرعية التي تلزم الصفحة فعلاً — فصفحة عربية لا تُحمّل محارف لاتينية موسّعة. `font-display: swap` يعرض النص فوراً بخط احتياطي ثم يبدّله، فلا تبقى الصفحة بيضاء بانتظار خط. ------------------------------------------------------------------ */ @import url('/assets/css/aun-fonts.css'); :root { /* ══════════════ 1) الألوان ══════════════ */ /* الأساسية */ --aun-green: #348300; /* أخضر عون — الدرجة 600 */ --aun-black: #231f20; /* أسود عون — K100، لا أسود مطلق */ --aun-white: #ffffff; --aun-ground: #f3f2f2; /* رمادي الأرضية */ /* ⭐ الأرضية الخضراء الممتلئة — 800 لا 600. السبب مقيس: الأبيض على 600 يعطي 4.78:1 فيمرّ بالحدّ الأدنى **ويرسب فعلياً تحت ضوء الشمس على الجوال** — وهو وضع من يقرأ لافتة على باب. الانتقال إلى 800 يضاعف التباين إلى 10.51:1 بلا أي تغيير في هوية اللون: العين تقرأ الاثنين «أخضر عون». */ --aun-green-field: #1a4901; /* سلّم الأخضر — مولَّد في OKLCH على سلّم إضاءة مشترك مع الرمادي، فالدرجة 600 من الاثنين متساوية في الوزن البصري. عائد ذلك أن استبدال لون بلون لا يخلّ بالتسلسل الهرمي. */ --aun-green-100: #eafbe4; --aun-green-200: #d2f4c6; --aun-green-300: #aee29b; /* النص الأخضر على الخلفيات الداكنة */ --aun-green-400: #7fc765; --aun-green-500: #55a632; --aun-green-600: #348300; /* = --aun-green */ --aun-green-700: #286900; /* النص الأخضر والروابط على الأبيض (6.8:1) */ --aun-green-800: #1a4901; /* = --aun-green-field */ --aun-green-900: #0e2f01; /* سلّم الرمادي الدافئ */ --aun-neutral-100: #f8f4f4; --aun-neutral-200: #eae7e7; --aun-neutral-300: #d7d3d3; --aun-neutral-400: #bab6b6; --aun-neutral-500: #9b9797; --aun-neutral-600: #7d7979; --aun-neutral-700: #605d5d; --aun-neutral-800: #444141; --aun-neutral-900: #2d2b2b; /* ⚠️ ألوان الحالة — للتطبيق ولوحة التحكم **حصراً**. ظهور الأصفر أو الأحمر في بروشور أو صفحة تعريفية يحوّل أربع دلالات تشغيلية دقيقة إلى زخرفة، فتفقد قوّتها حيث هي مطلوبة. مُعرَّفة هنا لأن الملف واحد لكل المنصّات، **ولا تُستعمل في الموقع العام**. و«مكتمل» = أخضر عون نفسه: نجاح الخدمة يحمل لون الشركة. */ --aun-status-done: #348300; --aun-status-done-tint: #eafbe4; --aun-status-done-deep: #1a4901; --aun-status-progress: #2a75ba; --aun-status-progress-tint:#e9f3ff; --aun-status-progress-deep:#0e4f86; --aun-status-pending: #dd9314; --aun-status-pending-tint: #ffefdc; --aun-status-pending-deep: #7d5002; --aun-status-urgent: #c93029; --aun-status-urgent-tint: #ffedea; --aun-status-urgent-deep: #8d1b17; /* ── أدوار دلالية على الأسطح والنصوص (الوضع الفاتح) ── */ --aun-surface: #ffffff; --aun-surface-raised: #f3f2f2; /* البطاقات وخلفيات الحقول */ --aun-surface-sunken: #eae7e7; --aun-text: #231f20; /* 16.3:1 ✅ */ --aun-text-muted: #605d5d; /* neutral-700 — 6.7:1 ✅ */ --aun-text-inverse: #ffffff; --aun-link: #286900; /* green-700 — 6.8:1 ✅ للنص الصغير */ /* الفاصل 2px بلون الحبر 40% — والشعري 1px لصفوف الجداول. الفاصل يفصل بيقين؛ والفراغ البديل عنه يتآكل أول ما يزدحم المحتوى. ولا خطوط شعرية باهتة بين الأقسام. */ --aun-rule-color: color-mix(in srgb, var(--aun-black) 40%, transparent); --aun-hairline-color: color-mix(in srgb, var(--aun-black) 14%, transparent); /* ══════════════ 2) التيبوغرافيا ══════════════ */ --aun-font-ar: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif; --aun-font-latin: 'Archivo', 'IBM Plex Sans Arabic', system-ui, sans-serif; --aun-font-mixed: 'Archivo', 'IBM Plex Sans Arabic', system-ui, sans-serif; /* سلّم الأحجام — معاير على مقاييس هذين الخطّين تحديداً. تبديل الخط يُبطل السلّم، ولهذا لا خط ثالث ولا «مشابه». */ --aun-text-display: 4rem; /* 64px */ --aun-text-h1: 2.5rem; /* 40px */ --aun-text-h2: 2rem; /* 32px */ --aun-text-h3: 1.5rem; /* 24px */ --aun-text-body: 1rem; /* 16px */ --aun-text-small: 0.875rem; /* 14px */ --aun-text-caption: 0.75rem; /* 12px — الحد الأدنى المطلق */ /* ⭐ 1.7 للعربي لا 1.5: التشكيل والنقاط تحت خط الأساس تحتاج فسحة، والقيمة اللاتينية المعتادة تُنتج ازدحاماً يُقرأ «رخيصاً». */ --aun-leading-body: 1.7; --aun-leading-small: 1.6; --aun-leading-h1: 1.2; --aun-leading-h2: 1.25; --aun-leading-h3: 1.3; --aun-leading-display: 1.15; --aun-weight-regular: 400; --aun-weight-medium: 500; --aun-weight-semibold: 600; --aun-weight-bold: 700; /* ══════════════ 3) الشكل والمسافة ══════════════ */ /* 🔴 صفر انحناء — قرار هوية لا تفضيل. الانحناء يُنتج انطباع «تطبيق ودود»، والمطلوب انطباع **سجلّ موثوق**. لشركة تدير أصولاً ليست مملوكة لها، الانضباط هو الرسالة. */ /* 🔴 نُقضت «زوايا حادة» على الموقع (قرار المالك 2026-09-30): كل صندوق بزوايا مستديرة كبطاقة 24/7. رمزان لا رقم مكرّر — الصناديق الكبيرة `--aun-radius` والأزرار والمفاتيح `--aun-radius-sm` (أصغر كي لا يصير الزرّ القصير بيضوياً). */ --aun-radius: 1rem; --aun-radius-sm: 0.625rem; --aun-radius-lg: 1.5rem; /* البطاقات المكدّسة */ --aun-radius-xl: 2.25rem; /* شريط الدعوة */ /* ظلّا البطاقات: ناعمان مائلان للأخضر لا رماديّان — كالمرجع. */ --aun-shadow-card: 0 10px 30px -14px color-mix(in srgb, var(--aun-green-900) 30%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--aun-green-900) 10%, transparent); --aun-shadow-card-hover: 0 22px 44px -16px color-mix(in srgb, var(--aun-green-900) 38%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--aun-green-900) 14%, transparent); /* 🔴 استثناءٌ مسجَّل من «زوايا حادة» (قرار المالك 2026-09-30): بطاقتا الافتتاحية العائمتان **وحدهما**. رمزٌ مستقل لا تعديلٌ على `--aun-radius` — فيبقى الأصل صفراً في كل ما عداهما، ويُعرف موضع الاستثناء بالبحث عن اسمه. */ --aun-radius-badge: 1.25rem; --aun-shadow-badge: 0 18px 40px -12px color-mix(in srgb, var(--aun-green-900) 28%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--aun-green-900) 14%, transparent); --aun-rule: 2px; --aun-hairline: 1px; /* إيقاع عمودي 8px — كل مسافة مضاعف له */ --aun-space-1: 0.25rem; --aun-space-2: 0.5rem; --aun-space-3: 0.75rem; --aun-space-4: 1rem; --aun-space-6: 1.5rem; --aun-space-8: 2rem; --aun-space-12: 3rem; --aun-space-16: 4rem; --aun-space-24: 6rem; /* الظل **وسيلة ارتفاع لا زخرفة**، ولا يُستعمل بديلاً عن الفاصل: الفاصل يقول «قسمان» والظل يقول «طبقتان»، وهما معنيان مختلفان. والقيمة على حبر دافئ (45,43,43) لا أسود مطلق. */ --aun-shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.14); --aun-shadow-md: 0 3px 10px rgba(45, 43, 43, 0.16); --aun-shadow-lg: 0 12px 32px rgba(45, 43, 43, 0.22); /* ══════════════ 4) التخطيط والحركة ══════════════ */ --aun-container: 75rem; /* 1200px */ --aun-header-h: 4.5rem; --aun-touch-min: 2.75rem; /* 44px — الحد الأدنى للمس */ --aun-duration-fast: 150ms; --aun-duration-base: 200ms; --aun-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ===================================================================== الوضع الداكن ⭐ القاعدة العكسية للحدس: الألوان على الخلفيات الداكنة **تُفتَّح لا تُغمَّق**. النص الأخضر يصير `300 #aee29b` (7.09:1 على الأسود) لا `700`. مخالفة هذه القاعدة هي سبب أكثر أعطال الوصولية في الثيم الداكن. 🔴 **وآليةٌ واحدة لا اثنتان: الاختيار الصريح وحده** (قرار المالك 2026-09-21). حُذفت كتلة `@media (prefers-color-scheme: dark)` التي كانت تلوّن `:root:not([data-theme])`، لأن `theme.js` صار **يكتب السمة دائماً** — فلم تكن تلك الكتلة لتُطابق أبداً. ⚠️ وحذفُها ليس تنظيفاً تجميلياً: قاعدةٌ لا تُطابق تبقى نصّاً قابلاً للقراءة، فيأتي من بعدنا فيعدّل قيمها ويظنّ أنه غيّر شيئاً. الكود الميت يكذب أخطر ممّا يُبطئ. ⭐ والافتراض الفاتح مضمون حتى بلا JS: قيم `:root` أعلاه فاتحة أصلاً، فغياب السمة يُعطي ما تُعطيه `[data-theme='light']` بالضبط. ===================================================================== */ :root[data-theme='dark'] { color-scheme: dark; --aun-surface: #171717; --aun-surface-raised: #211f1f; --aun-surface-sunken: #0f0e0e; --aun-text: #f8f4f4; --aun-text-muted: #bab6b6; --aun-link: #aee29b; --aun-green: #aee29b; --aun-green-field: #1a4901; --aun-rule-color: color-mix(in srgb, #f8f4f4 32%, transparent); --aun-hairline-color: color-mix(in srgb, #f8f4f4 14%, transparent); --aun-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --aun-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55); --aun-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* الفاتح الصريح: `color-scheme` وحدها تكفي — القيم الافتراضية في `:root` فاتحة أصلاً، وإعادة تعريفها تكرار يفترق عند أول تعديل. */ :root[data-theme='light'] { color-scheme: light; } /* 🔴 تحجيمٌ متدرّج لكل شاشة (قرار المالك 2026-09-30) — ينقض قفزة الجوال 20%. كل رمز خطٍّ ومسافةٍ قسميّة **خطّيٌّ بين عرضين**: قيمته الكاملة عند 1280px فأعرض، ونصفها عند 390px فأضيق، وبينهما يتدرّج مع عرض الشاشة. فلكل شاشة حجمها **والترتيب واحد** — لا قفزة عند نقطة كسر. ⭐ مولَّدة بمعادلة لا مكتوبة باليد: `clamp(m, a + b·vw, D)` حيث يمرّ الخطّ بـ(390, m) و(1280, D). ولتغيير النسبة تُغيَّر m ويُعاد التوليد. ⭐ **رموز الخط والمسافة لا `html { font-size }`**: تصغير الجذر يُصغّر كل `rem` ومنها `--aun-touch-min` (44px) فينزل هدف اللمس تحت حدّ الإصبع. ولذلك أيضاً **المسافات الصغيرة (1–4) لا تتدرّج**: هي حشوات الأزرار. ⚠️⚠️ **استثناءٌ واحد معلن: النص والنص الصغير لا ينزلان تحت 12px** — نصفُ 16 هو 8px ولا يُقرأ على الجوال. طُلب 50% «للخطوط والأقسام»، فنُفِّذ كاملاً للعناوين والمسافات والبطاقات، وتوقّف النص عند حدّ القراءة. و`h3` حدّها 14px كي يبقى العنوان أكبر من النص تحته. */ :root { --aun-text-h1: clamp(1.25rem, 0.7022rem + 2.2472vw, 2.5rem); --aun-text-h2: clamp(1rem, 0.5618rem + 1.7978vw, 2rem); --aun-text-h3: clamp(0.875rem, 0.6011rem + 1.1236vw, 1.5rem); --aun-text-body: clamp(0.75rem, 0.6404rem + 0.4494vw, 1rem); --aun-text-small: clamp(0.75rem, 0.6952rem + 0.2247vw, 0.875rem); --aun-space-6: clamp(0.75rem, 0.4213rem + 1.3483vw, 1.5rem); --aun-space-8: clamp(1rem, 0.5618rem + 1.7978vw, 2rem); --aun-space-12: clamp(1.5rem, 0.8427rem + 2.6966vw, 3rem); --aun-space-16: clamp(2rem, 1.1236rem + 3.5955vw, 4rem); --aun-space-24: clamp(3rem, 1.6854rem + 5.3933vw, 6rem); }