/* ===== Flfluencer — طبقة التفاعل المشتركة (flf-ui v1) =====
   تُحمَّل في كل صفحات المنصة. تضيف حالات التفاعل الأساسية فقط
   (التركيز، الضغط، التعطيل، تقليل الحركة) بدون تغيير ألوان الصفحات أو تخطيطها.
   القواعد مكتوبة بأقل خصوصية ممكنة حتى تتقدّم عليها أنماط كل صفحة عند الحاجة. */

:root {
  /* الحركة */
  --flf-dur-micro: 120ms;     /* ضغط، تحويم، تغيّر لون */
  --flf-dur-comp: 200ms;      /* تبويبات، توسيع، تبديل حالة */
  --flf-dur-overlay: 240ms;   /* نوافذ وقوائم */
  --flf-ease-out: cubic-bezier(.22, 1, .36, 1);
  --flf-ease-std: cubic-bezier(.4, 0, .2, 1);
  /* التركيز */
  --flf-focus: #1F1E1D;
  --flf-focus-soft: rgba(31, 30, 29, .14);
  /* الحواف */
  --flf-r-sm: 10px;
  --flf-r-md: 14px;
  --flf-r-lg: 20px;
  --flf-r-pill: 100px;
}

/* اللمس: إزالة الوميض الرمادي وتأخير النقر المزدوج على الجوال */
:where(a, button, [role="button"], summary, label, input[type="checkbox"], input[type="radio"], select) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* التركيز بلوحة المفاتيح: حلقة واضحة على الأزرار والروابط فقط عند التنقل بالكيبورد */
:is(button, a[href], [role="button"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"]), summary):focus-visible {
  outline: 2px solid var(--flf-focus);
  outline-offset: 2px;
}
:where(button, a[href], [role="button"], [role="tab"], [role="menuitem"], [tabindex], summary):focus:not(:focus-visible) {
  outline: none;
}

/* الحقول: حلقة ناعمة عند التركيز، وتتقدّم عليها أي حالة تركيز خاصة بالصفحة */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--flf-focus-soft);
}

/* الضغط: استجابة فورية صغيرة لا تتعارض مع transform الموجود في الصفحات */
:where(button, [role="button"], input[type="submit"], input[type="button"]):not(:disabled):not([aria-disabled="true"]):active {
  scale: .98;
}

/* التعطيل */
:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

/* التحديد بلون الهوية */
::selection { background: rgba(192, 39, 28, .16); }

/* الصور لا تُسحب بالخطأ */
:where(img) { -webkit-user-drag: none; }

/* احترام تقليل الحركة في نظام المستخدم */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* حركات الظهور تُلغى، ومؤشرات التحميل الدوّارة تبقى حتى لا تبدو الصفحة متجمّدة */
  :not([class*="spin"]):not([class*="load"]):not([class*="skel"]):not([class*="shimmer"]),
  :not([class*="spin"]):not([class*="load"]):not([class*="skel"]):not([class*="shimmer"])::before,
  :not([class*="spin"]):not([class*="load"]):not([class*="skel"]):not([class*="shimmer"])::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  :where(button, [role="button"], input[type="submit"], input[type="button"]):active { scale: none; }
}