/* ════════════════════════════════════════════════════════════════════════════════════════════════
   tokens.css — نظام التصميم. **المكان الوحيد اللي فيه قيمة لون أو مسافة أو ظل.**

   الأساس هنا هو توكنز اللوحة القديمة (19 متغيّر مبنيين على مرجع فيجما) — اتحافظ عليها بالحرف
   لأنها كانت شغّالة وصح، وبتستخدم خصائص منطقية (inline-start/end) يعني RTL صحيح بالتصميم.

   اللي اتضاف 2026-09-04:
    · 26 لون كانوا مكتوبين هاردكود برّه المتغيّرات — كلهم اتجمّعوا هنا.
    · سلّم مسافات وخطوط ونصف أقطار — كانت أرقام متناثرة في 514 تصريح.
    · **وضع داكن كامل** — ما كانش موجود خالص.
    · ألوان دلالية (نجاح/تحذير/خطر) منفصلة عن لون الهوية — عشان «مطلوب انتباه» يتقرا بلمحة.

   ⚠️ الوضع الداكن بيتحدّد بترتيب مقصود: القيم الفاتحة على `:root` العادي (فبتشتغل حتى لو
   المتصفح ما بيدعمش أي حاجة)، وبعدين `prefers-color-scheme` مشروط بـ`:not([data-theme=light])`
   عشان الاختيار الصريح يكسب على إعداد النظام، وبعدين `[data-theme=dark]` عشان الزرار يكسب في
   الاتجاهين. أي لون يتعرّف **جوّه** بلوك داكن بس = باج: بيختفي في الوضع الفاتح.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── الأسطح ── */
  --bg:#F6F7F9; --side:#FBFBFC; --card:#FFFFFF; --field:#F3F4F6; --raise:#FAFAFB;
  --bd:#E8EAEE; --bd2:#DDE0E6; --bd3:#C6CBD4;

  /* ── النص ── */
  --tx:#14181F; --tx2:#3F4756; --mut:#7A8394; --faint:#A6ADBB;

  /* ── هوية Roonfit ── */
  --p:#FB6A01; --p-soft:#FFF0E5; --p-deep:#D95500; --p-line:#F9B27C; --p-hi:#FF9440;
  --p-glow:rgba(251,106,1,.28);

  /* ── ألوان دلالية — منفصلة عن الهوية عن قصد ── */
  --g:#1FA55A; --g-soft:#E7F7EE; --g-glow:rgba(31,165,90,.25);
  --r:#E23F3F; --r-soft:#FDECEC; --r-glow:rgba(226,63,63,.4);
  --am:#B7791F; --am-soft:#FBF0DC;
  --bl:#2563C9; --bl-soft:#E8F0FD;

  /* ── محايدات مساعدة ── */
  --chip-bg:#EEF0F3; --chip-tx:#8A93A3; --hover:#F0F1F4;
  --bar-bg:rgba(246,247,249,.94);
  --overlay:rgba(15,18,24,.45);
  --sel:#FFD9BC;
  --track:#D2D7DE;

  /* ── الظلال ── */
  --sh:0 1px 2px rgba(20,24,31,.05);
  --sh2:0 10px 30px rgba(20,24,31,.10);
  --sh3:0 2px 6px rgba(0,0,0,.2);

  /* ── سلّم المسافات ── */
  --s1:4px; --s2:6px; --s3:8px; --s4:10px; --s5:12px; --s6:14px; --s7:16px; --s8:20px; --s9:26px;

  /* ── نصف الأقطار ── */
  --r1:8px; --r2:10px; --r3:11px; --r4:12px; --r5:13px; --r6:16px; --r7:20px; --rf:999px;

  /* ── الخط ── */
  --font:'Cairo',-apple-system,'Segoe UI',Tahoma,sans-serif;
  --fz-xs:10.5px; --fz-s:11.5px; --fz-sm:12.5px; --fz-b:13.5px; --fz-m:14px;
  --fz-l:15px; --fz-xl:17px; --fz-2xl:19px; --fz-3xl:23px;

  --dur:.15s;
}

/* الوضع الداكن من إعداد النظام — إلا لو المستخدم اختار الفاتح صراحةً */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1216; --side:#141820; --card:#191E27; --field:#1F252F; --raise:#1C222B;
    --bd:#262D38; --bd2:#313A47; --bd3:#3E4957;

    --tx:#E9ECF1; --tx2:#C3CAD5; --mut:#8B95A5; --faint:#6A7484;

    --p:#FF8A3D; --p-soft:#33200F; --p-deep:#FFB37A; --p-line:#6B441F; --p-hi:#FFA766;
    --p-glow:rgba(255,138,61,.22);

    --g:#43C68F; --g-soft:#0F2A20; --g-glow:rgba(67,198,143,.2);
    --r:#F0736A; --r-soft:#2E1715; --r-glow:rgba(240,115,106,.3);
    --am:#DDA144; --am-soft:#2C2214;
    --bl:#6BA3F5; --bl-soft:#15223A;

    --chip-bg:#232A34; --chip-tx:#8B95A5; --hover:#1E242E;
    --bar-bg:rgba(15,18,22,.94);
    --overlay:rgba(0,0,0,.6);
    --sel:#5A3316;
    --track:#3A4351;

    --sh:0 1px 2px rgba(0,0,0,.4);
    --sh2:0 10px 30px rgba(0,0,0,.55);
    --sh3:0 2px 6px rgba(0,0,0,.6);
  }
}

/* الاختيار الصريح بيكسب في الاتجاهين */
:root[data-theme="dark"]{
  --bg:#0F1216; --side:#141820; --card:#191E27; --field:#1F252F; --raise:#1C222B;
  --bd:#262D38; --bd2:#313A47; --bd3:#3E4957;

  --tx:#E9ECF1; --tx2:#C3CAD5; --mut:#8B95A5; --faint:#6A7484;

  --p:#FF8A3D; --p-soft:#33200F; --p-deep:#FFB37A; --p-line:#6B441F; --p-hi:#FFA766;
  --p-glow:rgba(255,138,61,.22);

  --g:#43C68F; --g-soft:#0F2A20; --g-glow:rgba(67,198,143,.2);
  --r:#F0736A; --r-soft:#2E1715; --r-glow:rgba(240,115,106,.3);
  --am:#DDA144; --am-soft:#2C2214;
  --bl:#6BA3F5; --bl-soft:#15223A;

  --chip-bg:#232A34; --chip-tx:#8B95A5; --hover:#1E242E;
  --bar-bg:rgba(15,18,22,.94);
  --overlay:rgba(0,0,0,.6);
  --sel:#5A3316;
  --track:#3A4351;

  --sh:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 10px 30px rgba(0,0,0,.55);
  --sh3:0 2px 6px rgba(0,0,0,.6);
}