/* ==========================================================================
   محراب — رموز الهوية (Brand Tokens)  ·  brand.css
   --------------------------------------------------------------------------
   المرجع الوحيد للألوان. المصدر: صفحة المصحف المرجعية (صفحة ١٧٨ — سورة الأنفال)،
   والقيم مأخوذة بقياس البكسلات الفعلي من الصورة.
   الشرح الكامل والقواعد: BRAND.md  ← اقرأه قبل أي عمل على الواجهة.

   AI / tooling: this file is the single source of truth for colors.
   Do NOT hardcode hex values in pages or components: use var(--mh-*).
   Do NOT introduce green, olive, pure white (#fff) or pure black (#000).
   See BRAND.md for the full rules.

   الاستخدام: <link rel="stylesheet" href="brand.css"> أول ملف CSS في الصفحة.
   ========================================================================== */

:root {
  /* ---- ١) الألوان الخام المستخرجة من الصورة (لا تُستعمل مباشرة في الواجهات) ---- */
  --mh-raw-paper:       #f4eede; /* ورق الصفحة */
  --mh-raw-paper-2:     #f0e9d8; /* لوحات العناوين (سورة / جزء / رقم الصفحة) */
  --mh-raw-paper-3:     #ece5d4; /* ظل الورق الخفيف */
  --mh-raw-pill-edge:   #bdaa82; /* حدّ لوحات العناوين */
  --mh-raw-ink:         #1a1710; /* حبر الآيات */
  --mh-raw-teal:        #2a6b80; /* الإطار الأزرق المخضرّ */
  --mh-raw-teal-lt:     #3c7687; /* درجة أفتح من الإطار */
  --mh-raw-blue:        #1d6a8c; /* الكلمات الزرقاء المميّزة داخل النص */
  --mh-raw-brown:       #7a4a22; /* الخط البني الغامق في الإطار */
  --mh-raw-tan:         #a8743a; /* البني الفاتح (حبيبات الزخرفة) */
  --mh-raw-gold:        #e3c279; /* الذهبي (معينات الإطار) */
  --mh-raw-gold-2:      #d4ae69; /* ذهبي أغمق قليلًا */
  --mh-raw-marker:      #a07d36; /* دائرة رقم الآية */
  --mh-raw-medallion:   #81623f; /* وردة الزاوية */

  /* ---- ٢) الأدوار الدلالية — هذه هي المستخدمة في الواجهات ---- */
  /* الأسطح */
  --mh-bg:              #f4eede; /* خلفية الصفحة العامة */
  --mh-surface:         #f0e9d8; /* بطاقات / لوحات / قوائم */
  --mh-surface-2:       #ece5d4; /* أقسام داخل البطاقة / تمرير / ضغط */
  --mh-surface-raised:  #faf6ea; /* حقول إدخال وعناصر بارزة (مشتق: أفتح من الورق، ليس أبيض) */
  --mh-line:            #bdaa82; /* خطوط وحدود هادئة */
  --mh-line-soft:       rgba(122, 74, 34, .18); /* فواصل رفيعة */

  /* النص */
  --mh-ink:             #1a1710; /* النص الأساسي — ممنوع #000 */
  --mh-ink-2:           #4a4232; /* نص ثانوي (مشتق، تباين ٨٫٦) */
  --mh-ink-3:           #6b604a; /* نص خافت/تلميحات (مشتق، تباين ٥٫٣ — الحد الأدنى للنص) */

  /* الأساسي: الأزرق المخضرّ للإطار */
  --mh-primary:         #2a6b80; /* أزرار رئيسية، روابط، تبديل مفعّل، تركيز */
  --mh-primary-hover:   #235a6c; /* (مشتق) */
  --mh-on-primary:      #fbf7ea; /* نص فوق الأساسي — ممنوع الأبيض الصرف */
  --mh-highlight-word:  #1d6a8c; /* تمييز كلمات/مفردات داخل النص */

  /* الثانوي: بني وذهبي الزخرفة */
  --mh-accent:          #a8743a; /* أيقونات، حدود زخرفية، حبيبات — لا يُستعمل لنص صغير (٣٫٥) */
  --mh-accent-ink:      #7a4a22; /* نص/أيقونات بنية تحتاج وضوحًا (تباين ٦٫٤) */
  --mh-gold:            #e3c279; /* تمييز، شارات، تحديد، لمعان */
  --mh-gold-ink:        #8a600b; /* نص ذهبي صغير (مشتق، تباين ٤٫٨) */
  --mh-marker:          #a07d36; /* رقم الآية وعلاماتها */

  /* حالات */
  --mh-danger:          #b3261e; /* خطأ/حذف (موروث من النظام الحالي) */
  --mh-danger-bg:       #f6e1da; /* خلفية رسالة خطأ (مشتق) */
  --mh-success:         var(--mh-primary); /* النجاح بالأزرق المخضرّ؛ لا أخضر مستقل */
  --mh-warning:         var(--mh-accent-ink);

  /* تأثيرات */
  --mh-hl:              rgba(227, 194, 121, .38); /* تظليل ذهبي (آية محددة / بحث) */
  --mh-press:           rgba(122, 74, 34, .10);  /* حالة الضغط */
  --mh-focus-ring:      0 0 0 3px rgba(42, 107, 128, .35);
  --mh-scrim:           rgba(40, 25, 10, .50);
  --mh-shadow:          0 1rem 2.6rem rgba(60, 35, 10, .28), 0 .2rem .6rem rgba(60, 35, 10, .16);

  /* الإطار الزخرفي: أزرق مخضرّ + بني + ذهبي */
  --mh-frame:           var(--mh-raw-teal);
  --mh-frame-line:      var(--mh-raw-brown);
  --mh-frame-ornament:  var(--mh-raw-gold);


  /* مسرح التطبيق (الخلفية الداكنة خلف الكتاب والأشرطة): تيل داكن مشتق من الإطار */
  --mh-stage-1:         #16262c;
  --mh-stage-2:         #0f1d22;
  --mh-stage-3:         #101a1e;
  --mh-stage-edge:      #0c1417;

  /* الخط والمقاسات */
  --mh-font-ui:         'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --mh-radius:          .9rem;
  --mh-radius-sm:       .55rem;
  --mh-radius-pill:     999px; /* لوحات العناوين */

  /* أزرار الحافة (البحث، القائمة، العين، رقم الصفحة، الخارطة) — مقيسة بالبكسل من صورة المرجع */
  --mh-ctl-fill:        #ecddcd; /* تعبئة الأزرار ونصف كتاب رقم الصفحة المظلّل */
  --mh-ctl-edge:        #dcc4ad; /* حدّ الأزرار وإطار كتاب رقم الصفحة */
  --mh-ctl-icon:        #a67a50; /* أيقونتا العين والخارطة */
}

/* ---- الثيم السيبيا (دافئ أكثر، مشتق من الورق) ---- */
[data-theme="sepia"] {
  --mh-bg:              #e9dcb8;
  --mh-surface:         #efe3c2;
  --mh-surface-2:       #e2d3a8;
  --mh-surface-raised:  #f4ead0;
  --mh-line:            #b39b6a;
  --mh-ink:             #2a1e0c;
  --mh-ink-2:           #4d3e22;
  --mh-ink-3:           #6b5a38;
  --mh-ctl-fill:        #e2d3a8;
  --mh-ctl-edge:        #b39b6a;
  --mh-ctl-icon:        #7a4a22;
}

/* ---- الثيم الليلي (مشتق من الأزرق المخضرّ للإطار؛ ممنوع الأخضر الداكن/الزيتي) ---- */
[data-theme="night"] {
  --mh-bg:              #101a1e;
  --mh-surface:         #16262c;
  --mh-surface-2:       #1d3138;
  --mh-surface-raised:  #1a2d34;
  --mh-line:            rgba(244, 238, 222, .16);
  --mh-line-soft:       rgba(244, 238, 222, .10);
  --mh-ink:             #f4eede;
  --mh-ink-2:           #d8d0bb;
  --mh-ink-3:           #a3aeb0;
  --mh-primary:         #5fa3b8;
  --mh-primary-hover:   #7bb6c9;
  --mh-on-primary:      #101a1e;
  --mh-highlight-word:  #6fb4d0;
  --mh-accent:          #c79a5a;
  --mh-accent-ink:      #e3c279;
  --mh-gold:            #e3c279;
  --mh-gold-ink:        #e3c279;
  --mh-marker:          #d4ae69;
  --mh-danger:          #ef8a80;
  --mh-danger-bg:       #3a1d1a;
  --mh-hl:              rgba(227, 194, 121, .22);
  --mh-press:           rgba(244, 238, 222, .08);
  --mh-scrim:           rgba(0, 0, 0, .60);
  --mh-shadow:          0 1rem 2.6rem rgba(0, 0, 0, .55), 0 .2rem .6rem rgba(0, 0, 0, .35);
  --mh-ctl-fill:        #27414a;
  --mh-ctl-edge:        #3d5a63;
  --mh-ctl-icon:        #e3c279;
}

/* ---- جاهزيات اختيارية: تُستخدم في أي صفحة جديدة بلا إعادة اختراع ---- */
.mh-page   { background: var(--mh-bg); color: var(--mh-ink); font-family: var(--mh-font-ui); }
.mh-card   { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); }
.mh-title-pill { /* لوحة العنوان كما في رأس الصفحة المرجعية */
  background: var(--mh-surface); border: 1.5px solid var(--mh-line);
  border-radius: var(--mh-radius-pill); color: var(--mh-ink); padding: .25em 1.1em;
}
.mh-btn    { background: var(--mh-primary); color: var(--mh-on-primary); border: 0; border-radius: var(--mh-radius-sm); padding: .6em 1.2em; font: inherit; cursor: pointer; }
.mh-btn:hover { background: var(--mh-primary-hover); }
.mh-btn:focus-visible, .mh-field:focus-visible { outline: none; box-shadow: var(--mh-focus-ring); }
.mh-btn-ghost { background: transparent; color: var(--mh-primary); border: 1.5px solid var(--mh-primary); }
.mh-field  { background: var(--mh-surface-raised); color: var(--mh-ink); border: 1px solid var(--mh-line); border-radius: var(--mh-radius-sm); padding: .55em .8em; font: inherit; }
.mh-link   { color: var(--mh-primary); }
.mh-mark   { background: var(--mh-hl); }
.mh-verse-no { color: var(--mh-marker); }
.mh-framed { border: 6px solid var(--mh-frame); outline: 1.5px solid var(--mh-frame-line); outline-offset: -9px; border-radius: .35rem; }

/* ==========================================================================
   ٥.٢٣ — رموز الصفحة والإطار والغلاف والمسرح (مرحلة ٢أ)
   كل ما كان صلبًا داخل mushaf.html صار هنا. القيم نُقلت كما هي؛ ما غُيِّر
   عمدًا: الأبيض الصرف ← --mh-on-primary، والأسود الصرف للظلال ← --mh-shadow-rgb دافئ.
   ========================================================================== */
:root {
  /* مثلثات rgb للاستعمال مع الشفافية: rgba(var(--mh-gold-rgb), .3) */
  --mh-gold-rgb:        227, 194, 121;
  --mh-gold-2-rgb:      212, 174, 105;
  --mh-gold-3-rgb:      201, 166, 79;
  --mh-teal-rgb:        42, 107, 128;
  --mh-danger-rgb:      220, 90, 80;
  --mh-light-rgb:       251, 247, 234;  /* بدل الأبيض الصرف في التلميع */
  --mh-shadow-rgb:      24, 15, 4;      /* بدل الأسود الصرف في الظلال (دافئ) */
  --mh-shade-rgb:       70, 45, 10;     /* ظل الورق والتحبيب */
  --mh-shade-2-rgb:     120, 90, 20;    /* حافة الورقة وأزرار الأشرطة */
  --mh-light:           #fbf7ea;        /* فاتح ثابت (لا يتبدّل بالثيم) لحلقة التحديد وناصع النوافذ */
  --mh-stage-1-rgb:     22, 38, 44;
  --mh-stage-3-rgb:     16, 26, 30;
  --mh-stage-deep-rgb:  10, 18, 21;
  --mh-stage-word-rgb:  111, 180, 208;
  --mh-fr-cream-rgb:    241, 227, 184;

  /* المسرح (داكن دائمًا خلف الكتاب) */
  --mh-stage-ink:       #f4eede;
  --mh-stage-ink-2:     #d4ddd7;
  --mh-stage-ink-3:     #d8cfae;
  --mh-stage-mut:       #a3aeb0;
  --mh-stage-primary:   #5fa3b8;
  --mh-stage-word:      #6fb4d0;
  --mh-stage-line:      rgba(var(--mh-light-rgb), .10);
  --mh-stage-sheet:     #121f24;
  --mh-stage-rim:       #1d3138;

  /* نص فوق الذهبي والإطار، ورأس الصفحة */
  --mh-on-gold:         #171106;
  --mh-on-frame:        #35200a;
  --mh-head-ink:        #2c1a06;
  --mh-gold-lt:         #f0cf7a;
  --mh-danger-lt:       #ff9d93;
  --mh-bm-red-1:        #b0302a;  /* ألوان العلامات المرجعية: مستثناة عمدًا (BRAND.md §٦) */
  --mh-bm-red-2:        #8c211d;

  /* ظهر الورقة المطوية */
  --mh-leaf-edge:       #d8c9a5;
  --mh-leaf-lt:         #f5edda;

  /* نافذة معنى الكلمة (قديمة) والنظرة العامة */
  --mh-pop-1:           #25607c;
  --mh-pop-2:           #17415a;
  --mh-pop-ink:         #fff7e3;
  --mh-pop-ink-2:       #e9ddb8;
  --mh-pop-ink-3:       #d9e7ee;
  --mh-pop-ink-4:       #e4eef3;
  --mh-pop-gold:        #f3d58a;
  --mh-pop-gold-2:      #ffd978;
  --mh-ov-1:            #1d3a45;
  --mh-ov-2:            #142a33;
  --mh-ov-3:            #0d1b21;
  --mh-ov-tile:         #2a4a57;

  /* ورقة المصحف — ورقي */
  --mh-page:            #f4eede;
  --mh-page-2:          #ece5d4;
  --mh-page-ink:        #1a1710;
  --mh-page-rule:       #2a6b80;
  --mh-page-rule-2:     #d4ae69;
  --mh-page-num:        #8a600b;
  --mh-page-hl:         rgba(227, 194, 121, .42);
  --mh-page-em:         #8a5f0a;
  /* غلاف الكتاب ولافتات السور */
  --mh-cover-1:         #1f5b6e;
  --mh-cover-2:         #12394a;
  --mh-band-1:          rgba(42, 107, 128, .13);
  --mh-band-2:          rgba(201, 166, 79, .13);
  /* الإطار الزخرفي للصفحة */
  --mh-fr-brown:        #7a4a22;
  --mh-fr-gold:         #d4ad5e;
  --mh-fr-teal:         #2a6b80;
  --mh-fr-cream:        #f1e3b8;
  --mh-fr-cream-2:      #e4cf93;
  --mh-fr-ink:          #5a3612;
  /* لوحة رقم الصفحة في الكتاب */
  --mh-bn-bg:           #2b2b2b;
  --mh-bn-ink:          #111;
}
[data-theme="sepia"] {
  --mh-page:            #ecdcb4;
  --mh-page-2:          #dcc88f;
  --mh-page-ink:        #140c02;
  --mh-page-rule:       #7d5d2c;
  --mh-page-rule-2:     #b4863a;
  --mh-page-num:        #6b4a14;
  --mh-page-hl:         rgba(190, 120, 30, .34);
  --mh-page-em:         #7c4a0c;
  --mh-cover-1:         #4a3018;
  --mh-cover-2:         #2d1c0d;
  --mh-band-1:          rgba(125, 93, 44, .14);
  --mh-band-2:          rgba(180, 134, 58, .16);
  --mh-fr-brown:        #6b3f1a;
  --mh-fr-gold:         #c79a4a;
  --mh-fr-teal:         #3b6a6e;
  --mh-fr-cream:        #e6d19b;
  --mh-fr-cream-2:      #d6bb7c;
  --mh-fr-ink:          #4a2c0e;
  --mh-bn-bg:           #4a3a22;
  --mh-bn-ink:          #2a1c08;
}
[data-theme="night"] {
  --mh-page:            #16262c;
  --mh-page-2:          #101a1e;
  --mh-page-ink:        #fbf4e0;
  --mh-page-rule:       #5fa3b8;
  --mh-page-rule-2:     #b8963f;
  --mh-page-num:        #e3c279;
  --mh-page-hl:         rgba(227, 194, 121, .30);
  --mh-page-em:         #e3c279;
  --mh-cover-1:         #12262d;
  --mh-cover-2:         #0b171b;
  --mh-band-1:          rgba(95, 163, 184, .14);
  --mh-band-2:          rgba(184, 150, 63, .12);
  --mh-fr-brown:        #8a6030;
  --mh-fr-gold:         #b8963f;
  --mh-fr-teal:         #1b4a58;
  --mh-fr-cream:        #1d3138;
  --mh-fr-cream-2:      #16262c;
  --mh-fr-ink:          #e3c279;
  --mh-bn-bg:           #b8963f;
  --mh-bn-ink:          #f0dca0;
  --mh-shadow-rgb:      4, 10, 12;      /* ظل مائل للتيل فوق المسرح الداكن، لا بنيًّا */
}

/* ==========================================================================
   ٥.٢٤ — رموز ملفات JS (مرحلة ٢ب): القوائم، الغريب، الجولة، الختمة، الخارطة، الفهرس
   القيم نُقلت كما كانت في الورقي. في السيبيا والليلي: قوائم السور والأجزاء صارت تتبع الثيم
   (كانت كريمية دائمًا)، وبقية الرموز نفسها لم تتبدّل بين الثيمات.
   ========================================================================== */
:root {
  --mh-stage-primary-rgb: 95, 163, 184;
  --mh-stage-3-rgb:       16, 26, 30;
  --mh-gold-press:        #f1d283;        /* ضغط الأزرار الذهبية */
  --mh-arm-bg:            #8d2f2f;        /* زر «تأكيد» الأحمر في الختمة */
  --mh-arm-edge:          #c24c4c;
  /* الجولة التعريفية */
  --mh-tour-blue:         #5fb8d6;
  --mh-tour-blue-rgb:     95, 184, 214;
  --mh-tour-copper:       #d98e5a;
  --mh-tour-copper-rgb:   217, 142, 90;
  --mh-tour-gold-rgb:     227, 189, 98;
  --mh-tour-ink-rgb:      246, 239, 221;
  /* الكلمات الغريبة */
  --mh-gh:                #1d6a8c;
  --mh-gh-rgb:            47, 127, 159;
  --mh-gh-2-rgb:          47, 160, 220;
  --mh-gh-3-rgb:          47, 170, 230;
  --mh-ic-blue:           #8cc6da;
  --mh-danger-soft-rgb:   255, 120, 110;
  --mh-danger-ic:         #ff9a90;
  --mh-gb-1:              #2273a8;        /* فقاعة معنى الغريب (قديمة) */
  --mh-gb-2:              #145079;
  --mh-gb-3:              #0d3858;
  --mh-gb-shadow-rgb:     3, 16, 30;
  --mh-gw-ink:            #fff3c9;
  --mh-gw-glow-rgb:       255, 226, 140;
  --mh-gw-line-rgb:       255, 240, 190;
  --mh-gw-dot:            #ffe9a8;
  --mh-gw-text:           #eaf5ff;
  /* قوائم السور والأجزاء */
  --mh-list-fill:         #e6dcc4;
  --mh-list-press:        #d8c9a8;
}
[data-theme="sepia"] {
  --mh-gh:                #1f6179;
  --mh-gb-1:              #86532b;
  --mh-gb-2:              #5e3718;
  --mh-gb-3:              #40240e;
  --mh-list-fill:         #dccb9c;
  --mh-list-press:        #d0bd8a;
}
[data-theme="night"] {
  --mh-gh:                #82c7e4;
  --mh-gb-1:              #18405a;
  --mh-gb-2:              #102d42;
  --mh-gb-3:              #091b2b;
  --mh-list-fill:         #1d3138;
  --mh-list-press:        #27414a;
}

/* ٥.٢٤ب — رموز memorize.html (حالات التسميع والتسجيل والمراجعة) */
:root {
  --mh-gold-deep:         #b8923a;
  --mh-mem-ink:           #c3cfc7;
  --mh-mem-ink-2:         #c7d3cb;
  --mh-mem-muted:         #9aa89f;
  --mh-mem-bad:           #ff3b30;
  --mh-mem-bad-rgb:       224, 60, 50;
  --mh-mem-miss:          #ffcb7c;
  --mh-mem-miss-rgb:      255, 170, 60;
  --mh-mem-rec-1:         #ff8f7e;
  --mh-mem-rec-2:         #d6402d;
  --mh-mem-rec-rgb:       255, 110, 90;
  --mh-mem-err:           #ff6b5b;
  --mh-mem-err-rgb:       255, 107, 91;
  --mh-mem-err-ink:       #ff9585;
  --mh-mem-arm-1:         #ffd37a;
  --mh-mem-arm-2:         #d9962b;
  --mh-mem-arm-ink:       #2a1a02;
  --mh-mem-res:           #e0705a;
  --mh-mem-res-edge:      #8a3d30;
}

/* ٥.٢٥ — الحركة: رموز موحّدة + شبكة أمان لـ«تقليل الحركة» (جهاز أو إعداد «حركة الواجهة: هادئة») */
:root {
  --mh-dur-fast:  .14s;
  --mh-dur:       .26s;
  --mh-dur-slow:  .42s;
  --mh-ease:      cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="calm"] *, html[data-motion="calm"] *::before, html[data-motion="calm"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}