/* ============================================================
   إذاعة القرآن الكريم — Design Tokens
   مستخرجة من دليل الهوية البصرية الرسمي (Holy Quran Radio)
   ============================================================ */

:root {
  /* --- الألوان الأساسية (من دليل الهوية) --- */
  --qr-green:        #394D27;  /* Umayyad Green — اللون الأساسي */
  --qr-gold:         #C4A053;  /* Dawn Gold — اللون المميز/الثانوي */
  --qr-lapis:        #225687;  /* Quranic Lapis — لون فرعي */
  --qr-ivory:        #CEC4A0;  /* Manuscript Ivory — لون فرعي */

  /* --- ألوان الأسطح والنص (مأخوذة من ملفات الهوية) --- */
  --qr-bg:           #F4EBE1;  /* خلفية الصفحات الفاتحة */
  --qr-bg-alt:       #EDE4D8;  /* خلفية البطاقات/الأقسام */
  --qr-ink:          #110C02;  /* النص الأساسي / الخلفية الداكنة */
  --qr-ink-soft:     #4A4336;  /* نص ثانوي */
  --qr-line:         rgba(57, 77, 39, .18);

  /* --- تدرجات مشتقة (للحالات والتفاعل) --- */
  --qr-green-900:    #223016;
  --qr-green-700:    #2E4020;
  --qr-green-500:    #394D27;
  --qr-green-300:    #7C8F69;
  --qr-green-100:    #D9E0CF;
  --qr-gold-700:     #A07F35;
  --qr-gold-500:     #C4A053;
  --qr-gold-300:     #DCC287;
  --qr-gold-100:     #F1E5C9;

  /* --- الدلالات (Semantic) --- */
  --color-primary:        var(--qr-green);
  --color-primary-contrast: var(--qr-bg);
  --color-accent:         var(--qr-gold);
  --color-surface:        var(--qr-bg);
  --color-surface-2:      var(--qr-bg-alt);
  --color-text:           var(--qr-ink);
  --color-text-muted:     var(--qr-ink-soft);
  --color-border:         var(--qr-line);
  --color-on-dark:        #F4EBE1;

  /* --- الخطوط --- */
  --font-display: "TheYearofTheCamel", "Alibaba Sans", "Tajawal", system-ui, sans-serif; /* عام الإبل — للعناوين */
  --font-body:    "IBM Plex Sans Arabic", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
  --font-latin:   "Poppins", "Inter", system-ui, sans-serif;
  --font-quran:   "KFGQPC Uthman Taha", "Amiri Quran", serif; /* لعرض آيات المصحف فقط */
  --font-script:  "BShekari", cursive;  /* التوقيع/الشعار الخطي — يُفضّل استخدامه كـ SVG */

  /* --- مقياس الحجم (Type scale — RTL friendly) --- */
  --step--1: clamp(.82rem, .78rem + .2vw, .92rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + .9vw, 2.125rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
  --leading-tight: 1.25;
  --leading-body:  1.9;   /* العربية تحتاج تباعد أسطر أعلى */

  /* --- المسافات (مقياس 4px) --- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;   --space-12: 3rem;  --space-16: 4rem;
  --space-24: 6rem;  --space-32: 8rem;

  /* --- الحواف والظلال --- */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17,12,2,.06);
  --shadow-md: 0 8px 24px rgba(17,12,2,.10);
  --shadow-lg: 0 24px 60px rgba(17,12,2,.16);

  /* --- التخطيط --- */
  --container: 1200px;
  --container-wide: 1440px;
  --qr-header-tier1-h: 80px;  /* الشريط الرئيسي (الشعار + التنقّل) */
  --qr-header-sub-h:   46px;  /* الشريط الفرعي (أيقونة الرئيسية + روابط سريعة + أدوات) */
  --header-h: calc(var(--qr-header-tier1-h) + var(--qr-header-sub-h));  /* ارتفاع الهيدر الكلّي = 128px */
  --player-h: 76px;   /* شريط المشغّل الثابت أسفل الشاشة */
}

/* الوضع الداكن (يستخدم لصفحات البث والمشغّل) */
[data-theme="dark"] {
  --color-surface:   #110C02;
  --color-surface-2: #1C1710;
  --color-text:      #F4EBE1;
  --color-text-muted: #C9BFAE;
  --color-border:    rgba(244,235,225,.14);
  --color-primary:   #7C8F69;
  --color-primary-contrast: #110C02;
}

/* أساسيات RTL */
html[dir="rtl"] body { font-family: var(--font-body); line-height: var(--leading-body); }
h1,h2,h3,.display { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: 0; }
:lang(en) { font-family: var(--font-latin); }

/* ============================================================
   الإضافات — استكمال ما ينقص لبناء الموقع
   (لا تغيير على أي قيمة أعلاه؛ كل ما يلي جديد بالكامل)
   المرجع: design-system.md و components.md
   ============================================================ */

:root {
  /* --- الحركة (Motion) — design-system.md §6 --- */
  --motion-fast:     120ms;  /* تغيّر حالة صغير: هوفر أيقونة، تبديل شارة */
  --motion-base:     200ms;  /* الانتقال القياسي: هوفر بطاقة/زر، فتح قائمة */
  --motion-slow:     320ms;  /* حركة أكبر مساحة: المشغّل الموسّع، الطبقات الحوارية */
  --easing-standard: cubic-bezier(.4, 0, .2, 1);

  /* --- طبقات التراكب (Z-index scale) --- */
  --z-header:   40;  /* qr-header الثابت */
  --z-player:   50;  /* qr-player الثابت أسفل الشاشة — أعلى من الهيدر دائمًا */
  --z-dropdown: 60;  /* قوائم منسدلة، اللوحة الجوالة qr-header__mobile-panel */
  --z-modal:    100; /* نوافذ الحوار، أوراق qr-player--expanded / qr-prayer-bar--expanded */
  --z-toast:    110; /* تنبيهات عابرة فوق كل شيء */

  /* --- ارتفاعات إضافية للجوال (لا تُستبدل بها المتغيرات العامة) --- */
  --header-h-mobile: 56px;

  /* --- طبقة مشتركة: الزجاج — لكل سطح يطفو فوق محتوى متحرّك ---
     backdrop-filter وحده لا يصنع زجاجًا؛ يلزم ثلاثة معًا: تمويه يمسح تفاصيل ما خلفه،
     وتشبّع يعوّض الشحوب الذي يخلّفه التمويه، وصبغة (tint) شبه شفافة فوقه. الصبغة
     وحدها هي ما يحمي تباين النص — التمويه أداة بصرية لا أداة تباين — لذا تبقى قيمة
     التمويه واحدة عبر الموقع بينما تُحسب نسبة الصبغة لكل مكوّن حسب لون نصه.

     9px قيمة مقصودة لا افتراضية: أعلى منها يصير السطح لبنًا معتمًا فيضيع معنى الزجاج
     أصلًا، وأدنى منها تظهر حواف المحتوى المارّ خلفه فتشوّش قراءة النص فوقه.

     حدّ الأداء: backdrop-filter يُعاد حسابه مع كل إطار تمرير لكل عنصر يحمله. لذلك
     الأسطح الكبيرة العائمة (هيدر/مشغّل/شريط مواقيت/لوحة الجوال) لا يجتمع منها أكثر
     من ثلاثة في الشاشة الواحدة، والشارات الصغيرة تأخذ --qr-glass-blur-sm لأن ما
     خلفها صورة ساكنة لا محتوى يمرّ. */
  --qr-glass-blur:      9px;
  --qr-glass-blur-sm:   5px;
  --qr-glass-saturate:  1.35;
  /* خيط ذهبي رفيع يفصل السطح الزجاجي عمّا تحته — الذهبي كحدّ ضمن حصة الـ10% في
     قاعدة 60/30/10، لا كمساحة (brand-guidelines.md §7). محصور في الهيدر وحده حتى
     لا تتراكم لمسات ذهبية على كل سطح عائم في الشاشة نفسها. */
  --qr-glass-hairline:  color-mix(in srgb, var(--qr-gold) 32%, transparent);

  /* --- طبقة Component: الهيدر — components.md §1 ---
     الهيدر لاصق والمحتوى يمرّ تحته، فسطحه زجاجي (backdrop-filter) لا صلبًا: التمويه
     يكشف حركة المحتوى خلف الشريط، فهو أداة توضيح لا زخرفة — design-system.md §6.
     نسبتا تعتيم مختلفتان، وكلتاهما محسوبة لا مقدَّرة:
     - أعلى الصفحة 58%: ما خلف الهيدر هو أرضية --color-surface نفسها، فلا فرق بصري
       ولا خطر على التباين؛ النسبة موجودة لتبدأ من سطح شبه شفاف فور أول بكسل تمرير.
     - بعد التمرير 80%: الحد الأدنى الذي يُبقي الرابط النشط (--color-primary، وزن 600)
       فوق 4.5:1 حين يمرّ قسم داكن كـ"آية اليوم" تحت الهيدر — عند 72% ينزل إلى 4.17:1
       ويسقط المعيار. لا تُخفَّض هذه القيمة. */
  --qr-header-bg:            var(--color-surface);
  --qr-header-bg-scrolled:   var(--color-surface);
  --qr-header-shadow:        var(--shadow-sm);
  --qr-header-tint:          58%;
  /* اللوحة الجوالة تغطي الشاشة كاملة فوق محتوى عشوائي لا يمكن حساب تباينه مسبقًا،
     لذا 90%: زجاج محسوس عند الحواف وحدها، والقراءة مضمونة في كل الحالات. */
  --qr-header-panel-tint:    90%;
  --qr-header-tint-scrolled: 80%;
  --qr-header-blur:          var(--qr-glass-blur);
  /* يظهر عند التمرير فقط — انظر --qr-glass-hairline أعلاه. */
  --qr-header-hairline:      var(--qr-glass-hairline);

  /* التخطيط ذو الشريطين (التصميم الجديد): الشريط الرئيسي سطح أخضر زجاجي، والفرعي
     سطح عاجي زجاجي فاتح. عند التمرير يغمق الاثنان إلى أخضر شبه صلب.
     - الرئيسي 80%: كثيف كفايةً ليبقى نصّ العاجي (وزن 600) فوق 4.5:1 فوق أي خلفية
       تمرّ تحته، بما فيها أفتح بقع صورة البطل السينمائي. عند التمرير 94% ≈ صلب.
     - الفرعي 78%: يقرأ كشريط فاتح مميَّز عن الأخضر فوقه، ونصّه حبر داكن. */
  --qr-header-main-tint:          80%;
  --qr-header-main-tint-scrolled: 94%;
  --qr-header-sub-tint:           78%;
  --qr-header-sub-tint-scrolled:  90%;

  /* الانحناء: الشريط الفرعي لا يبدأ من حافة النافذة، بل يُزاح بعرض عمود أخضر
     محجوز للشعار، وحافته العلوية من جهة البداية مقوَّسة — فيسيل الأخضر من كتلة
     الشعار نزولًا حول القوس بدل حدّ أفقي قاطع. القيمة 232px = حشو الحاوية (24)
     + عرض اللوكاب عند ارتفاع 40px (~184) + متنفَّس (24). */
  /* الدمج بين القسمين: الشريط الفرعي يبدأ بعد عمود الشعار من جهة البداية (اليمين)،
     وزاويته العليا هناك مقوَّسة بمقدار يقارب ارتفاعه — فيسيل الأخضر من كتلة الشعار
     حول القوس ويصير القسمان صورة واحدة. logo-col = 24 حشوة الحاوية + 124 عرض
     اللوكاب + 28 فسحة. */
  --qr-header-logo-col:  152px;
  --qr-header-curve:      44px;

  /* --- طبقة Component: المشغّل الثابت — components.md §2 --- */
  --qr-player-bg:      var(--qr-ink);   /* داكن دائمًا بصرف النظر عن ثيم الصفحة */
  --qr-player-text:    var(--color-on-dark);
  --qr-player-text-muted: var(--qr-ivory);
  --qr-player-accent:  var(--qr-gold);
  --qr-player-shadow:  var(--shadow-lg);
  /* 80%: أسوأ حالة هي مرور قسم فاتح (--color-surface) تحت المشغّل، فيصير السطح
     الفعلي ‎#3E3A2F‎ تقريبًا — النص العاجي عليه 9.1:1 والنص الثانوي (--qr-ivory)
     6.2:1، وكلاهما فوق 4.5:1 بهامش مريح. */
  --qr-player-tint:    80%;

  /* --- طبقة Component: البطاقات (برنامج/تلاوة/قارئ/خبر) — components.md §3–5،7 --- */
  --qr-card-bg:            var(--color-surface-2);
  --qr-card-border:        var(--color-border);
  --qr-card-radius:        var(--radius-lg);
  --qr-card-radius-sm:     var(--radius-md);
  --qr-card-shadow:        var(--shadow-sm);
  --qr-card-shadow-hover:  var(--shadow-md);
  --qr-card-badge-bg:      var(--qr-gold);
  --qr-card-badge-text:    var(--qr-ink);
  /* شارة داكنة فوق صورة: 68% تصمد حتى فوق صورة بيضاء تمامًا (النص العاجي 5.8:1). */
  --qr-card-badge-tint:    68%;
  /* قرص فاتح فوق صورة: 86% وليس أقل — نص اللازورد --qr-lapis صغير (--step--1)
     فيلزمه 4.5:1، وفوق صورة سوداء تمامًا تعطي 86% نسبة 4.7:1 بينما 84% تنزل
     إلى 4.48:1 وتسقط المعيار. لا تُخفَّض. */
  --qr-card-chip-tint:     86%;
  --qr-card-category-text: var(--qr-lapis);

  /* --- طبقة Component: الأزرار (مشترك بين المكوّنات) --- */
  --qr-btn-radius:      var(--radius-pill);
  --qr-btn-bg:          var(--color-primary);
  --qr-btn-text:        var(--color-primary-contrast);
  --qr-btn-bg-hover:    var(--qr-gold);
  --qr-btn-text-hover:  var(--qr-ink);

  /* --- طبقة Component: شريط مواقيت الصلاة — components.md §6 --- */
  /* الشريط يطفو فوق قسم البطل بهامش علوي سالب، وخلفه نمط النجوم المبلَّط — فالزجاج
     هنا مبرَّر وظيفيًا لا زخرفيًا. 72% أدنى نسبة يبقى معها النمط محسوسًا خلف السطح،
     والنص حبر داكن على أرضية فاتحة فالتباين يفوق 15:1 في كل الأحوال. */
  --qr-prayer-tint:        72%;
  --qr-prayer-active-bg:   var(--qr-gold-100);
  --qr-prayer-active-text: var(--qr-green-700);
  --qr-prayer-muted-text:  var(--color-text-muted);

  /* --- طبقة Component: آية اليوم — components.md §8 --- */
  --qr-ayah-bg:   var(--qr-ink);
  --qr-ayah-text: var(--color-on-dark);
  --qr-ayah-ref:  var(--qr-gold);

  /* --- طبقة Component: قسم البطل — لوحة البث الحية ---
     وحدة التحكّم زجاجية فوق صورة الاستوديو. 72% وليس أقل: أسوأ حالة هي وقوعها فوق
     أفتح بقعة في الصورة، وعندها يعطي هذا السطح 4.6:1 لاسم القارئ (--qr-ivory)
     و6.8:1 للنص العاجي — وعند 62% ينزل اسم القارئ إلى 3.2:1 ويسقط المعيار. */
  --qr-hero-console-tint: 72%;

  /* --- طبقة Component: الفوتر — components.md §9 --- */
  --qr-footer-bg:   var(--qr-ink);
  --qr-footer-text: var(--color-on-dark);
  --qr-footer-link-hover: var(--qr-gold);

  /* --- طبقة Component: متن المقال — qr-entry --- */
  /* عرض السطر محصور بـ 68 محرفاً: أطول من ذلك تتعب العين في تتبّع
     بداية السطر التالي، والعربية أشدّ تأثّراً لطول حروفها الممدودة. */
  --qr-entry-measure:     68ch;
  --qr-entry-text:        var(--color-text);
  --qr-entry-link:        var(--color-primary);
  --qr-entry-quote-mark:  var(--color-accent);
  --qr-entry-quote-bg:    var(--color-surface-2);

  /* --- طبقة Component: الشريط الجانبي — qr-aside --- */
  --qr-aside-width:   320px;
  --qr-aside-bg:      var(--color-surface-2);
  --qr-aside-border:  var(--color-border);
  --qr-aside-radius:  var(--radius-lg);

  /* --- طبقة Component: أزرار المشاركة — qr-share --- */
  --qr-share-bg:        var(--color-surface-2);
  --qr-share-text:      var(--color-text-muted);
  --qr-share-bg-hover:  var(--color-primary);
  --qr-share-text-hover: var(--color-primary-contrast);

  /* --- طبقة Component: الترقيم — qr-pagination --- */
  --qr-pagination-text:         var(--color-text);
  --qr-pagination-border:       var(--color-border);
  --qr-pagination-current-bg:   var(--color-primary);
  --qr-pagination-current-text: var(--color-primary-contrast);

  /* --- طبقة Component: فتات الخبز والفلاتر --- */
  --qr-breadcrumb-text:    var(--color-text-muted);
  --qr-breadcrumb-current: var(--color-text);
  --qr-filter-bg:          var(--color-surface);
  --qr-filter-text:        var(--color-text);
  --qr-filter-border:      var(--color-border);
  --qr-filter-active-bg:   var(--color-primary);
  --qr-filter-active-text: var(--color-primary-contrast);

  /* --- طبقة Component: ترويسة الصفحة — qr-page-head --- */
  --qr-page-head-bg:   var(--color-surface-2);
  --qr-page-head-text: var(--color-text);

  /* --- طبقة Component: الحالة الفارغة — qr-empty --- */
  /* قسم بلا محتوى يجب أن يقول ذلك، لا أن يترك فراغاً يبدو عطلاً.
     نبرة هادئة: أرضية ثانوية وحدّ خفيف، بلا لون تحذير. */
  --qr-empty-bg:     var(--color-surface-2);
  --qr-empty-text:   var(--color-text-muted);
  --qr-empty-border: var(--color-border);
  --qr-empty-radius: var(--radius-lg);

  /* --- الأنماط الزخرفية — design-system.md §7 --- */
  --qr-pattern-color:         var(--color-border);
  --qr-pattern-color-on-dark: var(--qr-gold);
  --qr-pattern-opacity:       .08;   /* المدى المسموح: .06 إلى .10 */
}

/* الوضع الداكن — تمديد الإضافات لتتبع نفس منطق [data-theme="dark"] الأصلي */
[data-theme="dark"] {
  --qr-card-bg: var(--color-surface-2);
  --qr-pattern-color: var(--qr-gold);
}

/* احترام تفضيل تقليل الحركة — design-system.md §6.2 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}