/* ==========================================================================
   ra-brand.css — طبقة تجاوز الهوية
   المصدر: شعار مطار الملك خالد الدولي الرسمي (SVG) من شبكة Sitecore،
           وصفحات kkia.sa و riyadhairports.com
   تاريخ الاستخراج: 2026-08-27
   --------------------------------------------------------------------------
   تُحمَّل بعد ra-ds.css وقبل shared.css. لا تفعل شيئاً سوى إعادة تعريف
   متغيّرات العلامة والتمييز. ممنوع تعديل ra-ds.css نفسه.
   --ra-viz-1..6 غير ملموسة — ترتيبها متحقَّق منه لعمى الألوان.
   --------------------------------------------------------------------------
   الألوان المستخرجة حرفياً من الشعار:
     #005A54  المثلث الداكن   → لون العلامة الأساسي
     #3CBFB9  المثلث الفاتح   → لون التمييز
     #4C4E51  الكتلة النصية   → المحايد الداكن

   تعديلات التباين (قبل ← بعد):
     • #3CBFB9 على الأبيض = 2.25:1 — راسب في AA للنص (المطلوب 4.5:1).
       → لا يُستخدم للنص في الوضع الفاتح. وُلّد منه --ra-accent-700 = #1f827d
         بتباين 4.62:1 ✓، ويبقى #3CBFB9 للعناصر الكبيرة والشعار فقط.
     • #005A54 على الأبيض = 8.11:1 ✓ AAA — يُستخدم كما هو للنص والأزرار.
     • #005A54 على خلفية داكنة (#16181B) = 1.14:1 — راسب تماماً.
       → في الوضع الداكن يُقلب الدور: العلامة تصبح #3CBFB9 بتباين 7.92:1 ✓.
     • #4C4E51 على الأبيض = 8.38:1 ✓ — يُستخدم للنص الثانوي.
   ========================================================================== */

:root {
  /* --- العلامة: مستخرجة من fill="#005A54" في الشعار --- */
  --ra-brand-50:  #e6f2f1;   /* مشتق: #005a54 بإضاءة 93% — للخلفيات الناعمة فقط */
  --ra-brand-100: #c2e0dd;   /* مشتق */
  --ra-brand-300: #5fb3ad;   /* مشتق — عناصر كبيرة فقط، 2.7:1 */
  --ra-brand-500: #00807a;   /* مشتق — 5.31:1 على الأبيض ✓ AA */
  --ra-brand-600: #006e68;   /* مشتق — 6.55:1 على الأبيض ✓ AA */
  --ra-brand-700: #005a54;   /* ★ مستخرج حرفياً — 8.11:1 ✓ AAA */
  --ra-brand-800: #00443f;   /* مشتق — 10.6:1 ✓ AAA */

  /* --- التمييز: مستخرج من fill="#3CBFB9" في الشعار --- */
  --ra-accent-100: #d8f3f2;  /* مشتق */
  --ra-accent-300: #7fd6d2;  /* مشتق — للوضع الداكن */
  --ra-accent-500: #3cbfb9;  /* ★ مستخرج حرفياً — 2.25:1 ✗ للنص الفاتح.
                                يُسمح به فقط: خلفيات، حدود، عناصر ≥24px، الشعار */
  --ra-accent-600: #2ba49e;  /* مشتق — 3.12:1، عناصر كبيرة (AA Large) ✓ */
  --ra-accent-700: #1f827d;  /* ★ بديل التباين — 4.62:1 ✓ AA — هذا ما يُستخدم للنص */

  /* --- المحايد الداكن: مستخرج من fill="#4C4E51" في نص الشعار --- */
  --ra-neutral-600: #4c4e51; /* ★ مستخرج حرفياً — 8.38:1 ✓ AAA */

  /* --- الربط الدلالي: الوضع الفاتح --- */
  --ra-brand:      var(--ra-brand-700);
  --ra-brand-hov:  var(--ra-brand-800);
  --ra-brand-soft: var(--ra-brand-50);
  --ra-on-brand:   #ffffff;              /* 8.11:1 فوق --ra-brand ✓ */

  --ra-accent:      var(--ra-accent-700); /* النسخة الآمنة للنص، لا #3cbfb9 */
  --ra-accent-soft: var(--ra-accent-100);
  --ra-on-accent:   #ffffff;              /* 4.62:1 فوق accent-700 ✓ */

  --ra-focus: var(--ra-accent-700);

  /* --- الخطوط المقترحة (فجوة موثّقة في brand.json) --- */
  --ra-font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --ra-font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* --- لون الشعار الخام: للاستخدام في SVG المضمّنة فقط --- */
  --ra-logo-mark-light: #3cbfb9;
  --ra-logo-mark-dark:  #005a54;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* قلب الأدوار: #005a54 يرسب على الخلفية الداكنة (1.14:1)،
       فيتقدّم #3cbfb9 ليكون لون العلامة بتباين 7.92:1 ✓ AAA */
    --ra-brand:      var(--ra-accent-500);
    --ra-brand-hov:  var(--ra-accent-300);
    --ra-brand-soft: #0d2b2a;   /* مشتق من #005a54 بإضاءة 11% */
    --ra-on-brand:   #0d0f11;   /* 7.92:1 فوق #3cbfb9 ✓ */

    --ra-accent:      var(--ra-accent-300);
    --ra-accent-soft: #0d2b2a;
    --ra-on-accent:   #0d0f11;

    --ra-focus: var(--ra-accent-300);

    --ra-logo-mark-light: #3cbfb9;
    --ra-logo-mark-dark:  #7fd6d2; /* المثلث الداكن يُفتَّح ليبقى مرئياً على الأسود */
  }
}