/*
 * ============================================================================
 *  brand/colors.css  -  ألوان هوية EngEgypt (رموز CSS للفاتح والغامق)
 *  EN: EngEgypt brand colour tokens (CSS custom properties, light + dark)
 * ----------------------------------------------------------------------------
 *  الأساس ثلاثة ألوان بقرار المالك: الأحمر الأصلي #E60000 + الأسود + الأبيض،
 *  ومعها سلّم رمادي محايد وألوان دلالية. لا ذهب ولا لون رابع في الشعار.
 *  EN: Owner's decision: the original red #E60000 + black + white as the base,
 *      plus a neutral grey scale and semantic colours. No gold, no fourth colour in the logo.
 *  المصدر الوحيد للألوان: كل صفحة تحمّل هذا الملف وتستعمل الرموز (--eg-*) لا الأرقام.
 *  EN: Single source of truth: load this file and use the --eg-* tokens, never raw hex.
 * ============================================================================
 */

:root {
    /* ---- 1) الأحمر - Brand Red (الأصلي) ---- */
    --eg-red:        #E60000;   /* اللون الرئيسي - primary (original EngEgypt red) */
    --eg-red-deep:   #B80000;   /* تمرير/ضغط - hover & pressed */
    --eg-red-soft:   #FF3B3B;   /* على الخلفيات الداكنة - on dark surfaces */
    --eg-red-tint:   #FDE8E8;   /* خلفية خفيفة للشارة أو التنبيه - light tint */

    /* ---- 2) الأسود - Black ---- */
    --eg-black:      #000000;   /* الأسود النقي: الشعار والعناوين الكبيرة - pure black: logo, display */
    --eg-ink:        #111111;   /* رأس وتذييل وغلاف - header, footer, hero (the site's dark-black) */
    --eg-charcoal:   #1E1E1E;   /* سطح داكن ثانٍ - secondary dark surface */
    --eg-graphite:   #2E2E2E;   /* حدود وأسطح مرتفعة على الداكن - borders/raised on dark */

    /* ---- 3) الأبيض والرمادي - White & greys ---- */
    --eg-white:      #FFFFFF;
    --eg-grey-50:    #F7F7F7;   /* سطح فاتح ثانٍ - secondary light surface */
    --eg-grey-100:   #F0F0F0;   /* خلفية الأقسام الفاتحة - light section background */
    --eg-grey-200:   #DDDDDD;   /* حدود وفواصل - borders, dividers */
    --eg-grey-400:   #9A9A9A;   /* أيقونات معطّلة ونص مساعد - disabled, placeholders */
    --eg-grey-600:   #5F5F5F;   /* نص ثانوي على الفاتح (7:1) - muted text on light */
    --eg-grey-300d:  #B5B5B5;   /* نص ثانوي على الداكن - muted text on dark */
    --eg-text:       #1A1A1A;   /* نص الجسم على الفاتح - body text on light */

    /* ---- 4) الدلالية - Semantic (ثابتة في المظهرين) ---- */
    --eg-success:    #1E8E3E;
    --eg-warning:    #E08A00;
    --eg-danger:     #C62828;   /* خطأ: درجة قرمزية مختلفة عن أحمر الهوية - error, not the brand red */
    --eg-info:       #1565C0;
    --eg-whatsapp:   #25D366;
    --eg-whatsapp-deep: #128C7E;

    /* ---- 5) الأدوار - Role tokens (الفاتح افتراضياً) ---- */
    --eg-bg:            var(--eg-white);
    --eg-surface:       var(--eg-white);
    --eg-surface-2:     var(--eg-grey-100);
    --eg-text-muted:    var(--eg-grey-600);
    --eg-border:        var(--eg-grey-200);
    --eg-primary:       var(--eg-red);
    --eg-primary-hover: var(--eg-red-deep);
    --eg-on-primary:    var(--eg-white);
    --eg-link:          var(--eg-red-deep);
    --eg-link-hover:    var(--eg-red);
    --eg-focus:         var(--eg-red);
    --eg-header-bg:     var(--eg-ink);
    --eg-header-text:   var(--eg-white);

    /* ---- 6) الخطوط والظلال - Type & elevation ---- */
    --eg-font-logo:   'Audiowide', 'Russo One', Arial, sans-serif;   /* اسم الشركة في الشعار فقط - wordmark only */
    --eg-font-latin:  'Outfit', 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
    --eg-font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
    --eg-font-mono:   'JetBrains Mono', Consolas, monospace;
    --eg-radius:      10px;
    --eg-shadow-1:    0 2px 8px rgba(0, 0, 0, .08);
    --eg-shadow-2:    0 10px 30px rgba(0, 0, 0, .14);
    --eg-ring:        0 0 0 3px rgba(230, 0, 0, .35);
}

/* المظهر الغامق - Dark theme: data-theme="dark" على <html>، أو تفضيل النظام */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --eg-bg:            var(--eg-ink);
        --eg-surface:       var(--eg-charcoal);
        --eg-surface-2:     var(--eg-graphite);
        --eg-text:          #F2F2F2;
        --eg-text-muted:    var(--eg-grey-300d);
        --eg-border:        var(--eg-graphite);
        --eg-primary:       var(--eg-red-soft);
        --eg-primary-hover: #FF6161;
        --eg-link:          var(--eg-red-soft);
        --eg-link-hover:    #FF6161;
        --eg-shadow-1:      0 2px 8px rgba(0, 0, 0, .4);
        --eg-shadow-2:      0 10px 30px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --eg-bg:            var(--eg-ink);
    --eg-surface:       var(--eg-charcoal);
    --eg-surface-2:     var(--eg-graphite);
    --eg-text:          #F2F2F2;
    --eg-text-muted:    var(--eg-grey-300d);
    --eg-border:        var(--eg-graphite);
    --eg-primary:       var(--eg-red-soft);
    --eg-primary-hover: #FF6161;
    --eg-link:          var(--eg-red-soft);
    --eg-link-hover:    #FF6161;
    --eg-shadow-1:      0 2px 8px rgba(0, 0, 0, .4);
    --eg-shadow-2:      0 10px 30px rgba(0, 0, 0, .55);
}

/* جسر للموقع الحالي - Bridge for the current site variables (style.css).
   قيم المظهر الفاتح ثابتة عمداً: الموقع بلا مظهر غامق، فلا يتبع تفضيل نظام الزائر.
   EN: Fixed light-scheme values on purpose: the site has no dark theme, so it must not follow the visitor's OS preference. */
:root {
    --primary-red: #E60000;
    --dark-black:  #111111;
    --dark-gray:   #2E2E2E;
    --light-gray:  #F0F0F0;
    --white:       #FFFFFF;
    --text-color:  #1A1A1A;
}