/* ══════════════════════════════════════════════════════════════
   00-design-tokens.css
   ملف التوكنز الموحّد — البداية بنطاق z-index (جرد يوليو 2026).
   لازم يتحمّل قبل أي ملف CSS تاني عشان المتغيرات تبقى متاحة للكل.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* === Z-INDEX SCALE — نطاقات ثابتة، سيب فراغ بين كل مستوى للتوسع === */
  --z-base:            1;      /* عناصر زخرفية: جسيمات، خلفيات شرائح */
  --z-content-lift:    10;     /* رفع بسيط داخل نفس البطاقة (hover، حلقات) */
  --z-sticky:          100;    /* عناصر ثابتة أثناء التمرير */
  --z-sidebar:         190;    /* الشريط الجانبي + mob-overlay */
  --z-topbar:          200;    /* الشريط العلوي (أعلى من السايدبار) */
  --z-dropdown:        300;    /* tooltips، قوائم منسدلة */
  --z-floating-widget: 500;    /* أزرار عائمة: خط، صوت، إشعار أوفلاين */
  --z-toast:           1000;   /* رسائل toast قصيرة */
  --z-modal-backdrop:  2000;   /* الخلفية المعتمة خلف أي مودال */
  --z-modal:           2100;   /* محتوى المودال نفسه */
  --z-overlay:         3000;   /* شاشات ملء كاملة: قارئ PDF، مراجعة سريعة */
  --z-toolbar-float:   4000;   /* أشرطة أدوات عائمة فوق المحتوى (تظليل، ملاحظات) */
  --z-onboarding:      5000;   /* جولات تعريفية، تمييز عناصر الشرح */
  --z-critical-modal:  8000;   /* سبلاش، شاشة توقف، تأكيد خروج، نوافذ لازم تظهر فوق كل حاجة */
  --z-picker-overlay:  8500;   /* منتقي دروس/خرائط (lc-picker, minimap, preview) */
  --z-top-tooltip:     9000;   /* tooltip عام فوق كل شيء (ui-tooltip) */
  --z-security:        999999; /* آخر خط دفاع: منع لقطة شاشة، لوحات تشخيص طارئة فقط */
}
/* === ICON SYSTEM — sprite-based UI icons === */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.icon-sm { font-size: 14px; }
.icon-md { font-size: 18px; }
.icon-lg { font-size: 24px; }

/* أيقونة تدور (loading spinners) — اختياري */
.icon-spin { animation: icon-spin .8s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }