/* ============================================================
   مودّة — مكوّنات مشتركة (Shared Components) — Phase 1.5 دفعة C
   مبنيّة بالكامل على التوكنز (brand-tokens.css + world-themes.css).
   لا ألوان حرفيّة. تعمل في الوضعين الفاتح/الليليّ ومع أيّ [data-world].
   ============================================================ */

/* ---- البطاقة الموحّدة ---- */
.maw-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.maw-card--flush { padding: 0; overflow: hidden; }
.maw-card--accent { border-top: 3px solid var(--world-accent); }

/* ---- زرّ لون العالم ---- */
.maw-btn-accent {
  background: var(--world-accent);
  color: var(--world-on-accent);
  border: 1px solid var(--world-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  font-weight: var(--t-button-weight);
  line-height: var(--t-button-lh);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
  /* هدف لمس ≥44px (WCAG 2.2 — Target Size) */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.maw-btn-accent:hover { background: var(--world-accent-strong); }

/* ---- شارة بلون العالم ---- */
.maw-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--world-accent-subtle);
  color: var(--world-accent-strong);
  border: 1px solid var(--world-border);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--t-caption-size);
}

/* ---- حالات موحّدة: فارغ/تحميل/خطأ/نجاح ---- */
.maw-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
}
.maw-state .maw-state-icon, .maw-empty .maw-state-icon { font-size: 2.2rem; color: var(--world-accent); margin-bottom: var(--space-3); }
.maw-state h3, .maw-empty h3 { color: var(--text-primary); margin-bottom: var(--space-2); }

/* .maw-empty = حالة فارغة (نفس أسلوب .maw-state) */
.maw-empty { text-align: center; padding: var(--space-10) var(--space-6); color: var(--text-muted); }

/* هيكل تحميل (skeleton) يحترم تقليل الحركة عبر توكنز الحركة */
.maw-skeleton {
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 37%, var(--skeleton) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: maw-skeleton-shine var(--dur-breath) var(--ease-breath) infinite;
}
@keyframes maw-skeleton-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* تنبيهات دلاليّة موحّدة */
.maw-alert { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); border: 1px solid transparent; }
.maw-alert--success { background: var(--success-subtle); color: var(--success-text); border-color: var(--success); }
.maw-alert--error   { background: var(--error-subtle);   color: var(--error-text);   border-color: var(--error); }
.maw-alert--warning { background: var(--warning-subtle); color: var(--warning-text); border-color: var(--warning); }
.maw-alert--info    { background: var(--info-subtle);    color: var(--info-text);    border-color: var(--info); }

/* ---- حالة التركيز المرئيّة (وصول) ---- */
.maw-btn-accent:focus-visible,
.maw-chip:focus-visible,
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }