/* ===========================================================================
   نظام الطباعة الموحّد للمنصّة كاملةً.

   المصدر: الطباعة المعتمدة في صفحة الهبوط — **Cairo** خطًّا أساسيًا،
   و**Tajawal** بديلًا أوّل، ثم خطوط عربية متوفّرة محليًا على الأنظمة.

   يُحمَّل هذا الملف **بعد** tokens.css و engine/styles.css في كل صفحة،
   فيتجاوز تعريف --sans فيهما دون تعديل أي ملف مولَّد أو ملف محرّك معتمد.
   وهذه هي العلّة في وجوده كملف مستقلّ: ملفّا tokens.css و engine/styles.css
   يُنتَجان آليًا من app/src/styles.css، فأي تحرير فيهما يضيع عند إعادة البناء.

   لا اعتماد على شبكة خارجية: لا @import ولا @font-face لملف بعيد. إن توفّر
   Cairo على الجهاز أو عبر الاستضافة استُعمل، وإلا نزل المكدّس إلى خط عربي
   نظامي مناسب بلا قفزة تخطيط.
   =========================================================================== */

:root{
  /* ------------------------------------------------ عائلات الخطوط ------ */
  --font-family-arabic:
      "Cairo","Tajawal","IBM Plex Sans Arabic","Noto Sans Arabic","Noto Kufi Arabic",
      "Segoe UI","Dubai","Geeza Pro","Arabic Typesetting","Traditional Arabic",
      system-ui,-apple-system,sans-serif;
  --font-family-latin:
      "Cairo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-family-mono:
      ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-family-primary: var(--font-family-arabic);

  /* التوافق مع الاسم القديم المستعمل في المحرّك ولوحات الإدارة */
  --sans: var(--font-family-primary);
  --mono: var(--font-family-mono);

  /* ------------------------------------------------------- المقاسات ---- */
  /* سُلَّم متجاوب: يتقلّص على الجوّال ويتّسع على سطح المكتب بلا كسر التسلسل */
  --font-size-display:  clamp(30px, 3.15vw, 52px);   /* عنوان الهيرو        */
  --font-size-h1:       clamp(21px, 1.65vw, 30px);   /* عنوان الصفحة        */
  --font-size-h2:       clamp(16px, 1.22vw, 21px);   /* عنوان قسم           */
  --font-size-h3:       clamp(14px, 1.06vw, 17.5px); /* عنوان بطاقة         */
  --font-size-h4:       clamp(13px, .95vw, 15.5px);  /* عنوان فرعي          */
  --font-size-body-lg:  clamp(14px, 1vw, 16.5px);
  --font-size-body:     clamp(13px, .92vw, 15px);
  --font-size-body-sm:  clamp(12px, .82vw, 13.6px);
  --font-size-caption:  clamp(10.5px, .74vw, 12.2px);
  --font-size-label:    clamp(11px, .78vw, 12.8px);
  --font-size-button:   clamp(12.5px, .9vw, 15px);
  --font-size-nav:      clamp(11.5px, .87vw, 14.4px);
  --font-size-th:       clamp(11px, .8vw, 13px);
  --font-size-td:       clamp(12px, .85vw, 14px);
  --font-size-input:    clamp(13.5px, .95vw, 15px);
  --font-size-stat:     clamp(19px, 1.6vw, 28px);
  --font-size-crumb:    clamp(11px, .8vw, 13.2px);

  /* -------------------------------------------------------- الأوزان ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
  --font-weight-black: 900;

  /* --------------------------------------------------- ارتفاع السطر ---- */
  /* العربية تحتاج سطرًا أعلى من اللاتينية لوضوح التشكيل والنقاط */
  --line-height-display: 1.15;
  --line-height-heading: 1.35;
  --line-height-body: 1.75;
  --line-height-relaxed: 1.9;
  --line-height-tight: 1.25;

  /* ----------------------------------------------------- تباعد الحرف --- */
  --letter-spacing-display: -1px;
  --letter-spacing-heading: -.2px;
  --letter-spacing-normal: 0;
}

/* الأوزان المستعملة فعليًا: 400 / 500 / 700 / 800 / 900 — ولا نحمّل غيرها. */

html, body{ font-family: var(--font-family-primary); }
body{
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;   /* يمنع تثخينًا صناعيًا يشوّه العربية */
}

/* الحقول والأزرار لا ترث الخطّ افتراضيًا في كل المتصفّحات */
input, select, textarea, button, optgroup{ font-family: inherit; }

/* ------------------------------------------------- التسلسل الدلالي ---- */
h1{ font-size: var(--font-size-h1); font-weight: var(--font-weight-black);
    line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
h2{ font-size: var(--font-size-h2); font-weight: var(--font-weight-black);
    line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
h3{ font-size: var(--font-size-h3); font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading); }
h4{ font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading); }
small{ font-size: var(--font-size-caption); }
label{ font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); }
th{ font-size: var(--font-size-th); font-weight: var(--font-weight-bold); }
td{ font-size: var(--font-size-td); }
input, select, textarea{ font-size: var(--font-size-input); }
button, .btn{ font-size: var(--font-size-button); font-weight: var(--font-weight-bold); }
code, pre, kbd, samp{ font-family: var(--font-family-mono); }

/* --------------------------------------------- أصناف مساعدة للتطبيق --- */
.t-display{ font-size:var(--font-size-display); font-weight:var(--font-weight-black);
  line-height:var(--line-height-display); letter-spacing:var(--letter-spacing-display) }
.t-h1{ font-size:var(--font-size-h1);   font-weight:var(--font-weight-black) }
.t-h2{ font-size:var(--font-size-h2);   font-weight:var(--font-weight-black) }
.t-h3{ font-size:var(--font-size-h3);   font-weight:var(--font-weight-bold) }
.t-section{ font-size:var(--font-size-h2); font-weight:var(--font-weight-black) }
.t-card{ font-size:var(--font-size-h3); font-weight:var(--font-weight-bold) }
.t-body-lg{ font-size:var(--font-size-body-lg); line-height:var(--line-height-relaxed) }
.t-body{ font-size:var(--font-size-body);    line-height:var(--line-height-body) }
.t-body-sm{ font-size:var(--font-size-body-sm); line-height:var(--line-height-body) }
.t-caption{ font-size:var(--font-size-caption); line-height:var(--line-height-tight) }
.t-label{ font-size:var(--font-size-label); font-weight:var(--font-weight-semibold) }
.t-button{ font-size:var(--font-size-button); font-weight:var(--font-weight-bold) }
.t-nav{ font-size:var(--font-size-nav); font-weight:var(--font-weight-semibold) }
.t-stat{ font-size:var(--font-size-stat); font-weight:var(--font-weight-black);
  line-height:var(--line-height-tight); font-variant-numeric:tabular-nums }
.t-crumb{ font-size:var(--font-size-crumb); font-weight:var(--font-weight-semibold) }

/* ======================================================================
   نصّ مختلط عربي/لاتيني
   العربية من اليمين واللاتينية من اليسار؛ بلا عزل صريح يختلّ ترتيب
   المقاطع اللاتينية داخل الجملة العربية (اسم مستخدم، بريد، معادلة، كود).
   ====================================================================== */
bdi, .ltr, [data-latin]{
  unicode-bidi: isolate;
  font-family: var(--font-family-latin);
}
.num, .code, code, kbd, samp{ unicode-bidi: isolate; }
/* الأرقام في الجداول والإحصاءات بعرض ثابت فلا ترقص الأعمدة */
.t-stat, td, th, .num{ font-variant-numeric: tabular-nums; }

/* حقول اللغة اللاتينية: اتجاه صريح مع محاذاة تتبع اتجاه الصفحة */
input[dir="ltr"], input[inputmode="latin"], input[type="email"],
input[type="url"], input[type="password"]{
  font-family: var(--font-family-latin);
  unicode-bidi: plaintext;
}

/* لا نفرض السلوك العربي على المحتوى اللاتيني الطويل */
[lang="en"], [lang="fr"], [lang="de"], [lang="es"]{ font-family: var(--font-family-latin); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}