/* ============================================================
   اتقان AI — لوحة الهوية: المصدر الوحيد لقيم الألوان
   (مواصفة docs/superpowers/specs/2026-08-10-brand-palette-design.md)

   🔴 هذا الملف يُربَط في layout.tsx **بعد** public/original/itqan1.css و itqan2.css.
   الورقتان ملتقطتان من الموقع المنشور وتعرّفان نظام Material كاملًا، وتُحمَّلان بعد
   أنماطنا فتغلبانها. فلو كُتبت القيم في @theme وحدها لظهرت في المحرّر ولم تظهر في
   المتصفح. الترتيب هنا هو ما يجعلها تسري.

   🔴 والأسماء مغلوطة عمدًا: `yellow` يحمل اليوم قيمة **خضراء**. الاسم مستعمل في ١١٤
   صنفًا في الشاشات وفي landing-body.html الملتقط، وإعادة تسميته تعني تعديل كل موضع
   بخطر ارتداد بلا عائد. فالاسم يبقى والقيمة تتغيّر. لا «تُصلح» هذا ظنًّا أنه خطأ.
   ============================================================ */

:root {
  /* الخط: يُعاد هنا لأن itqan1.css نسخة أقدم تعرّف --font-sans بلا البديل المضبوط */
  --font-sans: Tajawal, "Tajawal Fallback", system-ui, sans-serif;

  /* ── الهوية: أخضر سعودي عميق ───────────────────────────── */
  --color-itqan-yellow: #046c4e;
  --color-shahed-yellow: #046c4e;
  --color-itqan-yellow-soft: #047857;
  --color-itqan-brand: #046c4e;
  --color-itqan-brand-soft: #047857;
  --color-itqan-brand-deep: #033d2c;
  --color-itqan-on-brand: #ffffff;

  /* ── الانتباه: ذهبي. وارث دور الأصفر في اللافتات والشارات ── */
  --color-itqan-accent: #a67c00;
  --color-itqan-accent-soft: #f7ecd2;
  --color-itqan-accent-ink: #6b4f00;
  /* سطحٌ ذهبيّ يُكتب عليه بالأبيض: #a67c00 يعطي 3.82 وهو دون AA، وهذا يعطي 5.17 */
  --color-itqan-accent-deep: #8a6700;
  /* 🔴 ذهبيّ فاتح: **لون العلامة حين تكون نصًّا فوق سطح داكن**، لا زخرفة.
     الأصفر القديم كان ساطعًا فصلح للأمرين: سطحًا يُكتب عليه بالأسود، ونصًّا يُكتب على
     الأسود. والأخضر العميق يصلح للأول وحده — وضع نصًّا على الفحمي يعطي تباين 1.43 وعلى
     الأسود 2.67، وكلاهما غير مقروء. هذا الرمز يرث الدور الثاني: 10.1 على الحبر و5.45
     على الفحمي. */
  --color-itqan-gold-light: #e8c46a;

  /* ── النجاح: أخضر أفتح من الهوية فلا تلتبس الحالة بالعلامة ── */
  --color-itqan-forest: #116434;
  --color-shahed-forest: #116434;
  --color-itqan-mint: #bbf7d0;
  --color-shahed-mint: #bbf7d0;
  --color-itqan-success: #116434;
  --color-itqan-success-soft: #bbf7d0;

  /* ── الحبر والحدود والأوراق ────────────────────────────── */
  --color-itqan-black: #0b1f17;
  --color-shahed-black: #0b1f17;
  --color-itqan-ink: #0b1f17;
  --color-itqan-charcoal: #3f4a45;
  --color-shahed-charcoal: #3f4a45;
  --color-itqan-slate: #4b5a53;
  --color-itqan-cream: #f7fbf8;
  --color-shahed-cream: #f7fbf8;
  --color-itqan-paper: #f6faf8;
  --color-itqan-fog: #d7e6dd;
  --color-shahed-fog: #d7e6dd;
  --color-itqan-line: #dde8e2;

  /* ── أسطح النظام: خضراء الميل بدل الرمادي المزرقّ ───────── */
  --color-surface: #f6faf8;
  --color-background: #f6faf8;
  --color-surface-low: #eff5f2;
  --color-surface-container-low: #eff5f2;
  --color-surface-container: #e8efeb;
  --color-surface-high: #e0e9e4;
  --color-surface-container-high: #e0e9e4;
  --color-surface-highest: #d8e2dc;
  --color-surface-container-highest: #d8e2dc;
  --color-surface-variant: #d8e2dc;
  --color-on-surface: #0f1f19;
  --color-on-background: #0f1f19;
  --color-on-surface-variant: #3f4d46;
  --color-outline: #6b7a73;
  --color-outline-variant: #dde8e2;
  --color-inverse-surface: #163025;
  --color-inverse-on-surface: #eaf3ee;

  /* ── مرادفات Material في الورقة الملتقطة ────────────────── */
  --color-primary: #0b1f17;
  --color-primary-container: #046c4e;
  /* 🔴 هذا الرمز وحده يصحّح ٣٩ زرًّا: `bg-primary-container text-on-primary` هو نمط
     الزر الرئيس في المشروع، وقيمته في الورقة الملتقطة `#000` لأن الحاوية كانت صفراء
     فاتحة. تركُه أسودَ يعطي تباين 3.26 على الأخضر، وهو دون WCAG AA. */
  --color-on-primary: #ffffff;
  /* 🔴 النص فوق حاوية العلامة كان أسود لأن الحاوية كانت صفراء فاتحة.
     صارت خضراء داكنة، فالنص أبيض وإلا لم يُقرأ. */
  --color-on-primary-container: #ffffff;
  --color-surface-tint: #046c4e;
  --color-primary-fixed: #d9efe5;
  --color-primary-fixed-dim: #047857;
  --color-on-primary-fixed-variant: #06301f;
  --color-secondary: #116434;
  --color-secondary-container: #bbf7d0;
  --color-on-secondary-container: #14532d;

  /* ── لوحة تيلويند الخام: الأصفر والكهرماني يرثهما الذهبي ──
     لولا ذلك بقيت شارات مثل «لها API رسمية» صفراء على واجهة خضراء. */
  --color-yellow-50: #fdf9ef;
  --color-yellow-100: #f7ecd2;
  --color-yellow-200: #eeddb4;
  --color-yellow-400: #c99b16;
  --color-yellow-500: #a67c00;
  --color-yellow-700: #6b4f00;
  --color-yellow-800: #6b4f00;
  --color-yellow-900: #5a4200;
  --color-amber-50: #fdf9ef;
  --color-amber-100: #f7ecd2;
  --color-amber-200: #eeddb4;
  --color-amber-300: #dcbc63;
  --color-amber-400: #c99b16;
  --color-amber-500: #a67c00;
  --color-amber-600: #8a6700;
  --color-amber-700: #6b4f00;
  --color-amber-800: #5a4200;
  --color-amber-900: #4a3600;
}

/* 🔴 ظلّ الزر الرئيس لونه مكتوب أصفرَ صراحةً في الورقتين الملتقطتين
   (`.cta-shadow{box-shadow:0 4px 12px #facc1559}`) ويُستعمل في ٣٦ موضعًا. لا يتبع رمزًا،
   فلا يتحرّك بتغيير اللوحة، ويبقى هالةً صفراء تحت كل زر أخضر.
   🔴 والمحدِّد `html .cta-shadow` لا `.cta-shadow` عمدًا: صفحة /ar تربط `landing.css`
   من داخل جسمها، أي **بعد** هذا الملف، فتغلبه لو تساوت الأوزان. */
html .cta-shadow {
  box-shadow: 0 4px 12px rgb(4 108 78 / 0.28);
}

/* 🔴 نصّ العلامة داخل قسم داكن في الصفحة الملتقطة يرث الذهبي الفاتح.
   الإصلاح هنا لا في الملف: `text-shahed-yellow` فيه ٤٢ موضعًا، أكثرها على أسطح فاتحة
   والأخضر العميق يصلح لها تمامًا. فاستبدالٌ شاملٌ يكسر ستةً وعشرين موضعًا سليمًا ليصلح
   ستة عشر — وهو عين الخطأ الذي وقعتُ فيه مرة. المحدِّد النَّسَبي يميّز الحالتين بلا خطأ. */
html .bg-shahed-black .text-shahed-yellow,
html .bg-shahed-charcoal .text-shahed-yellow,
html .bg-shahed-black.text-shahed-yellow,
html .bg-shahed-charcoal.text-shahed-yellow {
  color: var(--color-itqan-gold-light);
}

/* وأختها: ظلّ البطاقات الناعم، أصفرُ الأصل كذلك */
html .soft-savor-shadow,
html .hover\:soft-savor-shadow:hover {
  box-shadow: 0 4px 20px rgb(4 108 78 / 0.08), 0 2px 8px rgb(0 0 0 / 0.04);
}

/* ============================================================
   🔴 إصلاح: شريط لوحة المالك كان مخفيًّا على كل المقاسات

   `itqan1.css` الملتقطة تعرّف `.hidden{display:none}` وتُحمَّل **بعد** حزمة
   تيلويند، فتغلب أي مقابلٍ لها فيها. ونجا شريط التاجر بالمصادفة وحدها: نمطه
   `hidden md:flex`، والورقة الملتقطة تحمل `.md\:flex` أيضًا (كان في الموقع
   الأصلي) بعد `.hidden` فيها. أما لوحة المالك فنمطها `hidden lg:block`،
   و`.lg\:block` **غير موجود** في الملتقطة ⇒ لا يردّ أحد `.hidden`.

   الأثر: مالك المنصة يفتح لوحته على شاشة عريضة فلا يرى شريطًا جانبيًّا
   إطلاقًا — الأقسام كلها خلف زرّ ☰ وحده. عيبٌ قديم لا علاقة له بتقسيم
   شاشات التاجر، كُشف حين قيس `display` من داخل المتصفح لا بالنظر.

   والعلاج هنا لا في المكوّن: هذه الورقة **آخر ما يُحمَّل** فتغلب الملتقطة،
   والمكوّن يبقى بأصنافه القياسية. وأي صنف استجابة جديد تعرّفه الملتقطة ولا
   تعرّف مقابله يحتاج سطرًا هنا.
   ============================================================ */
@media (min-width: 64rem) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}