/* ══════════════════════════════════════════════════════════════════
   إتقان تك — ترميز التصميم (Design Tokens)
   الاتجاه الحالي: «سينمائي عميق» (Cinematic Minimalism / Deep-sea Glass)
   المرجع الملزم: uxnew/velorah_cinematic/DESIGN.md + لقطات uxnew/

   ملف واحد بيقرا منه الموقع (index.html) ولوحة التحكم (itqan-cp9x.html).
   ممنوع أي hex مثبّت جوّا المكوّنات. كل شي من هون.

   ليش الاتجاه تغيّر: صاحب الشركة رفع مرجع بصري (Velorah) وطلب الموقع
   يصير بنفس الشكل — خلفية كحلية غامقة، أسطح زجاجية، لكنة سماوية مضيئة،
   وطباعة سيريف عرضية. والأهم: شعار إتقان (درع معدني أزرق-تركوازي) بيجلس
   على هالخلفية طبيعياً — كان غريب على العاجي.

   القاعدة الحاكمة: العمق بالانكسار والضوء، مش بالظلال.
   ممنوع box-shadow كأداة عمق — الحدود الشعرية (light-leak) والـblur بيكفوا.
   الوحيد المسموح يضوّي: السماوي.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── الألوان ──────────────────────────────────────────────────
     تحديث الاتجاه (بطلب صاحب الشركة): الموقع كان بلكنة وحدة — سماوي نيون
     فوق فراغ كحلي. النتيجة إنه كل شي طلع بنفس الوزن البصري: السعر،
     والعنوان، وزر التواصل، ورقم الخطوة كلهم سماوي — فالزبون ما كان عنده
     أي دليل لوني بيقوده على المهم.

     القاعدة الحاكمة الجديدة — **لكنة دلالية: كل لون له وظيفة وحدة.**
       أخضر  = فعل التواصل (الأولوية القصوى)
       ذهبي  = فلوس — الأسعار والباقات والضمان
       سماوي = العلامة والروابط والتركيز
       بنفسجي/مرجاني = هوية قسم، زخرفة بحتة
     ولا لون بينحط لأنه حلو. بينحط لأنه بيقول شي.

     وقاعدة الراحة للعين — **ملء صلب واحد مشبع لكل مجموعة مكوّنات.**
     الفعل (واتساب) هو الوحيد اللي بياخد ملء دائم؛ الباقي كله حدود وخيوط
     وأرقام مفرّغة وتلوين ١٢٪. هيك الصفحة بتصير ملوّنة بلا ما تصير صاخبة.

     (القاعدة القديمة "لكنتين بس ولا لون تالت" انلغت هون عن قصد — مش سهواً.) */
  --bg:            #0B1622;   /* الفراغ — أقل تشبّعاً وأدفأ من #001523: النيون فوق كحلي مشبّع بيتعب العين */
  --bg-deep:       #070F18;   /* أعمق نقطة — الفوتر والشريط */
  --bg-raise:      #10202F;   /* أعلى نقطة — رأس اللوحة الملتصق */

  /* الأسطح الزجاجية — تعبئة بيضاء منخفضة الشفافية فوق الفراغ.
     ممنوع تنحط hex هون: الزجاج لازم يشفّ على اللي تحته.

     تصحيح مطابقة للمرجع: المستوى ١ كان ٣٪ فطلعت الكروت مسطّحة —
     DESIGN.md بيحدّد ٠٫١ لأسطح الزجاج الرئيسية و٠٫٠٣ للوحات الخلفية
     الزخرفية بس. فرفعنا السلّم كامل وضلّت مرتّبة، و٣٪ صارت --surface-0. */
  --surface-0:     rgba(255,255,255,.03);   /* المستوى ٠ — لوحات خلفية/زخرفة */
  --surface:       rgba(255,255,255,.10);   /* المستوى ١ — الكروت */
  --surface-2:     rgba(255,255,255,.14);   /* المستوى ٢ — المرور/النشط */
  --surface-3:     rgba(255,255,255,.18);   /* المستوى ٣ — الطافي/الرأس */
  /* أسطح معتمة — للأماكن اللي الزجاج بينهار فيها:
     <option> داخل <select>، ملء المودالات، خلفيات الشبكات ١px. */
  --surface-solid:   #12212F;
  --surface-solid-2: #1A2C3D;

  /* الحدود = "تسرّب ضوء" ١px. هي بديل الظل بالكامل. */
  --line:          rgba(255,255,255,.14);
  --line-strong:   rgba(255,255,255,.18);

  --text:          #F2F5F8;   /* النص الأساسي — ١٦.٧:١ على الفراغ */
  /* الثانوي ارتفع من #8096A8: كان ٥.٩:١ (AA بالعافية) والموقع كامل نصّه
     الوصفي بهاللون. صار ٧.٥:١ — AAA. أرخص تحسين قراءة بالملف كله. */
  --muted:         #93A9BC;
  --muted-strong:  #B4C7D6;

  /* ── اللكنات الدلالية ────────────────────────────────────────
     لكل لكنة أربع صيغ ثابتة، بنفس الترتيب دايماً:
       --x         الصافي   — نص/أيقونة/حدّ
       --x-soft    ١٢٪      — خلفية عند المرور، وهالة القسم
       --x-dim     ٣٥٪      — حدود ومساطر
       --x-bloom   توهّج     — للأرقام المفرّغة (drop-shadow بيلاحق الحدّ)
     كل النسب مقيسة على --bg، ومكتوبة صريحة (بلا color-mix) عشان تضل
     تشتغل بالمتصفحات القديمة زي باقي الملف. */

  /* ١) سماوي — العلامة، الروابط، حلقة التركيز، قسم الخدمات.
     خفّ من #00E3FD لـ#38D3EE: النيون الكامل بيخلّي أثر لاحق (afterimage)
     على خلفية غامقة. لسا ١٠.٢:١ — AAA حتى بالنص الصغير. */
  --teal:          #38D3EE;
  --teal-soft:     rgba(56,211,238,.12);
  --teal-dim:      rgba(56,211,238,.35);
  --teal-bloom:    drop-shadow(0 0 10px rgba(56,211,238,.45));

  /* ٢) ذهبي — الفلوس. الأسعار والباقات وشريط الضمان.
     دافي فوق كحلي بارد = أعلى تباين لوني ممكن بالصفحة، فعين الزبون بتروح
     على السعر أول شي. وهاد بالضبط وعد إتقان: "بسعر معلن". ١٠.٢:١. */
  --gold:          #F2B84B;
  --gold-soft:     rgba(242,184,75,.12);
  --gold-dim:      rgba(242,184,75,.35);
  --gold-bloom:    drop-shadow(0 0 10px rgba(242,184,75,.45));

  /* ٣) أخضر واتساب — فعل التواصل. أعلى أولوية بالصفحة.
     لون منصّة، مش لون علامة — ولهيك مستثنى من أي قاعدة تناغم. ٩.٢:١. */
  --wa:            #25D366;
  --wa-soft:       rgba(37,211,102,.12);
  --wa-dim:        rgba(37,211,102,.35);
  --wa-bloom:      drop-shadow(0 0 10px rgba(37,211,102,.45));
  --wa-deep:       #0F7A3D;   /* حالة المرور — أبيض فوقه ٥.٤:١ ✓ */

  /* ٤) بنفسجي — هوية قسم "كيف نعمل". ٥.٨:١ (AA). زخرفة، مش نص جسم. */
  --violet:        #9B7BFF;
  --violet-soft:   rgba(155,123,255,.12);
  --violet-dim:    rgba(155,123,255,.35);
  --violet-bloom:  drop-shadow(0 0 10px rgba(155,123,255,.45));

  /* ٥) مرجاني — هوية قسم الأعمال والأنظمة الجاهزة. ٧.٣:١. */
  --coral:         #FF7E5F;
  --coral-soft:    rgba(255,126,95,.12);
  --coral-dim:     rgba(255,126,95,.35);
  --coral-bloom:   drop-shadow(0 0 10px rgba(255,126,95,.45));

  /* أزرق جليدي شاحب — زخرفة محايدة: مساطر الشارات والخيوط القصيرة بس.
     الأسعار انتقلت منه للذهبي، فدوره ضاق عن قصد. ١٥.٢:١. */
  --brass:         #BDF4FF;
  --brass-dim:     rgba(189,244,255,.30);

  --white:         #FFFFFF;

  /* لون القسم النشط — كل قسم بيعيد تعريف هالثلاثة محلياً (شوف index.html).
     المكوّنات بتقرأ من --sec مش من --teal، فتلوين قسم كامل صار سطر واحد. */
  --sec:           var(--teal);
  --sec-soft:      var(--teal-soft);
  --sec-dim:       var(--teal-dim);
  --sec-bloom:     var(--teal-bloom);

  /* الشريط الغامق (الضمان + الفوتر) — أعمق من الخلفية بدل أفتح. */
  --band:          #070F18;
  --band-text:     #F2F5F8;

  /* ── ألوان العلامات الاجتماعية ───────────────────────────────
     قيم رسمية. الرقاقات ملء بلون العلامة + شعار أبيض — هيك بتقدّم
     المنصّات حالها فعلياً، وهاد أصدق تمثيل لـ"شعاراتهم الحقيقية".
     مقيس: أبيض فوق fb ٤.٢:١، فوق li ٥.٧:١، فوق ig ٤.٧:١، فوق tt ٢٠.٩:١
     — كلها فوق عتبة عناصر الواجهة (٣:١). */
  --fb:            #1877F2;
  --li:            #0A66C2;
  --ig:            #E1306C;   /* احتياطي صلب لو التدرّج ما اشتغل */
  --ig-gradient:   linear-gradient(45deg,#FEDA75 0%,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5 100%);
  /* تيك توك: خلفيته الحقيقية سودا، وفوق فراغ كحلي بتعطي ١.١:١ — يعني
     بتذوب بالخلفية. ولهيك رقاقته لحالها بتاخد حدّ ١px فاتح (index.html).
     مقيس، مش ذوق. */
  --tt-bg:         #010101;
  --tt-cyan:       #25F4EE;
  --tt-red:        #FE2C55;

  --danger:        #FF3366;
  --success:       #3DDC97;

  /* أسماء متوافقة مع لوحة التحكم — لحد ما تتوحّد كل المحدّدات.
     تنبيه: --primary بتنستعمل كـلون نص باللوحة (أرقام، أيقونات، تبويب
     نشط) — فلازم تضل السماوي، مش الأبيض. */
  --sidebar:  var(--band);
  --card:     var(--surface);
  --card2:    var(--surface-2);
  --primary:  var(--teal);
  --warning:  var(--gold);
  --border:   var(--line);

  /* ── الزجاج ──────────────────────────────────────────────────
     المستوى ١: ٢٤px. المستوى ٢ (طافي/ملتصق): ٤٠px.
     أي عنصر بياخد blur لازم ياخد حدّ ١px كمان — بدونه بينحلّ بالفراغ. */
  --blur:     24px;
  --blur-hi:  40px;

  /* ── التوهّج ─────────────────────────────────────────────────
     خفّ ٢٠٪ مع تخفيف السماوي — التوهّج القوي فوق خلفية غامقة بيعمل هالة
     بتضبّب حواف النص، وهي أول سبب لإجهاد العين بالوضع الليلي.
     استعمال محدود: مؤشرات نشطة، أرقام بيانات، تركيز. */
  --glow:        0 0 20px rgba(56,211,238,.28);
  --glow-soft:   0 0 12px rgba(56,211,238,.18);
  --glow-text:   0 0 20px rgba(56,211,238,.24);
  /* توهّج ذهبي — للسعر والباقة المميّزة. نفس الجهاز بلون تاني. */
  --glow-gold:   0 0 20px rgba(242,184,75,.28);

  /* ── الخطوط ──────────────────────────────────────────────────
     عربي: Markazi Text (عرض) + IBM Plex Sans Arabic (نص).
     عبري:  Frank Ruhl Libre (عرض) + Assistant (نص). ليش هدول بالذات:
       · Frank Ruhl Libre سيريف تحريري عبري بنسب قريبة من Markazi Text،
         والأهم إنه عائلة متغيّرة ٣٠٠–٩٠٠ — فبيعطي ٥٠٠/٦٠٠/٧٠٠ الحقيقية
         اللي التصميم بيطلبها. البدائل الأحلى (Bellefair, Suez One) وزن
         ٤٠٠ بس، فكل عنوان ٦٠٠ كان بينعرض بتغميق صناعي — وعلى سيريف عالي
         التباين بحجم ٩٢px بيطلع ساق ملطوشة. مرفوض لهالسبب.
       · Assistant إنساني منخفض التباين بارتفاع x قريب من Plex Arabic،
         ومتغيّر ٢٠٠–٨٠٠. Heebo كان التالي بس مشتق من Roboto (نيو-غروتيسك)
         وبيقرا أبرد جنب دفا Plex العربي.
     · رمز ₪: --font-text بيضل فيه IBM Plex Sans Arabic بالاتجاهين. الاحتياطي
       بالمتصفح بيشتغل **لكل حرف لحاله**، فحتى لو الخط الأول ما حمل الجليف
       بينزل للتالي. وجود Plex بالسلسلة هو اللي بيخلّي ضمانة ₪ غير مشروطة.
     · انحذف Cormorant Garamond: كان احتياطي غير مستعمل، وحذفه بيعوّض وزن
       العائلتين العبريتين الجديدتين. */
  --font-display: 'Markazi Text', 'Frank Ruhl Libre', 'Instrument Serif', serif;
  --font-latin:   'Instrument Serif', 'Markazi Text', serif;
  --font-text:    'IBM Plex Sans Arabic', 'Assistant', 'Inter', system-ui, sans-serif;
  --font-num:     'Jost', 'Assistant', 'Inter', 'IBM Plex Sans Arabic', sans-serif;

  /* ── المقاسات ─────────────────────────────────────────────────
     الهيرو صار سينمائي: أكبر بوضوح من قبل، لأن الخلفية العميقة
     بتتحمّل وزن طباعي أكبر بكتير من العاجي. */
  --h1:    clamp(40px, 7.2vw, 92px);
  --h2:    clamp(28px, 4vw, 48px);
  --h3:    24px;
  --body:  17px;
  --small: 14px;
  --label: 12px;
  /* السعر كبر: هو المرساة البصرية للقسم الأهم، والذهبي بيتحمّل الحجم. */
  --price: clamp(34px, 4.2vw, 52px);
  --idx:   72px;

  /* ── الإيقاع ───────────────────────────────────────────────── */
  --gutter:      32px;
  --max:         1240px;
  --section-y:   140px;
  --lh-arabic:   1.9;

  /* ── الحواف ──────────────────────────────────────────────────
     "هندسي ناعم": الحاويات ١٦–٢٤px، عناصر اللمس حبّة كاملة.
     الحبّة بتميّز "هاد بينكبس" عن "هاد بيحتوي". */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* ── الحركة ─────────────────────────────────────────────────
     تسهيل سينمائي — دخول سريع وهبوط طويل. */
  --ease:   cubic-bezier(.23, 1, .32, 1);
  --t-fast: 300ms;
  --t-mid:  600ms;
  --t-slow: 900ms;

  /* ── الغلاف الجوّي ────────────────────────────────────────────
     الفراغ الكحلي لحاله بيطلع لون مسطّح — المرجع بيعطيه عمق بإضاءة
     سينمائية: بؤر شعاعية خفيفة جداً فوق الخلفية. CSS صافي، بلا صور
     وبلا جافاسكربت. انحطّت هون لأن القاعدة "ولا hex جوّا المكوّنات"
     بتنطبق على طبقات الزخرفة زي ما بتنطبق على النص. */
  --atmo-teal: rgba(56,211,238,.10);   /* البؤرة العلوية — مصدر الضوء، سماوي */
  --atmo-gold: rgba(242,184,75,.055);  /* هالة دافية جانبية — بتكسر برودة الكحلي */
  --atmo-deep: rgba(155,123,255,.05);  /* ارتداد سفلي بنفسجي باهت */
  --atmo-ice:  rgba(189,244,255,.05);  /* محتفظ فيه: لوحة التحكم لسا بتستعمله */

  /* توهّج كفلتر مش كظل: الأرقام المفرّغة (-webkit-text-stroke) ما بتاخد
     text-shadow نضيف — الظل بينرسم من شكل الحرف كامل مش من الحدّ.
     drop-shadow بيلاحق الحدّ نفسه، فبيشتعل الرقم صح عند المرور. */
  --bloom: var(--teal-bloom);   /* اسم قديم محفوظ — لوحة التحكم لسا بتستدعيه */

  /* ── إضافات لوحة التحكم (itqan-cp9x.html) ─────────────────────
     ملحق بحت — ما بيلغي ولا بيعيد تسمية ولا قيمة فوق. سبب وجوده:
     اللوحة كانت مليانة rgba مثبّتة جوّا الـ<style> والـmarkup (أخضر
     الإشعار، أحمر الخروج، أصفر بقايا لوحة ألوان انقرضت). نقلناها لهون
     عشان تضل قاعدة «ولا لون خارج الترميز» صحيحة مش شعار. */

  /* الدلالي الناعم: خلفية وحدّ لشرائح النجاح/الخطر بدل الملء الصلب.
     الملء الصلب كان بيصرخ فوق الفراغ الكحلي؛ الشريحة الزجاجية أهدأ
     والنص بيضل هو حامل التباين (١٠:١ للأخضر، ٥.١:١ للأحمر). */
  --success-soft: rgba(61,220,151,.14);
  --success-dim:  rgba(61,220,151,.32);
  --danger-soft:  rgba(255,51,102,.14);
  --danger-dim:   rgba(255,51,102,.32);

  /* جليدي خفيف — ملء أيقونات بطاقات الإحصاء. --brass-dim (٣٠٪) مصمّم
     للحدود والمساطر؛ كخلفية بيطلع أثقل من اللازم. */
  --brass-soft:   rgba(189,244,255,.12);

  /* طبقة تعتيم المودال — أعمق من الفراغ نفسه، عشان المودال يطفو فوقه
     مش يذوب فيه. مع blur بتصير الطبقة "عدسة" بدل ما تكون ستارة سودا. */
  --overlay:      rgba(4,10,18,.74);

  /* مسار المفتاح (toggle) بوضع الإطفاء — أفتح من --line عشان شكل
     الحبّة يبيّن، وأخفت من --line-strong عشان ما ينقرا كحدّ نشط. */
  --track:        rgba(255,255,255,.14);
}

/* ── ملحق: لوحة القيادة في الهيرو (index.html `.dash`) ────────
   ملحق تالت، بنفس منطق ملحق لوحة التحكم فوق. محاكاة اللوحة بالهيرو
   هي «شاشة» فاتحة قاعدة جوّا كرت زجاجي غامق — إلها لوحة ألوانها
   الخاصة (كريمي دافي + طوبي) وما بترث ولا توكن من الموقع.

   ليش القيم هون والمحدّد `.dash`: المحظور رقم ٥ بـDESIGN_BRIEF
   («ولا hex/rgba مثبّت خارج tokens.css») بيحكي عن **مكان القيمة**،
   مش عن المحدّد. القيم كانت مكتوبة جوّا <style> بـindex.html، يعني
   لوحة الهيرو كاملة كانت خارج مدى أي تغيير ترميز — بتضل عاجية حتى لو
   الموقع كله تبدّل. نقلناها لهون؛ والمحدّد ضل `.dash` فالعزل
   بالاتجاهين (لا لون بيدخل عليها ولا بيطلع منها) ما تغيّر.

   ولا ظل هون: كان في `--d-shadow` بطبقتين على ١١ عنصر وانشال.
   المحظور رقم ١ بيمنع box-shadow كأداة عمق بلا استثناء غير التوهّج
   السماوي، وهاد ما كانش هو. العمق صار من الحدّ ١px + الفرق النبري
   بين `--d-panel` الأبيض و`--d-bg` الكريمي — نفس وصفة البريف،
   مطبّقة جوّا شاشة فاتحة بدل الفراغ الكحلي. */
.dash{
  --d-bg:#FBF3EC;        --d-panel:#FFFFFF;
  --d-line:#F1E4D8;
  --d-ink:#3F2E23;       --d-ink-2:#6B5646;      --d-muted:#82705F;
  --d-acc:#B5552C;       --d-acc-soft:#F9E9DD;   --d-acc-ink:#8E4423;
  --d-good:#4C7C3B;      --d-good-soft:#EAF1E3;  --d-good-line:#CCDDBE;
  --d-warn:#8A6114;      --d-warn-soft:#F7EBD3;
  /* نص فوق الملء الطوبي — كان `#fff` مثبّت بالمكوّن بمكانين */
  --d-on-acc:#FFFFFF;
  --d-r:.6em;
}

/* ── وضع العبرية ─────────────────────────────────────────────
   نفس الأدوار بخطوط عبرية. الترتيب مقلوب عن :root عن قصد — الاحتياطي
   بيشتغل لكل حرف لحاله فترتيب العربي/العبري ما بيأثر على تغطية الحروف؛
   بس هو اللي بيقرّر مين بيرسم اللاتيني والأرقام على سطر مختلط. بوضع
   العبري بدنا Assistant يرسمهم عشان «עברית + WhatsApp + 1,500» تطلع
   بلون طباعي واحد. IBM Plex Sans Arabic بيضل بالسلسلة — هو حامل ₪ المقيس.
   --font-latin مقصود إنه ما ينقلب: هو خط أرقام الأسعار، والأرقام غربية
   بالاتجاهين بقرار تجاري موثّق (index.html). */
html:lang(he) {
  --font-display: 'Frank Ruhl Libre', 'Markazi Text', 'Instrument Serif', serif;
  --font-text:    'Assistant', 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --section-y: 84px; --idx: 46px; --blur: 18px; --blur-hi: 24px; }
}

/* الأجهزة اللي ما بتدعم backdrop-filter: الزجاج بينهار لسطح معتم قريب
   من نفس القيمة البصرية — بدون هالسطر الكروت بتصير شبه شفافة وبتقرا غلط. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    /* القيم المعتمة تحدّثت لتقابل السلّم الجديد (١٠٪/١٤٪/١٨٪ فوق الفراغ). */
    --surface-0: #101B27;
    --surface:   #22303D;
    --surface-2: #2C3A47;
    --surface-3: #374552;
  }
}