/* ============================================================
   JBOKER — نظام التصميم الموحّد
   ============================================================
   قبل هذا الملف كانت الصفحات الثلاث تحمل ثلاث هويات منفصلة:

     index.html  → Readex Pro  + تركوازي #00827F + خلفية غامقة
     admin.html  → Cairo       + تركوازي #0E7C86 (مختلف!) + خلفية فاتحة
     legal.html  → Readex Pro  + متغيّر اسمه --violet قيمته تركوازية

   ثلاث لوحات بأسماء متغيّرات غير متوافقة، فالعميل ينتقل من اللوحة إلى
   الإدارة فيحسّ أنه دخل تطبيقاً آخر، وأي تعديل على الهوية يتكرّر ٣ مرات.

   هذا الملف مصدر الحقيقة الوحيد. أسماء المتغيّرات المحلية القديمة تبقى
   عاملة كمرادفات في نهاية الملف، فلا حاجة لإعادة كتابة CSS الصفحات.
   ============================================================ */

:root {
  /* ===== الهوية ===== */
  --brand-1: #00827F;   /* تركوازي الهوية — أعلى التدرّج */
  --brand-2: #076C77;   /* منتصف التدرّج */
  --brand-3: #08465E;   /* أزرق محيطي — أسفل التدرّج */

  /* ===== الأسطح الغامقة (هيكل التطبيق) ===== */
  --shell:      #082F38;
  --shell-2:    #0C3B45;
  --line-d:     #16505C;
  --on-shell:   #E6F3F4;   /* نص أساسي على الغامق */
  --on-shell-2: #8FB3B9;   /* نص ثانوي على الغامق */

  /* ===== الأسطح الفاتحة (البطاقات ولوحة الإدارة) ===== */
  --card:    #FFFFFF;
  --tint:    #F7FAFB;
  --wash:    #EEF3F7;   /* خلفية الصفحة في الوضع الفاتح */
  --line:    #E4E9EE;
  --line-2:  #EFF2F6;

  /* ===== النص على الفاتح ===== */
  --ink:   #0D1B22;
  --ink-2: #37505A;
  --muted: #586E78;   /* أغمق من #5C737E ليعبر WCAG AA على --line-2 */

  /* ===== الدلالات — كل لون بدرجة صريحة ودرجة ناعمة للتظليل ===== */
  --ok:     #05785C;   --ok-sf:     #E2F5EF;
  --warn:   #9C5B08;   --warn-sf:   #FCF2E0;
  --bad:    #B81D3F;   --bad-sf:    #FBE8EC;
  --info:   #0369A1;   --info-sf:   #E3F1FA;
  --accent: #6D28D9;   --accent-sf: #F1ECFE;

  /* ===== الحواف والظلال ===== */
  --r:   12px;
  --r-s: 9px;
  --r-xs: 6px;
  --lift:   0 1px 2px rgba(13,27,34,.06), 0 4px 14px rgba(13,27,34,.05);
  --lift-2: 0 8px 30px rgba(0,0,0,.18);

  /* ===== السلّم الطباعي =====
     أساسه 15px لا 14.5px: الحروف العربية تحتاج مساحة رأسية أكبر من
     اللاتينية بنفس المقاس، والنظام يُستعمل على الموبايل لقراءة أسماء
     أدوية وجرعات. --fs يبقى معامل تكبير يتحكّم به المستخدم. */
  --fs: 1;
  --t-xs:   calc(12.5px * var(--fs));
  --t-sm:   calc(13.5px * var(--fs));
  --t-base: calc(15px   * var(--fs));
  --t-md:   calc(16px   * var(--fs));
  --t-lg:   calc(17.5px * var(--fs));
  --t-xl:   calc(23px   * var(--fs));
  --t-2xl:  calc(28px   * var(--fs));

  /* ===== الخطوط ===== */
  --font-ui:  "Readex Pro", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-num: "IBM Plex Mono", monospace;   /* للأرقام والمعرّفات */
}

/* ============================================================
   مرادفات توافُقية — تُبقي CSS الصفحات القائمة عاملاً بلا تعديل
   ============================================================ */

/* --- admin.html: كانت تعرّف لوحتها الخاصة بتركوازي مختلف --- */
:root {
  --bg:        var(--wash);
  --surface:   var(--card);
  --surface-2: var(--tint);
  --line-soft: var(--line-2);

  --teal:      var(--brand-1);   /* كان #0E7C86 — تركوازي ثانٍ لا مبرّر له */
  --teal-dark: var(--brand-3);
  --teal-soft: #E4F4F5;

  --green:      var(--ok);     --green-soft:  var(--ok-sf);
  --blue:       var(--info);   --blue-soft:   var(--info-sf);
  --amber:      var(--warn);   --amber-soft:  var(--warn-sf);
  --red:        var(--bad);    --red-soft:    var(--bad-sf);
  --purple:     var(--accent); --purple-soft: var(--accent-sf);
  --done:       var(--ok);
  --shadow:     var(--lift);
}

/* --- legal.html: كانت تسمّي التركوازي --violet و--lilac --- */
:root {
  --panel:   var(--shell-2);
  --panel-2: #114550;
  --text:    var(--on-shell);
  --violet:  #2DD4BF;   /* الاسم مضلّل — اللون تركوازي لا بنفسجي */
  --lilac:   #7FE7DC;
}

/* ============================================================
   أساسيات مشتركة
   ============================================================ */
* { box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* الأرقام والمعرّفات تُقرأ أوضح بخط أحادي المسافة */
.num, code, kbd, .mono { font-family: var(--font-num); }

/* الأرقام تبقى بالاتجاه اللاتيني حتى داخل نص عربي */
.num { direction: ltr; unicode-bidi: isolate; }

/* وضوح التركيز بلوحة المفاتيح — لا يُلغى إلا بديل أوضح منه */
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}