/* css/brand.css
   ============================================================
   هوية Mostafa Sholkamy — المصدر الوحيد لألوان البراند.

   الترتيب مهم: الملف ده لازم يتحمّل بعد bootstrap.min.css مباشرةً،
   لأنه بيعيد تعريف متغيرات Bootstrap (--bs-*) عشان كل الـ utilities
   والأزرار تتبع الهوية تلقائيًا.

   المبدأ: مفيش أي لون مكتوب بالإيد في أي ملف تاني — كله بيقرأ من هنا.

   الألوان: Deep Navy (#050816) + Electric Blue (#087BFF) + Cyan (#38D8FB)
   الدارك هو الافتراضي، واللايت بيتفعّل بـ [data-bs-theme="light"] على <html>.
   ============================================================ */

/* ============================================================
   1) سلالم الألوان — مشتركة بين الثيمين
   ============================================================ */
:root {
    --blue-50:  #EAF4FF;
    --blue-100: #D6E9FF;
    --blue-200: #ADD3FF;
    --blue-300: #7DB8FF;
    --blue-400: #3D96FF;
    --blue-500: #087BFF;
    --blue-600: #066CE5;
    --blue-700: #0561D9;
    --blue-800: #064DAA;
    --blue-900: #053A7D;

    --gray-50:  #F8FAFC;
    --gray-100: #F1F3F6;
    --gray-200: #E7EBF0;
    --gray-300: #D0D5DD;
    --gray-400: #98A2B3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1D2939;
    --gray-900: #101828;
    --gray-950: #050816;
}

/* ============================================================
   2) الثيم الدارك (الافتراضي)
   ============================================================ */
:root,
[data-bs-theme="dark"] {
    --brand-bg:              #050816;
    --brand-bg-2:            #0A1024;
    --brand-card:            #0E1730;
    --brand-elevated:        #121D3A;

    --brand-primary:         #087BFF;
    --brand-primary-dark:    #0561D9;
    --brand-accent:          #00A7FF;
    --brand-cyan:            #38D8FB;

    --brand-text:            #FFFFFF;
    --brand-text-2:          #B8C4D9;
    --brand-text-muted:      #71809B;

    --brand-border:          #1D2B4A;
    --brand-border-active:   #087BFF;

    --brand-success:         #22C55E;
    --brand-error:           #EF4444;
    --brand-warning:         #F59E0B;

    /* نسخ rgb — لازمة لكل rgba() في الجلوهات والظلال */
    --brand-bg-rgb:          5, 8, 22;
    --brand-bg-2-rgb:        10, 16, 36;
    --brand-card-rgb:        14, 23, 48;
    --brand-elevated-rgb:    18, 29, 58;
    --brand-primary-rgb:     8, 123, 255;
    --brand-primary-dark-rgb: 5, 97, 217;
    --brand-accent-rgb:      0, 167, 255;
    --brand-cyan-rgb:        56, 216, 251;
    --brand-text-rgb:        255, 255, 255;
    --brand-text-2-rgb:      184, 196, 217;
    --brand-muted-rgb:       113, 128, 155;
    --brand-border-rgb:      29, 43, 74;
    --brand-success-rgb:     34, 197, 94;
    --brand-error-rgb:       239, 68, 68;
    --brand-warning-rgb:     245, 158, 11;

    /* أسطح شبه شفافة — للجلاس والهوفر */
    --brand-glass:           rgba(5, 8, 22, 0.96);
    --brand-surface-1:       rgba(255, 255, 255, 0.03);
    --brand-surface-2:       rgba(255, 255, 255, 0.06);
    --brand-surface-3:       rgba(255, 255, 255, 0.10);
    --brand-shadow:          rgba(0, 0, 0, 0.45);

    /* تدرّجات الهوية */
    --grad-brand:            linear-gradient(135deg, #087BFF 0%, #00A7FF 100%);
    --grad-brand-line:       linear-gradient(90deg, #087BFF 0%, #00A7FF 100%);
    --grad-text:             linear-gradient(90deg, #087BFF 0%, #38D8FB 100%);
    --grad-hero:             linear-gradient(115deg, #050816 0%, #0B1633 45%, #063B7A 100%);
    --grad-surface:          linear-gradient(135deg, #121D3A 0%, #0A1024 100%);
    --grad-scrim:            linear-gradient(180deg, #050816 0%, #0A1024 100%);

    /* جلو ناعم */
    --glow-primary:          0 0 0 4px rgba(8, 123, 255, 0.18);
    --shadow-card:           0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-card-hover:     0 15px 40px rgba(8, 123, 255, 0.22);

    /* حجاب فوق الصفحة (مودال/كيس-ستادي) */
    --brand-scrim:           rgba(5, 8, 22, 0.86);

    /* موجات الهيرو — في الدارك بتفتّح الكحلي، وفي اللايت رمادي بيغمّق */
    --wave-1:                rgba(8, 123, 255, 0.10);
    --wave-2:                rgba(8, 123, 255, 0.17);
}

/* ============================================================
   3) الثيم اللايت
   نفس الهوية — خلفيات رمادية فاتحة، والأبيض للكروت بس.
   ============================================================ */
[data-bs-theme="light"] {
    /* خلفية الصفحة: رمادي مزرق أغمق من الأصل — الكروت البيضا بتبان
       كسطح مرفوع، والأزرق بيدي إحساس إنه نفس الهوية مش موقع تاني.
       (L* ≈ 86 — نفس إضاءة المرجع بالظبط) */
    --brand-bg:              #D0D9E7;
    --brand-bg-2:            #E3E9F2;
    --brand-card:            #FFFFFF;
    --brand-elevated:        #F8FAFC;

    --brand-primary:         #087BFF;
    --brand-primary-dark:    #0561D9;
    --brand-accent:          #0099F7;
    --brand-cyan:            #27BDE8;

    --brand-text:            #101828;
    /* غامقين شوية عن الأصل عشان الخلفية بقت أغمق —
       التباين بقى 7.3:1 للنص الأساسي و5.4:1 للباهت (فوق حد AA) */
    --brand-text-2:          #344054;
    --brand-text-muted:      #475467;

    --brand-border:          #D0D5DD;
    --brand-border-active:   #087BFF;

    --brand-success:         #16A34A;
    --brand-error:           #DC2626;
    --brand-warning:         #D97706;

    --brand-bg-rgb:          208, 217, 231;
    --brand-bg-2-rgb:        227, 233, 242;
    --brand-card-rgb:        255, 255, 255;
    --brand-elevated-rgb:    248, 250, 252;
    --brand-primary-rgb:     8, 123, 255;
    --brand-primary-dark-rgb: 5, 97, 217;
    --brand-accent-rgb:      0, 153, 247;
    --brand-cyan-rgb:        39, 189, 232;
    --brand-text-rgb:        16, 24, 40;
    --brand-text-2-rgb:      52, 64, 84;
    --brand-muted-rgb:       71, 84, 103;
    --brand-border-rgb:      208, 213, 221;
    --brand-success-rgb:     22, 163, 74;
    --brand-error-rgb:       220, 38, 38;
    --brand-warning-rgb:     217, 119, 6;

    --brand-glass:           rgba(208, 217, 231, 0.96);
    --brand-surface-1:       rgba(16, 24, 40, 0.02);
    --brand-surface-2:       rgba(16, 24, 40, 0.04);
    --brand-surface-3:       rgba(16, 24, 40, 0.08);
    --brand-shadow:          rgba(16, 24, 40, 0.10);

    --grad-brand:            linear-gradient(135deg, #087BFF 0%, #0099F7 100%);
    --grad-brand-line:       linear-gradient(90deg, #087BFF 0%, #0099F7 100%);
    --grad-text:             linear-gradient(90deg, #087BFF 0%, #27BDE8 100%);
    --grad-hero:             linear-gradient(115deg, #D0D9E7 0%, #E3E9F2 45%, #E7F3FF 100%);
    --grad-surface:          linear-gradient(135deg, var(--brand-card) 0%, var(--gray-50) 100%);
    --grad-scrim:            linear-gradient(180deg, #D0D9E7 0%, #E3E9F2 100%);

    --glow-primary:          0 0 0 4px rgba(8, 123, 255, 0.15);
    --shadow-card:           0 10px 30px rgba(16, 24, 40, 0.08);
    --shadow-card-hover:     0 15px 40px rgba(8, 123, 255, 0.16);

    --brand-scrim:           rgba(16, 24, 40, 0.45);

    /* في اللايت الموجات رمادية غامقة عن الخلفية، مش زرقا */
    --wave-1:                rgba(16, 24, 40, 0.06);
    --wave-2:                rgba(16, 24, 40, 0.11);
}

/* ============================================================
   4) أسماء قديمة — توافق خلفي
   ~30 موضع في الملفات القديمة بيستخدموا الأسامي دي. بنربطهم بالتوكنز
   الجديدة بدل ما نعدّل كل موضع.
   ============================================================ */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bg-body:       var(--brand-bg);
    --text-main:     var(--brand-text);
    --text-muted:    var(--brand-text-muted);
    --primary-color: var(--brand-primary);
    --gradient-text: var(--grad-text);

    /* الخط الأساسي للهوية — Montserrat للاتيني، وCairo للعربي (الموقع
       ثنائي اللغة)، وبعدهم خطوط النظام كـ fallback.
       Montserrat مفيهوش حروف عربية، فالمتصفح بينزل لـ Cairo لوحده. */
    --brand-font:    'Montserrat', 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --brand-font-mono: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;

    /* سطح الكود — داكن في الثيمين عن قصد: بلوكات الكود لازم تفضل
       داكنة عشان الألوان الوظيفية (syntax) تبان بنفس الشكل في أي ثيم. */
    --code-bg:        var(--gray-950);
    --code-text:      #B8C4D9;
    --code-border:    rgba(var(--brand-primary-rgb), 0.25);
    --code-inline-bg: rgba(var(--brand-muted-rgb), 0.18);

    /* طبقات بتقعد فوق الصور (عدّاد، شيبس، لايتبوكس) — داكنة في الثيمين
       عشان النص الأبيض يفضل مقروء مهما كانت الصورة تحتها. */
    --overlay-strong: rgba(5, 8, 22, 0.94);
    --overlay-chip:   rgba(5, 8, 22, 0.70);
    --overlay-hover:  rgba(5, 8, 22, 0.88);
}

/* ============================================================
   5) جسر Bootstrap
   ------------------------------------------------------------
   من غير البلوك ده، كل الـ utilities والأزرار هتفضل بألوان
   Bootstrap الافتراضية (#0d6efd) ومش هتتبع الهوية.

   ملاحظة: الاستبدال بيحصل عند الاستخدام، فـ --bs-primary:
   var(--brand-primary) بتاخد القيمة الصح في كل ثيم أوتوماتيك.
   ============================================================ */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-primary:                var(--brand-primary);
    --bs-primary-rgb:            var(--brand-primary-rgb);
    --bs-primary-text-emphasis:  var(--brand-primary);
    --bs-primary-bg-subtle:      rgba(var(--brand-primary-rgb), 0.12);
    --bs-primary-border-subtle:  rgba(var(--brand-primary-rgb), 0.28);

    --bs-body-bg:                var(--brand-bg);
    --bs-body-bg-rgb:            var(--brand-bg-rgb);
    --bs-body-color:             var(--brand-text-2);
    --bs-body-color-rgb:         var(--brand-text-2-rgb);
    --bs-body-font-family:       var(--brand-font);
    --bs-body-font-weight:       400;
    --bs-emphasis-color:         var(--brand-text);
    --bs-emphasis-color-rgb:     var(--brand-text-rgb);
    --bs-heading-color:          var(--brand-text);
    --bs-secondary-color:        var(--brand-text-muted);
    --bs-secondary-bg:           var(--brand-elevated);

    --bs-tertiary-bg:            var(--brand-bg-2);
    --bs-tertiary-color:         var(--brand-text-muted);

    --bs-border-color:           var(--brand-border);
    --bs-border-color-translucent: rgba(var(--brand-border-rgb), 0.5);
    --bs-border-width:           1px;

    --bs-link-color:             var(--brand-primary);
    --bs-link-color-rgb:         var(--brand-primary-rgb);
    --bs-link-hover-color:       var(--brand-accent);
    --bs-link-hover-color-rgb:   var(--brand-accent-rgb);

    --bs-focus-ring-color:       rgba(var(--brand-primary-rgb), 0.35);
    --bs-focus-ring-width:       3px;

    --bs-card-bg:                var(--brand-card);
    --bs-card-border-color:      var(--brand-border);
    --bs-card-cap-bg:            var(--brand-elevated);
    --bs-modal-bg:               var(--brand-card);
    --bs-modal-border-color:     var(--brand-border);
    --bs-modal-header-border-color: var(--brand-border);
    --bs-modal-footer-border-color: var(--brand-border);
    --bs-dropdown-bg:            var(--brand-card);
    --bs-dropdown-border-color:  var(--brand-border);
    --bs-dropdown-link-hover-bg: rgba(var(--brand-primary-rgb), 0.12);
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-offcanvas-bg:           var(--brand-card);
    --bs-table-bg:               transparent;
    --bs-table-border-color:     var(--brand-border);

    --bs-success:                var(--brand-success);
    --bs-success-rgb:            var(--brand-success-rgb);
    --bs-secondary:              var(--brand-text-muted);
    --bs-secondary-rgb:          var(--brand-muted-rgb);
    --bs-danger:                 var(--brand-error);
    --bs-danger-rgb:             var(--brand-error-rgb);
    --bs-warning:                var(--brand-warning);
    --bs-warning-rgb:            var(--brand-warning-rgb);
    --bs-info:                   var(--brand-accent);
    --bs-info-rgb:               var(--brand-accent-rgb);

    --bs-form-valid-color:       var(--brand-success);
    --bs-form-invalid-color:     var(--brand-error);
}

/* --- الحقول ----------------------------------------------------
   حدود الفوكس في Bootstrap لونها متجمّد في الـ CSS (#86b7fe)، فبنربطها
   بلون الهوية هي كمان.
   --------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-border-active);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-control::placeholder {
    color: var(--brand-text-muted);
    opacity: 1;
}

/* --- الأزرار ---------------------------------------------------
   فخ: .btn-primary في Bootstrap مش بيقرأ --bs-primary — القيم متجمّدة
   جواه في --bs-btn-*. فلازم نعيد تعريفهم كلهم، وإلا الزرار يفضل
   أزرق Bootstrap.
   --------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--brand-primary);
    --bs-btn-border-color:        var(--brand-primary);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--brand-primary-dark);
    --bs-btn-hover-border-color:  var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb:    var(--brand-primary-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color:               var(--brand-primary);
    --bs-btn-border-color:        var(--brand-primary);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--brand-primary);
    --bs-btn-hover-border-color:  var(--brand-primary);
    --bs-btn-focus-shadow-rgb:    var(--brand-primary-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color:      var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-light {
    --bs-btn-color:               var(--brand-text);
    --bs-btn-border-color:        rgba(var(--brand-border-rgb), 0.6);
    --bs-btn-hover-color:         var(--brand-primary);
    --bs-btn-hover-bg:            var(--brand-surface-2);
    --bs-btn-hover-border-color:  var(--brand-primary);
    --bs-btn-active-color:        var(--brand-primary);
    --bs-btn-active-bg:           var(--brand-surface-3);
    --bs-btn-active-border-color: var(--brand-primary);
}

.btn-outline-dark {
    --bs-btn-color:               var(--brand-text);
    --bs-btn-border-color:        var(--brand-border);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--brand-primary);
    --bs-btn-hover-border-color:  var(--brand-primary);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
}

/* زر السيرة الذاتية في الـ hero */
.btn-outline-secondary {
    --bs-btn-color:               var(--brand-text-2);
    --bs-btn-border-color:        var(--brand-border);
    --bs-btn-hover-color:         var(--brand-text);
    --bs-btn-hover-bg:            var(--brand-surface-2);
    --bs-btn-hover-border-color:  var(--brand-primary);
    --bs-btn-active-color:        var(--brand-text);
    --bs-btn-active-bg:           var(--brand-surface-3);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb:    var(--brand-primary-rgb);
}

/* البادجات والـ alerts بتقرأ --bs-* فبتتبع الجسر تلقائيًا */

/* --- زر إغلاق المودال ---------------------------------------------
   بنتحكم فيه بالـ filter مباشرة عشان يتبع الثيم في الحالتين، بدل ما
   نعتمد على .btn-close-white اللي بيخليه أبيض على خلفية بيضا في اللايت.
   الـ .btn-close-white مستثنى عن قصد: ده بيتحط على توست ملوّن
   (text-bg-*) فمحتاج يفضل أبيض في الثيمين.
   ------------------------------------------------------------------ */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="light"] .btn-close:not(.btn-close-white) {
    filter: none;
}

/* --- زر قائمة الموبايل (hamburger) --------------------------------
   Bootstrap بيحط أيقونة بلون غامق ثابت (#212529) عن طريق
   --bs-navbar-toggler-icon-bg، فكانت مش باينة على النافبار الكحلي.
   بنعيد تعريفها بلون الهوية في كل ثيم.
   ------------------------------------------------------------------ */
.navbar-toggler {
    --bs-navbar-toggler-border-color: var(--brand-border);
}

.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23101828' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   6) تفاصيل عامة — عشان الإحساس يبقى واحد في كل الصفحات
   ============================================================ */
::selection {
    background: rgba(var(--brand-primary-rgb), 0.3);
    color: var(--brand-text);
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* سكرول بار بهوية البراند */
* {
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.45) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb), 0.6);
    background-clip: content-box;
}

/* تدرّج الهوية للنصوص المميزة */
.text-gradient {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------
   الكلاسين دول مستخدمين في sections/hero.html و contact.html
   من غير ما يكونوا معرّفين في أي مكان — فكانوا مش بيعملوا حاجة.
   ------------------------------------------------------------ */

/* جلو أزرق ناعم لأزرار الـ CTA */
.shadow-glow {
    box-shadow: 0 10px 30px rgba(var(--brand-primary-rgb), 0.35);
}
.shadow-glow:hover,
.shadow-glow:focus-visible {
    box-shadow: 0 14px 38px rgba(var(--brand-primary-rgb), 0.5);
}

/* رفعة خفيفة عند الوقوف */
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
}
.hover-lift:active {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .hover-lift { transition: none; }
    .hover-lift:hover,
    .hover-lift:active { transform: none; }
}