/* =============================================================================
   الرؤيا العميقة — طبقة التهدئة
   تُحمَّل بعد ‎deep-modern.css‎ وتُرجَّح عليه. ثلاثة أشياء لا رابعَ لها:

     ١) الأسطح الداكنة تُرفَع من الكحلي شبه الأسود (‎#07203D‎) إلى أزرقٍ
        أردوازيٍّ هادئ. اللون الأصلي بقي براقاً لكنّه يُتعب العين في صفحةٍ
        طويلة، والفرق بينه وبين النصّ الأبيض تباينٌ يقارب 16:1 — أعلى ممّا
        تحتاجه القراءة وأقسى ممّا تحتمله.

     ٢) الخطّ ينزل درجة ويرقّ: ‎IBM Plex Sans Arabic‎ بدل ‎Tajawal‎. الأخير
        ودود ومستدير، لكنّ حروفه تتشابه في الأحجام الصغيرة. وPlex مرسومٌ
        أصلاً للواجهات، فيبقى مقروءاً وهو أصغر — وهذا ما يجعله يبدو أرقى.

     ٣) وضعٌ داكن اختياري. لا يُفرَض: يتبع تفضيل النظام ما لم يختر الزائر،
        واختياره يُحفظ في ‎localStorage‎.

   الحذف يُعيد المظهر السابق كما كان: كل ما هنا تجاوزات، لا بنية.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ١) الأسطح الداكنة — نغمةٌ واحدة تُشتقّ منها كل الأقسام الداكنة
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   الأزرق الفاتح من الشعار
   ‎#297FF6‎ هو أفتح درجة في الشعار، وهو الآن مصدر اللون لا ‎#0F5CBF‎.
   لكنّه لا يصلح لوناً للنصّ: على الأبيض يعطي 3.84، أي تحت حدّ القراءة. لذلك
   درجتان — ‎--sky‎ للتمييز والتدرّجات والأسطح الداكنة، و‎--brand‎ أغمق بقدر ما
   يجتاز (4.78) للروابط والأزرار. الاثنتان من العائلة نفسها، فالعين تراهما لوناً
   واحداً وإن اختلف الرقم.
   -------------------------------------------------------------------------- */
:root {
  --sky:        #3D89EE;   /* أهدأ من ‎#297FF6‎ الصريح بدرجة */
  --sky-2:      #6DA6F3;
  --sky-soft:   #EDF4FE;   /* تلميحٌ لا لون */
  /* درجة النصّ أهدأ من ‎--sky‎ وأخفض تشبّعاً: الأزرق الصريح على كل رابط وزرّ
     وعنوان يشدّ العين إلى كل شيء في وقتٍ واحد، فلا يبقى شيء بارزاً. وهي
     تعبر حدّ القراءة على الورق وعلى ‎--brand-soft‎ معاً. */
  --brand:      #2168CE;
  --brand-2:    #1A559F;
  --brand-lite: #9AC4F6;
  --brand-soft: #EDF3FC;
  --brand-050:  #F6FAFE;
  --brand-100:  #E1ECFA;
  --brand-700:  #1A559F;
  --brand-900:  #143F78;
  --g1: #2168CE;
  --g2: #3D89EE;
  --g3: #6DA6F3;

  /* الأسطح الداكنة تميل إلى زرقة الشعار، وتبقى هادئة لا صارخة.
     خُفّض تشبّعها مرّةً أخرى: الأزرق المشبَع على مساحةٍ كبيرة يثقل الصفحة،
     وهذه الدرجات أقرب إلى الأردواز المزرقّ منها إلى الأزرق الصريح. */
  --deep-1:      #33587E;   /* أعلى التدرّج */
  --deep-2:      #2A4868;
  --deep-3:      #223A55;   /* أعمق نقطة */
  --on-deep:     #D6E4F2;   /* نصّ عادي فوق الداكن */
  /* يُقاس على أفتح نقطة في التدرّج (‎--deep-1‎) لا على متوسّطه: النصّ يمرّ فوق
     الطرفين، والمتوسّط يُخفي أنّ أعلى الشريط أفتح ممّا يحتمله. ‎#A9BFD6‎ كان
     يعطي 3.77 هناك؛ هذه الدرجة تعطي 4.95. */
  --on-deep-dim: #CBD9E7;
  --on-deep-hi:  #FFFFFF;
  --deep-glow-1: rgba(61, 137, 238, .24);
  --deep-glow-2: rgba(34,  58,  85, .5);

  /* ‎#67727F‎ يجتاز على الورق (4.56) ويسقط على السطح الثاني ‎#EFEFEC‎ (4.25).
     الفرق يظهر في شارات مثل «الديمو قريباً» وحدها، ودرجةٌ أغمق قليلاً تكفي. */
  --faint: #616C78;
}

.hero {
  background: linear-gradient(158deg, var(--deep-1) 0%, var(--deep-2) 58%, var(--deep-3) 100%);
  color: var(--on-deep);
}
.hero::before { background: radial-gradient(circle, var(--deep-glow-1), transparent 68%); }
.hero::after  { background: radial-gradient(circle, var(--deep-glow-2), transparent 66%); }

.hero h1 { color: var(--on-deep-hi); }
.hero .lead { color: var(--on-deep-dim); }
/* ‎.eyebrow‎ في طبقة الشعار لونها ‎--g2‎ (‎#297FF6‎)، وهي نصٌّ صغير: على الورق
   3.59 وعلى ‎--sky-soft‎ 3.41. الأزرق الفاتح يبقى في الحواف والتدرّجات، وأمّا
   النصّ فيأخذ الدرجة التي تُقرأ. */
.eyebrow { color: var(--brand); }
/* حبّة البطل تجلس على زجاجٍ أبيضَ شفّاف فوق التدرّج، فالسطح تحتها أفتح ممّا
   يبدو (‎#3A6694‎ لا ‎#2B5A8C‎) — والقياس على السطح المركَّب لا على التدرّج وحده. */
.hero .eyebrow { color: #DCEAFC; }
.hero .eyebrow::before { background: var(--sky-2); box-shadow: 0 0 10px rgba(90,157,249,.75); }

/* شارات الأنظمة (POS/ERP/DMS): ‎--g2‎ على ‎--sky-soft‎ يعطي 3.41 */
.try .kind { color: var(--brand); }

/* التدرّج على العنوان كان يقفز عن بقيّة الصفحة؛ درجتان متقاربتان أهدأ */
.hero h1 .grad,
.hero .grad {
  background: linear-gradient(105deg, #8CBCF8 0%, #D3E5FD 55%, #8CBCF8 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* شريط الأرقام قسمٌ قائم بذاته على الورق، لا شريطٌ داخل البطل — فخلفيةٌ شبه
   شفّافة تجعل نصّه الأبيض أبيضَ على أبيض. يبقى داكناً، بالنغمة الجديدة. */
.stats { background: linear-gradient(140deg, var(--deep-1) 0%, var(--deep-2) 100%); }
.stats b { color: var(--on-deep-hi); }
.stats small { color: var(--on-deep-dim); }

/* أخضر واتساب الأصلي ‎#1FA855‎ يعطي 3.09 مع نصٍّ أبيض — تحت حدّ القراءة في
   الحجمين. هذه الدرجة أغمق بقدر ما يلزم (5.0) وتبقى خضرة واتساب. */
.btn-wa { background: #15803C; }
.btn-wa:hover { background: #116931; }
.wa-float { background: #15803C; }

.on-ink {
  background: linear-gradient(140deg, var(--deep-1) 0%, var(--deep-2) 55%, var(--deep-3) 100%);
  color: var(--on-deep);
}
.on-ink::before { background: radial-gradient(circle, var(--deep-glow-1), transparent 70%); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--on-deep-hi); }

.site-foot { background: linear-gradient(160deg, var(--deep-2) 0%, var(--deep-3) 100%); color: var(--on-deep-dim); }
.site-foot h4 { color: var(--on-deep-hi); }
.site-foot a { color: var(--on-deep); }
.foot-bottom { color: var(--on-deep-dim); border-top-color: rgba(255,255,255,.09); }

/* -----------------------------------------------------------------------------
   ٢) الخطّ
   -------------------------------------------------------------------------- */
:root {
  --dis: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --ar:  "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --lat: "Outfit", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

body {
  font-family: var(--ar);
  font-size: 14.5px;          /* كان 16 */
  line-height: 1.82;
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2, h3, h4 { font-family: var(--dis); letter-spacing: -.005em; }
h1 { font-weight: 600; font-size: clamp(1.5rem,  3vw,   2.15rem); line-height: 1.4; }
h2 { font-weight: 600; font-size: clamp(1.15rem, 2.1vw, 1.5rem);  line-height: 1.48; }
h3 { font-weight: 500; font-size: .95rem;  line-height: 1.6; }
h4 { font-weight: 500; font-size: .88rem; }

.lead      { font-size: clamp(.92rem, 1.25vw, 1rem); line-height: 1.9; font-weight: 300; }
.btn       { font-size: .855rem; font-weight: 500; padding: .7rem 1.3rem; }
.btn-sm    { font-size: .8rem;   padding: .46rem .95rem; }
.eyebrow   { font-size: .67rem;  font-weight: 500; letter-spacing: .11em; }
.site-nav a{ font-size: .845rem; font-weight: 400; }
.brand b   { font-size: .93rem;  font-weight: 600; }
.stats b   { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; }
.stats small { font-size: .78rem; font-weight: 300; }
.marquee span, .roster b { font-size: .88rem; font-weight: 400; }

/* الأرقام والنصّ اللاتيني تبقى ‎Outfit‎: أرقام Plex العربية أضيق ممّا يريح
   في الجداول والأسعار. */
.num, code, .filemeta, bdi, .price { font-family: var(--lat); }

/* -----------------------------------------------------------------------------
   ٣) زرّ الوضع
   -------------------------------------------------------------------------- */
.theme-btn {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .2s var(--ease, ease), color .2s var(--ease, ease),
              border-color .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.theme-btn:hover { color: var(--brand); border-color: var(--brand); transform: rotate(-15deg); }
.theme-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-btn .i-sun  { display: none; }
[data-theme="dark"] .theme-btn .i-sun  { display: block; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }

/* داخل قائمة متحرّكة على الجوّال يصير الزرّ سطراً كامل الاتّساع بلا هذا */
@media (max-width: 56rem) {
  .site-nav .theme-btn { margin-inline-start: auto; }
}

/* -----------------------------------------------------------------------------
   زرّ الدخول في الترويسة
   رابطٌ نصّيّ بين سبعة روابط لا يُرى. الدخول هو الفعل الذي يعود إليه العميل
   في كل زيارة، فيأخذ شكل زرّ — كما في كل موقع فيه حسابات.
   -------------------------------------------------------------------------- */
.site-nav a.nav-login {
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: .32rem .85rem;
  color: var(--brand);
  font-weight: 500;
  margin-inline-start: .35rem;
  transition: background .2s var(--ease, ease), color .2s var(--ease, ease),
              border-color .2s var(--ease, ease);
}
.site-nav a.nav-login:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
[data-theme="dark"] .site-nav a.nav-login:hover { color: #10161C; }
/* الخطّ النامي تحت الروابط لا معنى له تحت زرّ */
.site-nav a.nav-login::after { content: none; }

@media (max-width: 56rem) {
  .site-nav a.nav-login { display: inline-block; margin: .4rem 0; text-align: center; }
}

/* =============================================================================
   الوضع الداكن
   الأساس مكتوبٌ برموزٍ لونية، فيكفي إعادة تعريفها لتتبعه الصفحة كلّها.
   الاستثناءات هي المواضع التي كُتب فيها اللون صراحةً أو التي تستعمل ‎--ink‎
   خلفيةً لا حبراً — تلك تنقلب رأساً على عقب إن تُركت.

   الداكن هنا **رمادي مزرقّ لا أسود**: الأسود الصريح خلف نصٍّ فاتح يُنتج هالةً
   حول الحروف تُتعب العين أكثر من الورق الأبيض.
   ============================================================================= */
[data-theme="dark"] {
  --ink:        #E8EEF4;
  --ink-2:      #D6DFE8;
  --ink-3:      #C2CDD9;
  --muted:      #A3B0BD;
  --faint:      #8B98A5;   /* 5.6:1 على ‎--paper‎ */

  --paper:      #151A20;
  --surface:    #1B222A;
  --surface-2:  #232B35;
  --rule:       #2B333E;
  --rule-2:     #3A4450;

  --brand:      #6BA6F2;
  --brand-2:    #8CBCF8;
  --brand-lite: #A9CDFB;
  --brand-soft: #1B2836;

  --ok:         #7FC9A3;
  --ok-soft:    #1B2A23;
  --warn:       #D8B871;
  --warn-soft:  #2A2519;
  --stop:       #E39289;
  --stop-soft:  #2C1E1C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 12px 28px -22px rgba(0, 0, 0, .9);

  --deep-1: #1E2B3A;
  --deep-2: #19232F;
  --deep-3: #151D27;
  --deep-glow-1: rgba(41, 127, 246, .14);
  --deep-glow-2: rgba(30,  43,  58, .5);

  /* رموز طبقة «ألوان الشعار» — بدونها يبقى ‎#333E48‎ حبراً للعناوين و‎#0F5CBF‎
     للروابط، وكلاهما يقارب 1.5:1 على ورقٍ داكن. الدرجات هنا هي درجات الشعار
     نفسها مرفوعةً حتى تُقرأ، لا ألوانٌ أخرى. */
  --charcoal:   #E8EEF4;
  --charcoal-2: #C2CDD9;
  --sky:        #6BA6F2;
  --sky-2:      #8CBCF8;
  --sky-soft:   #1B2836;
  --g1:         #8CBCF8;
  --g2:         #7DB2F7;
  --g3:         #A9CDFB;
  --brand-050:  #171F29;
  --brand-100:  #1F2C3B;
  --brand-700:  #8CBCF8;
  --brand-900:  #A9CDFB;

  color-scheme: dark;
}

/* التدرّجات المضيئة تحتاج حبراً داكناً فوقها، لا أبيض */
[data-theme="dark"] .btn-brand,
[data-theme="dark"] .index-item:hover .n,
[data-theme="dark"] .try:hover .kind { color: #10161C; }

/* الزرّ الأساسي كان يبدأ من ‎--sky‎ (‎#297FF6‎)، والنصّ الأبيض عليه 3.84 —
   أي زرٌّ رئيسيّ لا يجتاز حدّ القراءة. التدرّج الآن بين درجتَي ‎--brand‎،
   فالأبيض عليه 5.3 فأعلى، واللون ما زال أزرق الشعار. */
.btn-brand { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); }
.btn-brand:hover { background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-900) 100%); }

/* ‎--ink‎ خلفيةً: في الفاتح حبرٌ داكن، وفي الداكن يصير شبه أبيض — فينقلب
   ‎.btn-primary‎ أبيضَ على أبيض. */
[data-theme="dark"] .btn-primary { background: var(--brand); color: #10161C; }
[data-theme="dark"] .btn-primary:hover { background: var(--brand-2); color: #10161C; }
[data-theme="dark"] .btn-quiet { border-color: var(--rule-2); color: var(--ink-2); }
[data-theme="dark"] .btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

[data-theme="dark"] .site-head { background: rgba(21, 26, 32, .88); border-bottom-color: var(--rule); }
[data-theme="dark"] .site-head.stuck { background: rgba(21, 26, 32, .96); }

[data-theme="dark"] .on-white { background: var(--surface); }
[data-theme="dark"] .card,
[data-theme="dark"] .bento > *,
[data-theme="dark"] .roster li { background: var(--surface); border-color: var(--rule); }

/* الشبكة الدقيقة خلف البطل: خطوطٌ بيضاء بـ‎.045‎ تكاد تختفي على سطحٍ داكن */
[data-theme="dark"] .hero > .wrap::before { opacity: .28; }

/* الزجاج مصمَّمٌ لأبيضَ شفّاف فوق داكن؛ يبقى كما هو ويشتدّ قليلاً */
[data-theme="dark"] { --glass: rgba(255,255,255,.05); --glass-line: rgba(255,255,255,.1); }

/* لقطة الشاشة والصور: تخفيف السطوع يمنعها من أن تكون المصدر الوحيد للضوء */
[data-theme="dark"] .hero-shot img,
[data-theme="dark"] .shot img { filter: brightness(.9) contrast(1.02); }

/* الحوار المقلّد لرسالة ويندوز يبقى بلونه — هو اقتباسٌ لواجهةٍ أخرى.
   ‎#CFE2F7‎ عليه يعطي 4.40، أي أقلّ بشعرة من الحدّ؛ درجةٌ أفتح تعبره
   ولا تُخرج الحوار عن شبهه بالأصل. */
.smart-dialog .muted { color: #DCEAFA; }
[data-theme="dark"] .smart-dialog { filter: brightness(.92); }

/* الانتقال بين الوضعين: من غيره تومض الصفحة كلّها دفعةً واحدة.
   ‎.theming‎ تضعها السكربت للحظة التبديل فقط، فلا يدفع بقيّة التصفّح ثمنها. */
.theming, .theming *, .theming *::before, .theming *::after {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theming, .theming *, .theming *::before, .theming *::after { transition: none !important; }
}