/* ============================================================
   tokens.css — أساس هوية بصرية ثنائي اللغة (عربي / إنجليزي)

   ثلاث طبقات:
     ١) طبقة المشروع  — الألوان والأحجام. لا تتغير مع اللغة.
     ٢) طبقة اللغة     — [lang] : الخط، ارتفاع السطر، حجم النص، المحاذاة.
     ٣) طبقة الاتجاه   — [dir]  : الانعكاسات البصرية فقط.

   قاعدة حاكمة: استخدم الخصائص المنطقية دائماً
     margin-inline-start  لا  margin-right
     padding-inline-end   لا  padding-left
     text-align:start     لا  text-align:right
   من يكتب الخصائص الاتجاهية سيعيد كتابة نصف الملف عند إضافة اللغة الثانية.
   ============================================================ */


/* ============================================================
   ١) طبقة المشروع — هذه الكتلة وحدها تتغير بين المشاريع
   ============================================================ */
:root{
  /* العلامة */
  --brand-600:#1B4D3E;
  --brand-700:#153E32;    /* أغمق ١٠٪ — يُشتق آلياً */
  --brand-50:#EAF2EF;     /* أفتح جداً — يُشتق آلياً */
  --brand-fg:#FFFFFF;     /* يُحسب بالتباين */

  /* الترويسة */
  --header-bg:#FFFFFF;
  --site-name:#111827;

  /* النصوص */
  --color-heading:#111827;
  --color-subheading:#374151;
  --color-text:#1F2937;

  /* الجداول */
  --table-header-bg:#F3F4F6;
  --table-header-text:#111827;
  --table-border:#D1D5DB;

  /* الأسطح — تسمية وظيفية لا لونية.
     السطح البارز أغمق من الخلفية في النهاري، وأفتح منها في الليلي.
     الدور ثابت واللون متغيّر، فالاسم يصف الدور. */
  --surface-raised:#1B4D3E;
  --surface-raised-fg:#FFFFFF;  /* يُحسب بالتباين */
  --surface-base:#F9FAFB;

  /* الروابط */
  --link-on-raised:#A7F3D0;
  --link-on-base:#1B4D3E;
  --link-text:#1D4ED8;

  /* الأيقونات */
  --color-icon:var(--brand-600);

  /* الأحجام الأساسية — تُعدَّل نسبياً في طبقة اللغة */
  --fs-site-name:20px;
  --fs-h1:28px;
  --fs-h2:20px;
  --fs-body:16px;
  --fs-quote:15px;

  /* عائلتا الخط */
  --font-ar:'Changa', system-ui, sans-serif;
  --font-en:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* ============================================================
   ٢) ثوابت — لا تُعدَّل ولا تُعرَض في أي لوحة إعدادات
   ============================================================ */
:root{
  --ok:#15803D;   --ok-bg:#F0FDF4;   --ok-border:#BBF7D0;
  --warn:#B45309; --warn-bg:#FFFBEB; --warn-border:#FDE68A;
  --err:#B91C1C;  --err-bg:#FEF2F2;  --err-border:#FECACA;
  --info:#1D4ED8; --info-bg:#EFF6FF; --info-border:#BFDBFE;

  --gray-50:#F9FAFB;  --gray-100:#F3F4F6; --gray-200:#E5E7EB;
  --gray-300:#D1D5DB; --gray-400:#9CA3AF; --gray-500:#6B7280;
  --gray-600:#4B5563; --gray-900:#111827;

  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-6:24px; --space-8:32px;

  --radius-sm:6px; --radius:10px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.06);

  --header-h:64px;
  --icon-sm:16px; --icon:20px; --icon-lg:24px;
  --touch-min:44px;
}


/* ============================================================
   ٣) طبقة اللغة — [lang]
   تنبيه: اللغة ليست الاتجاه. رقم داخل نص عربي يبقى LTR،
   وكتلة كود إنجليزية داخل صفحة عربية تبقى LTR.
   ============================================================ */

/* افتراضي إن لم تُحدَّد اللغة */
:root{
  --font-family:var(--font-ar);
  --line-height:1.9;
  --fs-scale:1.0625;
  --text-align-long:justify;
  --text-align-last:right;
  --hyphens:none;
  --tracking:normal;
}

/* --- العربية --- */
[lang="ar"]{
  --font-family:var(--font-ar);
  --line-height:1.9;          /* مساحة للنقاط والحركات */
  --fs-scale:1.0625;          /* العربية تُقرأ أصغر بصرياً: 16 → 17 */
  --text-align-long:justify;  /* الضبط هو الأصل في العربية */
  --text-align-last:right;
  --hyphens:none;             /* لا تقطيع في العربية */
  --tracking:normal;          /* إلزامي — انظر أدناه */
}

/* --- الإنجليزية --- */
[lang="en"]{
  --font-family:var(--font-en);
  --line-height:1.6;          /* 1.9 تبدو مفكّكة في اللاتينية */
  --fs-scale:1;
  --text-align-long:left;     /* الأنظف بلا تقطيع */
  --text-align-last:auto;
  --hyphens:auto;             /* يلزم إن استُخدم justify */
  --tracking:normal;
}

/* تباعد الحروف يكسر اتصال الحروف العربية ويجعلها غير مقروءة.
   إن أردته في العناوين فاحصره باللاتينية وحدها: */
[lang="en"] .tracking-tight{letter-spacing:-.01em;}
[lang="en"] .tracking-wide{letter-spacing:.04em;}
[lang="ar"] .tracking-tight,
[lang="ar"] .tracking-wide{letter-spacing:normal;}


/* ============================================================
   ٣ب) الوضع الليلي — البنية مهيّأة، القيم غير مفعّلة
   ------------------------------------------------------------
   الوضع الليلي ليس ثيماً منفصلاً، بل نسخة ثانية من القيم داخل
   الثيم نفسه. لا ينقلب ميكانيكياً:
     - السطح البارز يصبح أفتح من الخلفية لا أغمق
     - الظلال لا تُرى — العمق يُصنع بفروق الإضاءة
     - لون العلامة يحتاج رفع إضاءة ليُقرأ على خلفية داكنة
     - سلّم الرماديات ينعكس
   عند التفعيل: احذف التعليق وراجع كل شاشة، وأعد فحوص التباين.
   ============================================================ */
/*
[data-theme="dark"]{
  --brand-600:#4ADE80;
  --brand-700:#22C55E;
  --brand-50:#14251E;
  --brand-fg:#0B1F17;

  --header-bg:#111827;
  --site-name:#F9FAFB;

  --color-heading:#F9FAFB;
  --color-subheading:#D1D5DB;
  --color-text:#E5E7EB;

  --table-header-bg:#1F2937;
  --table-header-text:#F9FAFB;
  --table-border:#374151;

  --surface-raised:#1F2937;
  --surface-raised-fg:#F9FAFB;
  --surface-base:#111827;

  --link-on-raised:#86EFAC;
  --link-on-base:#86EFAC;
  --link-text:#93C5FD;

  --color-icon:var(--brand-600);

  --shadow-sm:none;
  --shadow:none;
}
*/

/* ============================================================
   ٤) الأساس
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:var(--font-family);
  font-size:calc(var(--fs-body) * var(--fs-scale));
  line-height:var(--line-height);
  letter-spacing:var(--tracking);
  color:var(--color-text);
  -webkit-text-size-adjust:100%;
}

h1{font-size:calc(var(--fs-h1) * var(--fs-scale));color:var(--color-heading);line-height:1.4;}
h2,h3{font-size:calc(var(--fs-h2) * var(--fs-scale));color:var(--color-subheading);line-height:1.5;}

a{color:var(--link-text);}

:focus-visible{
  outline:2px solid var(--brand-600);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}


/* ============================================================
   ٥) النص المطوّل — القاعدة تنعكس بين اللغتين
   العربية: تُضبط بلا تقطيع.
   الإنجليزية: تُحاذى يساراً، أو تُضبط مع hyphens:auto لا بدونه.
   ============================================================ */
.prose p,
.prose blockquote,
.prose li{
  text-align:var(--text-align-long);
  text-align-last:var(--text-align-last);
  hyphens:var(--hyphens);
}

.prose blockquote{
  margin-block:var(--space-6);
  padding-block:var(--space-3);
  padding-inline:var(--space-4);
  border-inline-start:3px solid var(--brand-600);
  background:var(--brand-50);
  border-start-end-radius:var(--radius-sm);
  border-end-end-radius:var(--radius-sm);
  font-size:calc(var(--fs-quote) * var(--fs-scale));
  color:var(--color-subheading);
}

/* الضبط ينتج فجوات بيضاء في الأعمدة الضيقة — يُلغى في اللغتين */
@media (max-width:640px){
  .prose p,
  .prose blockquote,
  .prose li{
    text-align:start;
    text-align-last:auto;
  }
}


/* ============================================================
   ٦) الجداول
   ============================================================ */
.table-scroll{overflow-x:auto;}

table{width:100%;border-collapse:collapse;font-size:15px;}

th{
  background:var(--table-header-bg);
  color:var(--table-header-text);
  font-weight:600;
}
th,td{
  border:1px solid var(--table-border);
  padding-block:9px;
  padding-inline:13px;
  text-align:start;          /* منطقية: تتبع الاتجاه تلقائياً */
}

/* الأرقام والمعرّفات تُقرأ من اليسار في اللغتين */
td.num,.num{
  text-align:left;
  direction:ltr;
  font-variant-numeric:tabular-nums;
}


/* ============================================================
   ٧) الأيقونات
   ============================================================ */
.icon{
  width:var(--icon);height:var(--icon);
  stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--color-icon);
  flex:none;
}
.icon-sm{width:var(--icon-sm);height:var(--icon-sm);}
.icon-lg{width:var(--icon-lg);height:var(--icon-lg);}

/* الاتجاهية تنعكس مع [dir] لا مع [lang] */
[dir="rtl"] .icon-directional{transform:scaleX(-1);}

.surface-raised .icon{color:var(--surface-raised-fg);}
.icon-ok{color:var(--ok);} .icon-warn{color:var(--warn);}
.icon-err{color:var(--err);} .icon-muted{color:var(--gray-400);}


/* ============================================================
   ٨) الحقول اللاتينية والأرقام والكود
   ============================================================ */
input[dir="ltr"],
.field-latin{direction:ltr;text-align:left;}

/* عدّادات ونِسب — يمنع اهتزاز العرض مع تغيّر الرقم */
.tnum{font-variant-numeric:tabular-nums;direction:ltr;}

/* كتلة كود داخل أي لغة تبقى LTR ومعزولة عن الاتجاه المحيط */
code,pre,.code{
  direction:ltr;
  text-align:left;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  unicode-bidi:isolate;
}


/* ============================================================
   ٩) الأسطح والأزرار والتنبيهات
   ============================================================ */
.card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:var(--space-6);
}
.surface-base{background:var(--surface-base);}
.surface-raised{background:var(--surface-raised);color:var(--surface-raised-fg);}
.surface-raised a{color:var(--link-on-raised);}
.surface-base a{color:var(--link-on-base);}

.btn{
  font-family:inherit;font-size:16px;font-weight:600;
  cursor:pointer;border-radius:9px;
  padding-block:12px;padding-inline:24px;
  min-height:var(--touch-min);
  border:1px solid transparent;
  display:inline-flex;align-items:center;gap:9px;
}
.btn-main{background:var(--brand-600);color:var(--brand-fg);}
.btn-main:hover{background:var(--brand-700);}
.btn-main .icon{color:var(--brand-fg);}
.btn-ghost{background:#fff;border-color:var(--gray-200);color:var(--color-subheading);}
.btn-ghost:hover{background:var(--gray-50);}
.btn-ghost:disabled{opacity:.4;cursor:default;}

.alert{
  display:flex;gap:11px;align-items:flex-start;
  border-radius:var(--radius-sm);
  padding-block:13px;padding-inline:16px;
  font-size:15px;
}
.alert-ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok);}
.alert-warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:#92400E;}
.alert-err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err);}
.alert-info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info);}


/* ============================================================
   ١٠) الترويسة
   ============================================================ */
.header{
  height:var(--header-h);
  background:var(--header-bg);
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;gap:var(--space-6);
  padding-inline:var(--space-6);
  position:sticky;top:0;z-index:20;
}
.site-name{
  font-size:calc(var(--fs-site-name) * var(--fs-scale));
  font-weight:600;
  color:var(--site-name);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2);}

@media (max-width:640px){
  .site-name .sub{display:none;}
}


/* ============================================================
   ١١) تحميل الخطوط — كل خط لمحارفه فقط عبر unicode-range
   يمنع تحميل الخط العربي لزائر إنجليزي والعكس

   §17.4 — الخطوط الأربعة **تُضمَّن مع النظام لا تُحمَّل من خدمة خارجية**،
   شرط أساسي إن نُشر النظام على خادم داخلي بلا إنترنت. لا يوجد في هذا
   الملف ولا في أي قالب أي نداء إلى Google Fonts أو غيره.

   ملفات الخطوط تُوضع في public/fonts/ ، وإن غاب ملف سقط الخط تلقائياً
   إلى system-ui عبر التسلسل الاحتياطي في --font-ar.
   ============================================================ */
@font-face{
  font-family:'Changa';
  src:url('/fonts/changa-var.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
/* IBM Plex Sans Arabic ليس خطاً متغيّراً — أوزانه ملفات مستقلة.
   ثلاثة إعلانات بدل واحد، وإلا اصطنع المتصفح الوزن الغامق وشوّه الحروف. */
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('/fonts/noto-sans-arabic-var.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'Cairo';
  src:url('/fonts/cairo-var.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC;
}