/* ============================================================================ dook-tokens.css — المرجع الواحد لكل قيمة بصرية في تطبيق دوك ---------------------------------------------------------------------------- بُني من: حزمة الهوية الرسمية (Brand Guidelines 2025) + اللوحة المعتمدة (APPROVED_SCREENS_2026-08-23) + وثيقة المتطلبات v1.1. التاريخ: 2026-08-26 قاعدتان تحكمان هذا الملف: 1) طبقتان لا واحدة. الطبقة الأولى «أصباغ العلامة» (--brand-*) وهي الموضع الوحيد في المشروع كله الذي يجوز أن يظهر فيه لونٌ حرفي. الطبقة الثانية «الأدوار» (--bg، --ink، --ok، --mine …) وهي وحدها ما تستعمله الشاشات. شاشةٌ تكتب --brand-teal بدل --ok تكون قد سمّت اللون ولم تسمِّ معناه. 2) كل نسبة تباين مكتوبة هنا **قِيست** بتركيب الطبقات على أرضيتها الفعلية، ولم تُقدَّر. ما لم يُقَس لا يُكتب. قرارات المالك المحسومة في هذه النسخة (2026-08-26) موسومة بـ [✓ سعد]. ============================================================================ */ /* ─── ١ · أصباغ العلامة — من دليل الهوية حرفياً، لا تُعدَّل ─────────────────── */ :root { /* الأساسية */ --brand-gunmetal: #1F2426; /* Dark Gunmetal · PANTONE 419 C */ --brand-yellow: #FFD64D; /* Gargoyle Gas · PANTONE 7548 C 70% */ --brand-yellow-2: #FFE183; --brand-yellow-3: #FFECB4; --brand-offwhite: #F3F3F3; /* Anti-Flash White · PANTONE 000 C */ --brand-white: #FFFFFF; --brand-slate: #313E47; --brand-gray: #898A8E; /* الثانوية */ --brand-violet: #8D5FFF; /* Violets Are Blue */ --brand-violet-dk: #54419D; --brand-violet-lt: #AF8FFF; --brand-violet-lt2: #D1BFFF; --brand-teal: #09CCB0; /* Tiffany Blue */ --brand-teal-dk: #02A58D; --brand-teal-lt: #52DBC8; --brand-teal-lt2: #9DEBDF; } /* ─── ٢ · ألوان مشتقّة — ليست من العلامة، ولكلٍّ سببٌ مكتوب ────────────────── */ /* العلامة بلا أحمر وبلا كهرماني وبلا لون بطاقة. هذه الستة وُلدت في جولة التصميم المعتمدة لأن المنتج يحتاج معانيَ لا تحملها اللوحة. تبقى هنا معزولةً وموسومة حتى لا تُقرأ يوماً على أنها هوية. */ :root { --d-card-dark: #262D30; /* بطاقة داكنة — مشتقّة من gunmetal +6% إضاءة */ --d-red: #E14B3F; /* «فعلُك أنت فشل» — لا وجود لأحمر في العلامة */ --d-red-ink-dark: #FF7A70; /* حبره على الداكن */ --d-red-surface-dark: #3A1F1D; --d-amber: #F5A85C; /* لافتة التصعيد الأولى */ --d-amber-surface: #3A2A14; --d-offline: #66727A; /* حشوة دبّوس المحطة الصامتة — 3.18 على الداكن */ /* تصويبات المقروئية — درجاتٌ تحرّكت واللون بقي. كلٌّ منها بديلُ لونِ علامةٍ سقط تحت العتبة على سطحه الفعلي، والنسبة القديمة مكتوبة بجانبه. */ --d-muted-dark: #A5A5A9; /* بديل --brand-gray داكناً (كان 4.06 على البطاقة) */ --d-muted-light: #6A6D71; /* بديل --brand-gray فاتحاً (كان 3.11 على bg) */ --d-teal-ui-light: #079D88; /* [✓ سعد] لا تركوازيَّ في العلامة يعبر فاتحاً */ --d-teal-ink-light: #057C6B; /* [✓ سعد] ‏#09CCB0 = 1.84 · #02A58D = 2.80 */ --d-red-ink-light: #C44137; --d-red-surface-light: #F8E7E5; --d-warn-ink-light: #936537; /* الكهرماني يعمى على الفاتح */ --d-warn-surface-light:#FBEEDF; } /* ─── ٣ · الأدوار · السمة الداكنة (الافتراضية) ─────────────────────────────── */ /* الأرقام بين قوسين نسبُ تباينٍ مقيسة على السطح المذكور. */ :root, [data-theme="dark"] { color-scheme: dark; /* أسطح */ --bg: var(--brand-gunmetal); --surface: var(--d-card-dark); --surface-2: rgba(243,243,243,.07); /* زرّ ثانوي · يركب على --bg ⇒ #2E3234 */ --sheet: rgba(38,45,48,.97); --scrim: rgba(0,0,0,.55); --hairline: rgba(243,243,243,.08); /* على --bg ⇒ #303536 · على --surface ⇒ #363D40 */ --hairline-str: rgba(243,243,243,.14); /* حبر محايد */ --ink: var(--brand-offwhite); /* 14.14 على bg · 12.61 على surface */ --ink-muted: var(--d-muted-dark); /* 6.39 على bg · 5.70 على surface */ /* ⚠ --brand-gray (#898A8E) لا يُستعمل حبراً على الداكن: 4.06 على البطاقة — دون العتبة. هذه الدرجة هي التصويب الموثَّق في tokens.css الحيّ. */ /* المعاني الأربعة — وهي أربعة فقط */ --ok: var(--brand-teal); /* 7.68 — «متاح · نجح · الجهاز حي» */ --ok-ink: var(--brand-teal-lt); /* 9.21 على bg · 8.21 على surface */ --ok-glow: rgba(9,204,176,.55); --ok-wash: rgba(9,204,176,.08); --mine: var(--brand-violet); /* 3.89 — واجهةٌ وعناوين كبيرة فقط */ --mine-ink: var(--brand-violet-lt); /* 6.12 على bg · 5.46 على surface */ --mine-glow: rgba(141,95,255,.70); --asleep: var(--d-offline); /* 3.18 كعنصر واجهة (حدّ 3:1) */ --asleep-ink: var(--ink-muted); --fail: var(--d-red); --fail-ink: var(--d-red-ink-dark); /* 6.18 على bg · 5.93 على سطحه */ --fail-surface: var(--d-red-surface-dark); --warn: var(--d-amber); /* 6.99 على سطحه */ --warn-surface: var(--d-amber-surface); /* الفعل الرئيسي — الأصفر تعبئةٌ أبداً، لا يكون حبراً لنصّ قط */ --cta: var(--brand-yellow); --cta-ink: var(--brand-gunmetal); /* 11.19 */ --cta-pressed: var(--brand-yellow-2); --cta-disabled: var(--brand-yellow-3); --cta-disabled-a: .4; --logo-ink: var(--brand-yellow); /* الشعار الأصفر على الداكن */ --focus-ring: var(--ink); /* 14.14 على أي سطح — بفجوة تُظهر ما خلفها */ } /* ─── ٤ · الأدوار · السمة الفاتحة ──────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: var(--brand-offwhite); --surface: var(--brand-white); --surface-2: rgba(31,36,38,.05); --sheet: rgba(255,255,255,.98); --scrim: rgba(31,36,38,.45); --hairline: rgba(31,36,38,.10); --hairline-str: rgba(31,36,38,.18); --ink: var(--brand-gunmetal); /* 14.14 على bg */ --ink-muted: var(--d-muted-light); /* 4.69 على bg · 5.20 على surface */ /* ⚠ --brand-gray (#898A8E) يسقط فاتحاً: 3.11 على bg · 3.45 على البطاقة. */ /* [✓ سعد] العلامة لا تملك تركوازياً يصلح حبراً على الفاتح: #09CCB0 = 1.84 · #02A58D = 2.80 — كلاهما دون العتبة. المعتمد أدناه أفتحُ درجةٍ تعبر 4.5:1 مع بقاء الميل نفسه — درجةٌ مشتقّة لا لونُ علامة، وتبقى موسومة في §٢ حتى لا تُقرأ يوماً هوية. */ --ok: var(--d-teal-ui-light); /* 3.06 — واجهةً/حدّاً فقط */ --ok-ink: var(--d-teal-ink-light); /* 4.61 على bg · 5.12 على surface */ --ok-glow: rgba(9,204,176,.35); --ok-wash: rgba(9,204,176,.10); --mine: var(--brand-violet); /* 3.63 — واجهةً فقط */ --mine-ink: var(--brand-violet-dk); /* 7.22 على bg */ --mine-glow: rgba(141,95,255,.35); --asleep: var(--ink-muted); --asleep-ink: var(--ink-muted); --fail: var(--d-red); /* 3.58 — واجهةً/حدّاً فقط */ --fail-ink: var(--d-red-ink-light); /* 4.55 على bg */ --fail-surface: var(--d-red-surface-light); --warn: var(--d-warn-ink-light); /* 4.55 على bg — الكهرماني يعمى فاتحاً */ --warn-surface: var(--d-warn-surface-light); --cta: var(--brand-yellow); --cta-ink: var(--brand-gunmetal); --cta-pressed: var(--brand-yellow-2); --cta-disabled: var(--brand-yellow-3); --cta-disabled-a: .55; --logo-ink: var(--brand-gunmetal); /* الأصفر لا يجلس على الفاتح */ --focus-ring: var(--ink); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: var(--brand-offwhite); --surface: var(--brand-white); --surface-2: rgba(31,36,38,.05); --sheet: rgba(255,255,255,.98); --scrim: rgba(31,36,38,.45); --hairline: rgba(31,36,38,.10); --hairline-str: rgba(31,36,38,.18); --ink: var(--brand-gunmetal); --ink-muted: var(--d-muted-light); --ok: var(--d-teal-ui-light); --ok-ink: var(--d-teal-ink-light); --ok-glow: rgba(9,204,176,.35); --ok-wash: rgba(9,204,176,.10); --mine: var(--brand-violet); --mine-ink: var(--brand-violet-dk); --mine-glow: rgba(141,95,255,.35); --asleep: var(--d-muted-light); --asleep-ink: var(--d-muted-light); --fail: var(--d-red); --fail-ink: var(--d-red-ink-light); --fail-surface: var(--d-red-surface-light); --warn: var(--d-warn-ink-light); --warn-surface: var(--d-warn-surface-light); --cta-disabled-a: .55; --logo-ink: var(--brand-gunmetal); } } /* ─── ٥ · علامات الدفع — ألوان مالكيها، وتُقاس كأيّ حبر ────────────────────── */ :root { --pay-mada: #58822E; /* 4.52 على أبيض. لون العلامة #6FA43A يعطي 2.98 — يسقط */ --pay-visa: #1A1F71; --pay-mc-a: #EB001B; --pay-mc-b: #F79E1B; --pay-ap-bg: #FFFFFF; --pay-ap-ink:#050505; } /* ─── ٦ · الخطوط ───────────────────────────────────────────────────────────── */ /* [✓ سعد · 2026-08-26] تعارضٌ عُرض وحُسم: دليل الهوية يجعل Changa الخط **الأول** للعربية والإنجليزية معاً، وMontserrat Arabic **الثاني**. والقرار: يبقى المنفَّذ — Montserrat Arabic للمتن العربي وChanga للإنجليزية وللأرقام. مخالفةٌ واعية لترتيب الدليل، مسجَّلة في التقرير باسم من قرّرها. والمفتاح الذي يقلبها يوماً هو --font-ar وحده — لا شيء آخر في المشروع يتغيّر معه. [✓ سعد] شكل الأرقام: **لاتينية دائماً** في اللغتين. السبب مكتوب لا مُفترض — العميل يقارن رقم الشاشة برقم الفتحة على الجهاز وبرقم كشف المصرف، وثلاثتها لاتينية. الدليل يعرض عيّنات عربية-هندية؛ اتُّبع الاستعمالُ لا العيّنة. */ :root { --font-en: "Changa", system-ui, -apple-system, sans-serif; --font-ar: "Montserrat Arabic", "Changa", system-ui, sans-serif; --font-num: "Changa", system-ui, sans-serif; /* الأرقام والمبالغ والفتحات */ --w-body: 400; --w-med: 600; --w-bold: 700; --w-hero: 800; } [lang="ar"] { font-family: var(--font-ar); } [lang="en"] { font-family: var(--font-en); } /* سلّم النص — نسبيّ بالكامل فيحترم إعداد حجم خط الجهاز */ :root { --t-hero: clamp(3.5rem, 16vw, 5.25rem); /* 56–84px · رقمٌ بطلٌ واحد للشاشة */ --t-h1: 1.625rem; /* 26 */ --t-h2: 1.375rem; /* 22 */ --t-title: 1.1875rem; /* 19 */ --t-body: 0.9375rem; /* 15 */ --t-body-sm: 0.875rem; /* 14 */ --t-caption: 0.8125rem; /* 13 */ --t-min: 0.75rem; /* 12 — الحدّ الأدنى المطلق */ --t-input: 1rem; /* 16 — دونها يكبّر iOS الصفحة عند التركيز */ --lh-tight: 1.25; --lh-body: 1.6; --lh-loose: 1.7; --ls-hero: -.02em; } .num, [data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ─── ٧ · المسافات · الأقطار · الأهداف ─────────────────────────────────────── */ :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --gutter: var(--s-6); /* 24 */ --section: var(--s-8); /* 32 */ --row-h: 52px; /* صفّ البطاقة 50–52 */ --card-pad: 4px 18px; --r-card: 16px; --r-btn: 12px; --r-input: 14px; --r-sheet: 24px; --r-pill: 999px; --chamfer: 14px; /* قصّة الزاوية — على الزرّ الأصفر وحده */ --hit: 44px; /* الحدّ الأدنى المطلق */ --hit-comf: 48px; --cta-h: 56px; --logo-h: 48px; /* [✓ سعد] الشعار الثنائي 460×270 ⇒ عرضٌ ≈82px. 44px كانت تعطي 75px — دون حدّ الهوية الرقمي. */ --logo-min-w: 80px; /* الحدّ الذي لا يُنزَل عنه — من دليل الهوية */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --shadow-sheet: 0 -18px 50px rgba(0,0,0,.5); --shadow-card: 0 2px 12px rgba(0,0,0,.18); --shadow-float: 0 2px 10px rgba(0,0,0,.30); } /* توقيع الشكل: القصّة الثمانية — استعمالها خارج الزرّ الأصفر خرقٌ للتسليم */ .cta-shape { clip-path: polygon( var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer)); } /* ثمانية الهوية — للدبابيس والشارات والأرقام المرقّمة */ .hex-shape { clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); } /* ─── ٨ · الحركة — محجوزة للحظات الآلة الثلاث ──────────────────────────────── */ :root { --dur-instant: 0ms; --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-pulse: 900ms; /* نبض توجيه الفتحة */ --dur-hold: 1200ms; /* مكوث لحظة النجاح */ --dur-fill: 600ms; /* امتلاء شريط الإرجاع */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-io: ease-in-out; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-pulse:0ms; --dur-fill:0ms; } /* القاعدة: الحركة تسكن، والدليل المكاني **يبقى**. الهالة تثبت ولا تختفي — من أطفأ الحركة لم يطفئ حاجته لمعرفة الفتحة. */ } /* ─── ٩ · حالات التفاعل ────────────────────────────────────────────────────── */ :root { --state-hover: rgba(243,243,243,.04); --state-pressed: rgba(0,0,0,.14); --state-disabled-a: .4; --focus-w: 2px; --focus-gap: 3px; } :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-gap); /* الفجوة تُظهر الصفحة خلفها ⇒ 14:1 على أي سطح */ } :where(button, a, [role="button"]) { min-block-size: var(--hit); touch-action: pan-x pan-y; /* لا تكبير بالنقر المزدوج داخل التطبيق */ -webkit-tap-highlight-color: transparent; } :where(button)[disabled] { opacity: var(--state-disabled-a); cursor: not-allowed; } /* ─── ٧ · جسر التسمية المؤقت — أدوار الشاشات الحية على مفردات المكتب ──────── الشاشات المبنية قبل هذه الحزمة تتكلم بأسماء أدوارها القديمة. كل اسم هنا يُحال إلى دور المكتب الذي يحمل معناه — فيلبس التطبيق كله ثوب المكتب اليوم، ويموت هذا القسم عضوًا عضوًا كلما أُعيد بناء شاشة بمفردات المواصفة نفسها. حيث لا نظير عند المكتب بقيت قيمة الحيّ السابقة بجانب اسمها — قرارها للمكتب لاحقًا، ولا يُخترع لون هنا. (tests/tokens-cover.mjs يضمن ألا يتدلى دور مستهلَك بلا تعريف.) */ :root { /* حبر وأسطح */ --text: var(--ink); --muted: var(--ink-muted); --dim: var(--ink-muted); --card: var(--surface); --card-line: var(--hairline); --line: var(--hairline-str); --hair: var(--hairline); --sheet-line: var(--hairline-str); --sheet-shadow: var(--shadow-sheet); --grabber: var(--ink-muted); --skeleton: var(--surface-2); --skeleton-hi: var(--hairline-str); --secondary: var(--surface-2); --secondary-press: var(--hairline-str); /* المعاني الأربعة بأسمائها القديمة */ --idle: var(--asleep); --idle-ink: var(--asleep-ink); --idle-line: var(--asleep); --idle-surf: var(--surface-2); --bad: var(--fail); --bad-ink: var(--fail-ink); --bad-line: var(--fail); --bad-surf: var(--fail-surface); --amber-ink: var(--warn); --amber-surf: var(--warn-surface); --ok-surf: var(--ok-wash); /* الأصفر فعلًا لا حبرًا — بأسمائه القديمة */ --yellow: var(--cta); --yellow-press: var(--cta-pressed); --yellow-off: var(--cta-disabled); --on-yellow: var(--cta-ink); --brand: var(--cta); --brand-ink: var(--cta-ink); /* صورةٌ لا لون — فخّ الصنف الثاني (بعد --cta): القديمة كانت خلفيةَ صورةٍ وجسرُ v15 أحالها إلى دور لونٍ فظهر لوحٌ أصفر مكان الشعار (لُقط على هاتف المالك). الشعار لا يُعاد تلوينه أبدًا: أصفر على الداكن وداكنٌ على الفاتح، بملفَّي العلامة نفسيهما. */ --logo: url('../../assets/brand/logo-bilingual-yellow.png'); /* مقاسات وخطوط */ --tap: var(--hit); --row: var(--row-h); --r-field: var(--r-input); --t-cap: var(--t-caption); --t-cardtitle: var(--t-title); --t-hero-sm: var(--t-h1); --figures: var(--font-num); --latin: var(--font-en); --arabic: var(--font-ar); --font: var(--font-ar); /* لا نظير عند المكتب — قيمة الحيّ السابقة تبقى موسومة */ --r-banner: 10px; --mine-surf: rgba(141,95,255,.10); --amber-line: rgba(245,168,92,.34); /* زجاج اللوحات المعتمدة (ورقة المطابقة 2026-08-28): حبّات الرأس ودوائر القاع وبطاقة الأقرب. اللوحة رسمت الليل؛ والنهار يقيس بميزان AA لا بالعين — أرضية فاتحة يقرأ عليها الحبر نفسه. */ --glass: rgba(30,36,39,.62); --glass-line: rgba(243,243,243,.13); --glass-hi: rgba(255,255,255,.10); --glass-deep: rgba(38,45,48,.94); --glass-deep-line: rgba(243,243,243,.07); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mine-surf: rgba(84,65,157,.09); --amber-line: rgba(154,91,18,.28); --logo: url('../../assets/brand/logo-bilingual-dark.png'); --glass: rgba(255,255,255,.72); --glass-line: rgba(31,36,38,.14); --glass-hi: rgba(255,255,255,.5); --glass-deep: rgba(255,255,255,.93); --glass-deep-line: rgba(31,36,38,.10); } } [data-theme="light"] { --mine-surf: rgba(84,65,157,.09); --amber-line: rgba(154,91,18,.28); --logo: url('../../assets/brand/logo-bilingual-dark.png'); --glass: rgba(255,255,255,.72); --glass-line: rgba(31,36,38,.14); --glass-hi: rgba(255,255,255,.5); --glass-deep: rgba(255,255,255,.93); --glass-deep-line: rgba(31,36,38,.10); }