/* ═══════════════════════════════════════════════════════════════════════════
   كليم — ملفّ الرموز الموحَّد
   المصدر الملزِم: specs/014-visual-system-unification/design-system.md
   أُنشئ ١٧ أغسطس ٢٠٢٦ · الحزمة 014 · قرار المالك بالتفويض D-017-12

   هذا هو المصدر الوحيد لكل قيمة بصرية في كليم.
   ممنوع كتابة أي لون أو مقاس حرفيًا في أي ملف آخر.
   الفحص: node tools/check-design.mjs
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* ── العائلة ──────────────────────────────────────────────────────────
     N3 — Cairo وحده. التمايز بالوزن والمقاس والتتبّع، لا بتبديل العائلة.
     ممنوع رابط Google Fonts — يسقط صامتًا تحت CSP. الخطّ مضمّن data-URI. */
  --sans:'Cairo',"Segoe UI",Tahoma,system-ui,sans-serif;

  /* ── الحبر ──────────────────────────────────────────────────────────── */
  --ink:#161a22;      /* عنوان · رقم · نصّ أساسي — 17.4:1 */
  --ink-2:#4a5364;    /* متن ثانوي · تسمية — 7.7:1 */
  --ink-3:#626c7f;    /* تلميح · حاجب — 5.3:1 على البطاقة · 4.8:1 على الأرضية
                         صُحّح من #79839a في ١٧ أغسطس ٢٠٢٦: كان 3.8/3.4 أي راسبًا
                         في AA، وهو مستعمل في نصوص ١١٫٥px لا في عناوين كبيرة.
                         القياس: node tools/check-contrast.mjs */

  /* ── الأسطح ─────────────────────────────────────────────────────────── */
  --bg:#f1f3f6;       /* أرضية الصفحة */
  --surface:#fff;     /* بطاقة · لوحة · سكّة */
  --surface-2:#f8fafb;/* سطح غائر خفيف · فقاعة واردة */
  --line:#e0e5ec;     /* حدّ زخرفيّ — بطاقة · فاصل. لا يُطلب منه ٣:١ لأن
                         البطاقة تُعرَف بسطحها لا بحدّها */
  --line-2:#eef1f5;   /* فاصل صفّ · رأس جدول */
  --line-3:#f5f7f9;   /* هوفر · رفّ مجموعة */
  --line-field:#7b8ca3;/* حدّ الحقول وحدها — 3.4:1 على البطاقة · 3.1:1 على الأرضية.
                         مطلوب لأن الحقل أبيض على أرضية شبه بيضاء (1.06:1)،
                         فالحدّ هو الشيء الوحيد الذي يُعرِّفه (WCAG 1.4.11).
                         لا يُستعمل على بطاقة ولا فاصل — يبقى الشكل خفيفًا. */

  /* ── العلامة — لون فاعل واحد ────────────────────────────────────────── */
  --brand:#1f4d8f;
  --brand-2:#2f6bbf;   /* هوفر الأساسي فقط */
  --brand-soft:#e8eff9;/* سطح الحالة النشطة */
  --brand-line:#cddcf0;
  --on-brand:#fff;

  /* ── الحالة — وحدها تحمل لونًا ──────────────────────────────────────── */
  --ok:#15694a;   --ok-soft:#e4f2ea;   --ok-line:#c2e0d1;
  --warn:#8a5a00; --warn-soft:#fcf3de; --warn-line:#efdcb4;
  --bad:#9d2222;  --bad-soft:#fbe9e9;  --bad-line:#f0cdcd;
  --mut:#5b6474;  --mut-soft:#eef1f5;  --mut-line:#dee4ec;

  /* ── شريط التمرير ───────────────────────────────────────────────────── */
  --sb:#ccd4de; --sb-h:#adb8c7;

  /* ── سلّم الطباعة — إحدى عشرة درجة، لا ثانية عشرة ─────────────────────
     كان في الأصول ٦٥ مقاسًا، ستّة منها داخل بكسل واحد. */
  --fs-display:27px;  /* بطل صفحة عامة */
  --fs-h1:23px;       /* عنوان شاشة */
  --fs-h2:19px;       /* عنوان قسم */
  --fs-h3:16px;       /* عنوان بطاقة */
  --fs-lead:15px;     /* مقدّمة · رقم مؤشّر صغير */
  --fs-body:13.5px;   /* متن · نصّ رسالة */
  --fs-ui:13px;       /* صفّ جدول · عنصر قائمة */
  --fs-ui-sm:12.5px;  /* زرّ · حقل · خليّة كثيفة */
  --fs-meta:11.5px;   /* شارة · شريحة · تسمية */
  --fs-micro:10.5px;  /* حاجب · عدّاد */
  --fs-nano:9.5px;    /* علامة على بطاقة مكتظّة فقط */

  /* ── الأوزان — ثلاثة والافتراضي ─────────────────────────────────────── */
  --fw-strong:800;  /* كل عنوان وكل رقم وكل شارة */
  --fw-med:700;     /* تسمية · صفّ نشط · تأكيد */
  --fw-ui:600;      /* زرّ · حقل */

  /* ── التتبّع — يرافق المقاس، لا يُختار وحده ──────────────────────────── */
  --tr-display:-.03em;
  --tr-h1:-.025em;
  --tr-h2:-.02em;
  --tr-h3:-.015em;
  --tr-micro:.09em;  /* الحاجب وحده — مع text-transform:uppercase */

  /* ── ارتفاع السطر — أربع قيم ────────────────────────────────────────── */
  --lh-body:1.75;    /* N5 — الحدّ الأدنى للعربية */
  --lh-prose:1.85;   /* فقرة طويلة في ورقة تشريح */
  --lh-title:1.4;
  --lh-number:1.2;

  /* ── سلّم المسافة — ستّ درجات ───────────────────────────────────────── */
  --sp-1:4px;   /* أيقونة ونصّها داخل شارة */
  --sp-2:8px;   /* داخل صفّ · بين شرائح */
  --sp-3:12px;  /* الافتراضي بين عناصر بطاقة */
  --sp-4:16px;  /* حشو بطاقة · بين بطاقات */
  --sp-5:24px;  /* بين أقسام شاشة */
  --sp-6:40px;  /* بين كتل صفحة عامة */

  /* ── الارتفاعات — خمس درجات ─────────────────────────────────────────── */
  --h-xs:26px;    /* شارة · حبّة */
  --h-sm:32px;    /* زرّ صغير · حقل مكتظّ */
  --h-md:36px;    /* الزرّ والحقل الافتراضيان · صفّ قائمة */
  --h-lg:40px;    /* رأس مجموعة في السكّة · تبويب */
  --h-touch:46px; /* الجوّال — كل هدف لمس أساسي */

  /* ── الاستدارة — ثلاثة رموز واستثناءان ──────────────────────────────── */
  --r:10px;        /* بطاقة · لوحة · مودال */
  --r-sm:7px;      /* زرّ · حقل · شريحة · صفّ */
  --r-pill:999px;  /* حبّة · شارة · مفتاح · صورة رمزية */
  --r-mark:9px;    /* استثناء معلن: مربّع الحرف واللوجو */
  --r-bubble:13px; /* استثناء معلن: فقاعة الرسالة */
  --r-origin:5px;  /* زاوية منشأ الفقاعة */

  /* ── الظلال ─────────────────────────────────────────────────────────── */
  --sh-1:0 1px 2px rgba(22,26,34,.04),0 1px 1px rgba(22,26,34,.025);
  --sh-2:0 1px 3px rgba(22,26,34,.06),0 10px 30px rgba(22,26,34,.05);
  --sh-lift:0 2px 6px rgba(22,26,34,.06),0 14px 32px rgba(22,26,34,.07);
  --sh-brand:0 1px 2px rgba(14,32,60,.14),0 5px 16px rgba(31,77,143,.2);

  /* ── الحركة — N2 · السقوف ───────────────────────────────────────────
     ease-out دائمًا · بلا نوابض في أي سطح تشغيلي. */
  --t-micro:150ms;   /* لون · خلفية · حدّ */
  --t-move:200ms;    /* تخطيط · شفافية · انزلاق */
  --t-modal:250ms;   /* السقف الأعلى */
  --t-stagger:40ms;  /* تأخير تدرّج تسمية السكّة */
  --ease:cubic-bezier(.2,.6,.3,1);

  /* N2-b — الحركة الحيّة. لا حركة بلا مُعطى حقيقي وراءها. */
  --t-pulse:2400ms; --pulse-amp:.08; --t-wash:3000ms;

  /* ── القشرة ─────────────────────────────────────────────────────────── */
  --rail:64px;        /* مطويّة — النموذج المعتمَد، صُحّح من 62px */
  --rail-open:272px;  /* مفتوحة — صُحّح من 236px */

  /* نقاط الانكسار — للتوثيق فقط، لا تُقرأ داخل @media:
     1280 · 1024 · 900 · 620   (و760 استثناء معلن للاستوديو وحده) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   الوضع الداكن — بالمفتاح الصريح وحده.
   ممنوع prefers-color-scheme وممنوع light-dark() في أي أصل.
   العلامة تفتح، والنصّ عليها يغمق.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  color-scheme: dark;
  --ink:#e9edf3; --ink-2:#a5b0c0; --ink-3:#78838f;
  --bg:#0c1017; --surface:#141a23; --surface-2:#1a212c;
  --line:#252d3a; --line-2:#1e2530; --line-3:#191f29;
  --line-field:#58677e;  /* 3.0:1 على السطح · 3.3:1 على الأرضية */
  --brand:#7fb2f0; --brand-2:#9cc6f8; --brand-soft:#16273c;
  --brand-line:#284563; --on-brand:#08182c;
  --ok:#5fce9d;   --ok-soft:#0f2a20;   --ok-line:#234a38;
  --warn:#e5b06b; --warn-soft:#2c2415; --warn-line:#453922;
  --bad:#ef8080;  --bad-soft:#301b1b;  --bad-line:#4d2b2b;
  --mut:#8a94a4;  --mut-soft:#1b222c;  --mut-line:#2b333f;
  --sb:#2b3441; --sb-h:#3a465a;
  --sh-1:0 1px 2px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
  --sh-2:0 1px 3px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  --sh-lift:0 2px 8px rgba(0,0,0,.45),0 16px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  --sh-brand:0 1px 2px rgba(0,0,0,.4),0 5px 16px rgba(127,178,240,.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   الطبقة الأساسية — أقلّ ما يلزم حتى تُقرأ الرموز
   ═══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;min-width:0}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:14.5px;                /* أساس القشرة — السلّم يبدأ منه */
  line-height:var(--lh-body);
  background:var(--bg);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--t-move) var(--ease);
}

/* N5 — عزل الاتجاه لكل رقم أو نصّ لاتيني داخل عربي */
bdi,.num{unicode-bidi:isolate;font-variant-numeric:tabular-nums}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px}

button{font-family:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,textarea,select{font-family:inherit;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* شريط التمرير — نحيف، يظهر ٣px */
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--sb);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-h);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}

/* الجوّال — هدف اللمس ٤٦px في كل سطح بلا استثناء */
@media (max-width:620px){
  button,[role=button],a.btn,.navlink,input,select{min-block-size:var(--h-touch)}
}

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