/* =====================================================================
   عون — الرموز المميّزة (Design Tokens)
   المصدر الوحيد لكل قيمة بصرية في النظام.

   ✅ ألوان الهوية معتمدة (2026-07-29):
      أخضر  #279022  ·  أسود  #231f20  ·  أبيض  #ffffff

   القاعدة الملزمة: لا قيمة لونية خام (#hex أو rgb) خارج هذا الملف.
   السبب: لولا ذلك لتبعثرت الألوان في عشرات القواعد، فيصير أي تعديل على
   الهوية عمليةَ بحثٍ واستبدال تترك بقايا لا تُكتشف إلا بالصدفة.
   ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       1) الخطوط — سلسلة واحدة يحلّها المتصفح لكل محرف على حدة

       Inter لا يملك محارف عربية، فالعربية تسقط تلقائياً إلى Tajawal
       واللاتينية تبقى في Inter. سلسلة واحدة بلا :lang() ولا شرط.

       ولماذا Tajawal لا Cairo: مقاييسه الرأسية (x-height ونسب الصعود
       والنزول) أقرب إلى Inter، فيبدو الحجمان متساويين فعلاً لا رقمياً.
       --------------------------------------------------------------- */
    --font-sans: 'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* أرقام جدولية للمبالغ والجداول: تتساوى عرضاً فتصطف الخانات رأسياً.
       بدونها تهتزّ أعمدة الأرقام بصرياً وتصعب المقارنة بين الصفوف. */
    --font-numeric: 'Inter', 'Tajawal', system-ui, sans-serif;

    /* ---------------------------------------------------------------
       2) سلّم الخطوط — نسبي لا مطلق

       rem لا px: يحترم إعداد حجم الخط في المتصفح، فمن يكبّر الخط لضعف
       بصر يرى الواجهة كاملةً أكبر. px يتجاهل الإعداد ويكسر الوصولية.
       --------------------------------------------------------------- */
    --text-xs:   0.75rem;   /* 12px — الحد الأدنى المسموح. لا شيء تحته */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px — أساس النص */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.5rem;    /* 24px */
    --text-2xl:  2rem;      /* 32px */
    --text-3xl:  2.5rem;    /* 40px */

    /* ارتفاع السطر: 1.5–1.75 للنص الأساسي.
       العربية تحتاج الطرف الأعلى — التشكيل والنقاط تحت السطر تتزاحم دونه. */
    --leading-tight:  1.25;  /* العناوين الكبيرة فقط */
    --leading-normal: 1.6;   /* النص الأساسي */
    --leading-loose:  1.75;  /* الفقرات الطويلة */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* طول السطر الأمثل 65–75 محرفاً — أطول منه يُتعب تتبّع العين
       عند الانتقال لبداية السطر التالي. */
    --measure: 68ch;

    /* ---------------------------------------------------------------
       3) المسافات — سلّم ثابت لا أرقام عشوائية
       --------------------------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ---------------------------------------------------------------
       4) الألوان — هوية عون الأصول

       الأسماء **دلالية** (surface / text / border) لا وصفية (green-500).
       السبب: اسم دلالي يبقى صحيحاً بعد أي تعديل على القيمة، أما
       «--green-500» يصير كذباً صريحاً لحظة تحوّله إلى درجة أخرى.
       --------------------------------------------------------------- */

    /* ⭐ ألوان الهوية الخام — للمرجعية ولاستعمال الشعار والرسوم */
    --brand-green: #279022;
    --brand-black: #231f20;
    --brand-white: #ffffff;

    --color-surface:        #ffffff;
    --color-surface-raised: #f6f8f6;   /* أبيض بميل أخضر خفيف جداً */
    --color-surface-sunken: #ecefec;

    /* الأسود من الهوية لا أسود مطلق: #000 على الأبيض قاسٍ بصرياً،
       و#231f20 يعطي 16.3:1 وهو أعلى بكثير من المطلوب. */
    --color-text:           #231f20;   /* 16.30:1 على الأبيض ✅ */
    --color-text-muted:     #55595a;   /* ≈7:1 — يتجاوز 4.5:1 ✅ */
    --color-text-inverse:   #ffffff;

    --color-border:         #d8ddd8;
    --color-border-strong:  #aab3aa;

    /* ================================================================
       ⚠️ تدرّجان للأخضر — والسبب قياسي لا ذوقي

       الأخضر #279022 يعطي **4.12:1** على الأبيض، والمعيار يطلب 4.5:1
       للنص العادي. أي أن استعماله للنص والروابط **راسب في الوصولية**
       ولا يُقرأ جيداً لضعاف البصر وتحت ضوء الشمس على الجوال.

       الحل: تدرّجان من العائلة نفسها لا تغيير للهوية.
         --color-brand         للعناصر الكبيرة والرسوم (يكفيها 3:1)
         --color-brand-strong  للنص والروابط والأزرار (5.65:1) ✅

       بهذا تبقى الهوية كما اعتُمدت، ويبقى الموقع مقروءاً للجميع.
       ================================================================ */
    --color-brand:          #279022;   /* الهوية — 4.12:1، للعناوين الكبيرة والأيقونات والحدود */
    --color-brand-strong:   #1f771c;   /* 5.65:1 ✅ — النص والروابط وخلفية الأزرار */
    --color-brand-hover:    #1b6e19;   /* 6.38:1 — حالة التحويم */
    --color-brand-subtle:   #eaf4e9;   /* خلفية خفيفة للشارات والتنبيهات */
    --color-on-brand:       #ffffff;   /* 5.65:1 فوق brand-strong ✅ */

    /* لوح نداء الإجراء — رمز مستقل عن الزر عمداً.
       السبب: اللوح مساحة كبيرة والزر مساحة صغيرة، ولا يخضعان للقاعدة
       البصرية نفسها. في الوضع الداكن تحديداً، لون الزر الساطع ممتد على
       لوح كامل يُنتج وهجاً يُتعب العين — فيحتاج قيمة خاصة به. */
    --color-cta-surface:    #1f771c;   /* = brand-strong في الفاتح */
    --color-on-cta:         #ffffff;   /* 5.65:1 ✅ */

    /* ⚠️ نص زر CTA **لا ينقلب** مع الثيم — وهذا سبب وجوده كرمز مستقل.
       خلفية الزر بيضاء في الوضعين (فوق لوح أخضر)، فلو ورث الأخضر
       المُفتَّح الخاص بالوضع الداكن لصار أخضر فاتحاً على أبيض = 1.98:1،
       أي نص شبه غير مرئي. عطل مقيس في المتصفح لا افتراض. */
    --color-cta-btn-text:   #1b6e19;   /* 6.38:1 على الأبيض ✅ — ثابت في الوضعين */
    --color-cta-btn-hover:  #eaf4e9;   /* خلفية التحويم — ثابتة للسبب نفسه */

    /* ألوان الحالة: دلالتها ثابتة عالمياً فهي أقل ارتباطاً بالهوية،
       وتبقى قابلة للمعايرة معها. */
    --color-success: #1a7f47;
    --color-warning: #9a6700;
    --color-danger:  #b42318;
    --color-info:    #175cd3;

    --color-focus:   #175cd3;   /* حلقة التركيز — تُعاير مع الهوية */

    /* ---------------------------------------------------------------
       5) الحواف والظلال

       الظل يبقى مادّياً (يمين/يسار) عمداً: مصدر الضوء فيزيائي لا نصّي،
       فلا ينعكس مع اتجاه القراءة.
       --------------------------------------------------------------- */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

    /* ---------------------------------------------------------------
       6) الحركة — 150–300ms

       أقل من 150 يبدو قفزة لا انتقالاً، وأكثر من 300 يبدو بطئاً في
       واجهة تُستعمل عشرات المرات يومياً.
       --------------------------------------------------------------- */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------------------------------------------------------------
       7) التخطيط
       --------------------------------------------------------------- */
    --container-max: 75rem;   /* 1200px */
    --header-height: 4rem;

    /* الحد الأدنى لمساحة اللمس 44×44px — أصغر منه يُنتج ضغطات خاطئة
       على الجوال، وهو الجهاز الأول لا الثاني في هذا المشروع. */
    --touch-min: 2.75rem;
}

/* =====================================================================
   الوضع الداكن

   ⚠️ آليتان لا واحدة، والفصل بينهما ضروري:

   1) `@media (prefers-color-scheme: dark)` مقيَّدة بـ`:not([data-theme])`
      → تسري فقط حين **لم يختر** المستخدم شيئاً (وضع «تلقائي»).

   2) `:root[data-theme='dark']` → اختيار صريح، ويعلو على تفضيل النظام.

   لماذا `:not([data-theme])` لا `:not([data-theme='light'])`:
   الأولى تجعل غياب السمة هو **تعريف** الوضع التلقائي. الثانية كانت
   ستُبقي `data-theme='dark'` داخل نطاق الميديا أيضاً فيتكرر التعريف في
   موضعين — وموضعان لقاعدة واحدة يفترقان عند أول تعديل.
   ===================================================================== */

/* الكتلة المشتركة معرَّفة مرة واحدة ومُستدعاة من الحالتين، فلا تنحرف
   قيمة بين «تلقائي داكن» و«داكن صريح». */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --color-surface:        #161816;
        --color-surface-raised: #1f231f;
        --color-surface-sunken: #101210;
        --color-text:           #f2f4f2;
        --color-text-muted:     #a4ada4;
        --color-border:         #2f342f;
        --color-border-strong:  #475047;
        --color-brand:          #3fb536;
        --color-brand-strong:   #4ec244;
        --color-brand-hover:    #5bd050;
        --color-brand-subtle:   #1a2a19;
        --color-on-brand:       #161816;
        --color-cta-surface:    #123a15;
        --color-on-cta:         #f2f4f2;
        --color-success: #4ade80;
        --color-warning: #fbbf24;
        --color-danger:  #f87171;
        --color-info:    #60a5fa;
        --color-focus:   #60a5fa;
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
        --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --color-surface:        #161816;
    --color-surface-raised: #1f231f;
    --color-surface-sunken: #101210;
    --color-text:           #f2f4f2;
    --color-text-muted:     #a4ada4;
    --color-border:         #2f342f;
    --color-border-strong:  #475047;

    /* ⚠️ ينعكس الاتجاه في الوضع الداكن: الأخضر الأصلي يعطي 4.50:1 على
       الخلفية الداكنة — على الحافة تماماً. لذلك **يُفتَّح لا يُغمَّق**. */
    --color-brand:          #3fb536;   /* 6.95:1 ✅ */
    --color-brand-strong:   #4ec244;   /* 8.06:1 ✅ */
    --color-brand-hover:    #5bd050;   /* 9.35:1 */
    --color-brand-subtle:   #1a2a19;
    --color-on-brand:       #161816;

    /* أخضر عميق لا ساطع: الساطع ممتداً على لوح كامل يُنتج وهجاً
       يُتعب العين ويُفقد اللوح وقاره. */
    --color-cta-surface:    #123a15;
    --color-on-cta:         #f2f4f2;   /* 11.57:1 ✅ */

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger:  #f87171;
    --color-info:    #60a5fa;
    --color-focus:   #60a5fa;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* الوضع الفاتح الصريح: `color-scheme` وحدها تكفي — القيم الافتراضية في
   `:root` فاتحة أصلاً، فإعادة تعريفها تكرار يفترق عند أول تعديل. */
:root[data-theme='light'] { color-scheme: light; }