/* ════════════════════════════════════════════════════════════════
   هوية القرآن مباشر — ملف الرموز المشترك (المصدر الوحيد)
   المرجع: quran-brand/BRAND.md (اعتمده عمر 2026-10-08، سجلّه في DECISIONS.md)
   كل منصة تنسخ هذا الملف كما هو ولا تعدّله، وتضع ما يخصها في ملف منفصل بلا ألوان جديدة.
   متوافق مع الأسماء القديمة (--b-*، --n-*، --s-*، --accent*، --fs-*، --r-*):
   من ينسخه مكان النسخة القديمة تتغير عنده الألوان وحدها، ولا تتغير المقاسات ولا الزوايا.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── سلّم الأخضر (OKLCH، الصبغة 152–162). 500 هو Green Elliott بعينه ── */
  --g-50:  #e5feed;  /* سطح فاتح: الشارات والصفوف المحددة (نص 700 عليه 4.8:1) */
  --g-100: #c9fbd8;
  --g-200: #9cf4b7;
  --g-300: #68e594;
  --g-400: #36d176;
  --g-500: #00ba61;  /* Green Elliott — الإجراء الرئيس والمؤشرات والأيقونة (نص 950 عليه 5.8:1، و990 7.1:1) */
  --g-600: #009951;
  --g-700: #047e44;  /* أخضر النص والروابط: 5.2:1 على الأبيض */
  --g-800: #046339;
  --g-900: #07492c;
  --g-950: #012f1c;  /* المرساة الداكنة: رؤوس، منشورات، أغلفة (الأبيض عليه 14.7:1) */
  --g-990: #03190f;

  /* ── رماديات مائلة إلى الأخضر ── */
  --n-0:   #fafffb;
  --n-50:  #f3f8f4;  /* ورق: أرضية خفيفة */
  --n-150: #eaf0ec;
  --n-250: #dde3df;
  --n-350: #cacfcb;
  --n-450: #a1a6a2;  /* معطّل فقط، لا نص */
  --n-600: #606561;  /* نص مساعد: 5.9:1 على الأبيض، 5.5:1 على الورق */
  --n-750: #4a4e4b;  /* نص ثانوي */
  --n-900: #1b211d;  /* نص القراءة: 16.4:1 */
  --n-990: #0b110d;  /* أشد نص */

  /* ── الكرفسي: إبراز فقط (كلمة أو شارة)، على المرساة أو بنص داكن ── */
  --celery: #ccff97;

  /* ── أسماء الأدوار (استعملها في الواجهات بدل الدرجات) ── */
  --anchor: var(--g-950);
  --on-anchor: #ffffff;
  --text: var(--n-900);
  --text-2: var(--n-750);
  --text-3: var(--n-600);
  --text-green: var(--g-700);
  --surface: #ffffff;
  --surface-2: var(--n-50);
  --surface-green: var(--g-50);
  --line: var(--n-250);
  --line-strong: var(--n-350);

  /* ── أسماء قديمة (توافق): القيم الجديدة بالأدوار نفسها ── */
  --b-green:  #00ba61;
  --b-celery: #ccff97;
  --b-mint:   var(--g-300);   /* كان #4cdba0 (Mint Jelly): حلّت محله درجة السلّم (قرار عمر 2026-10-08) */
  --b-algae:  var(--g-200);   /* كان #94e9c6 (Bubble Algae) */
  --b-mist:   var(--g-50);    /* كان #dbf8ec (Diluted Mint) */
  --b-white:  #ffffff;
  --b-black:  #0b110d;   /* كان #000000: الحبر المائل إلى الأخضر */
  --b-deep:   #012f1c;

  /* أُلغي استثناء الأزرق في منصة الحالات (قرار عمر 2026-10-08): الاسمان باقيان للتوافق بألوان الهوية */
  --b-blue:      var(--g-950);
  --b-blue-soft: var(--g-50);

  --n-950: var(--n-990);
  --n-700: var(--n-750);
  --n-500: var(--n-600);  /* كان #666666: النص المساعد يبقى ≥ 5.5:1 */
  --n-400: var(--n-450);
  --n-300: var(--n-350);
  --n-200: var(--n-250);
  --n-100: var(--n-50);

  /* ── الدلالات: درجة واحدة لكل منها + خلفيتها (للحالة لا للزينة) ── */
  --s-error: #c62828;  --s-error-bg: #fdecec;   /* 5.0:1 على خلفيته */
  --s-warn:  #955a17;  --s-warn-bg:  #fff3e0;   /* 5.1:1 */
  --s-ok:    #00ba61;  --s-ok-bg:    #e5feed;   /* مؤشر النجاح 500 (نص داكن عليه)؛ ونص النجاح --s-ok-text */
  --s-ok-text: #047e44;                           /* 4.8:1 على --s-ok-bg */
  --s-info:  #4a4e4b;  --s-info-bg:  #f3f8f4;

  /* ── الخطوط: الكوفي للعناوين والأرقام البارزة والأزرار، والنسخي للقراءة ── */
  --font-display: "Noto Kufi Arabic", "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;
  --font: "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* سلّم المقاسات: الأسماء القديمة بقيمها كما هي حتى تُراجع الواجهات (لا يتغير تخطيط بنسخ الملف) */
  --fs-xs: 12px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  /* السلّم الجديد للنص: 12 · 13 · 15 · 18 · 22 */
  --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-lead: 18px; --fs-h4: 22px;
  /* سلّم العناوين (الكوفي) */
  --fs-d3: 28px; --fs-d2: 36px; --fs-d1: 48px;
  --lh-text: 1.8;   /* العربية تحتاج سطرًا أعلى */
  --lh-display: 1.35;

  /* ── النقطة المعيّنة: وحدة القياس ── */
  --dot: 8px;                 /* ضلع المعيّن في الواجهات (قطره نحو 11px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* ── الحركة: هادئة، تأتي من اليمين، ولا ترتد ── */
  --dur-press: 120ms;    /* ضغط زر */
  --dur-state: 200ms;    /* تمرير، تبديل، تغيّر لون */
  --dur-enter: 320ms;    /* ظهور بطاقة أو نافذة */
  --dur-page: 560ms;     /* انتقال صفحة أو شريحة */
  --dur-build: 1200ms;   /* بناء النقاط والأرقام */
  --stagger: 60ms;       /* الفاصل بين عناصر متتابعة */
  --ease-out: cubic-bezier(.2, .7, .1, 1);     /* الدخول */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* الانتقال بين حالتين */
  --ease-in: cubic-bezier(.4, 0, 1, 1);        /* الخروج */
  --rise: 16px;          /* مسافة صعود العنصر عند ظهوره */

  /* ── الأشكال ── */
  --r-card: 12px;
  --r-ctl: 8px;
  --r-pill: 999px;
  --shadow: 0 1px 3px rgba(11, 17, 13, 0.08);   /* الظل المحايد الوحيد */

  /* ── قائد المنصة (--accent) — الافتراضي: Green Elliott بنص داكن ── */
  --accent: var(--g-500);
  --accent-ink: var(--g-990);
  --accent-soft: var(--g-50);
  --accent-2: var(--celery);
  --accent-2-ink: var(--n-990);
}

/* منصة الحالات: أداة عمل يومية، تقودها المرساة 950 بنص أبيض (14.7:1)، والأخضر 500 للإكمال والنجاح */
:root[data-platform="cases"] {
  --accent: var(--g-950);
  --accent-ink: #ffffff;
  --accent-soft: var(--g-50);
  --accent-2: var(--g-200);
  --accent-2-ink: var(--n-990);
}

/* ── النقطة المعيّنة: مكوّن جاهز ── */
.qm-dot {
  display: inline-block;
  width: var(--dot); height: var(--dot);
  background: var(--g-500);
  transform: rotate(45deg);
  flex: none;
}
.qm-dot.off { background: var(--n-350); }
/* سطر أثر: النقاط تمتلئ من اليمين (اتجاه الصفحة) */
.qm-dots { display: flex; flex-wrap: wrap; gap: calc(var(--dot) * 0.75); padding: calc(var(--dot) * 0.35); }

/* ── الحركة: مكوّنات جاهزة ── */
.qm-enter { animation: qm-enter var(--dur-enter) var(--ease-out) both; }
@keyframes qm-enter { from { opacity: 0; transform: translateY(var(--rise)); } }
.qm-dots .qm-dot { transition: background-color var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.qm-dot.fill { animation: qm-dot-fill var(--dur-enter) var(--ease-out) both; }
@keyframes qm-dot-fill { from { transform: rotate(45deg) scale(.2); opacity: 0; } }
/* مؤشر التحميل: ثلاث نقاط تمتلئ من اليمين */
.qm-loader { display: inline-flex; gap: 6px; direction: rtl; }
.qm-loader i { width: 8px; height: 8px; background: var(--g-500); transform: rotate(45deg); animation: qm-load 900ms var(--ease-in-out) infinite; }
.qm-loader i:nth-child(2) { animation-delay: 150ms; }
.qm-loader i:nth-child(3) { animation-delay: 300ms; }
@keyframes qm-load { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .qm-enter, .qm-dot.fill { animation: none; }
  .qm-loader i { animation-duration: 2400ms; }
  .qm-dots .qm-dot { transition: none; }
}