/*
==============================================
   css-variables-module.css
   ملف التحسينات الحديثة — وحدة منفصلة
   (اقتراح لا يغيّر التصميم)

   يعتمد على:
   • CSS Custom Properties (متغيرات CSS)
   • CSS Logical Properties (خصائص منطقية RTL/LTR)
   • CSS Clamp للأحجام السائلة
   • CSS Container Queries (استعلامات الحاوية)
   • @layer لتنظيم الأولويات
   • prefers-color-scheme (وضع الظلام)
   • prefers-reduced-motion (الحركة المخفّفة)
==============================================
*/

/* ==========================================
   طبقات الأولويات باستخدام @layer
   ========================================== */
@layer reset, tokens, base, components, utilities, overrides;

/* ==========================================
   @layer tokens — رموز التصميم الكاملة
   ========================================== */
@layer tokens {

    :root {
        /* ---- الألوان ---- */
        --color-primary:        #1A9BA1;
        --color-primary-dark:   #157a80;
        --color-primary-light:  #d0f0f2;
        --color-accent:         #F4D249;
        --color-accent-dark:    #d4a800;
        --color-secondary:      #2c4755;
        --color-alt:            #1787e0;

        /* ---- ألوان محايدة ---- */
        --color-white:      #ffffff;
        --color-gray-100:   #f6f6f6;
        --color-gray-200:   #eeeeee;
        --color-gray-400:   #aaaaaa;
        --color-gray-600:   #777777;
        --color-gray-800:   #333333;
        --color-black:      #000000;

        /* ---- الخلفيات ---- */
        --bg-body:      var(--color-white);
        --bg-section:   var(--color-gray-100);
        --bg-header:    var(--color-primary);
        --bg-footer:    var(--color-black);
        --bg-contact:   var(--color-primary);

        /* ---- الخطوط السائلة (Fluid Typography) ---- */
        --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
        --text-sm:   clamp(0.875rem, 1.8vw, 1rem);
        --text-md:   clamp(1rem,     2vw,   1.125rem);
        --text-lg:   clamp(1.125rem, 2.5vw, 1.375rem);
        --text-xl:   clamp(1.25rem,  3vw,   1.75rem);
        --text-2xl:  clamp(1.5rem,   4vw,   2.25rem);
        --text-3xl:  clamp(1.875rem, 5vw,   3rem);
        --text-hero: clamp(2rem,     6vw,   3.5rem);

        /* ---- المسافات السائلة (Fluid Spacing) ---- */
        --space-xs:  clamp(0.25rem,  1vw,   0.5rem);
        --space-sm:  clamp(0.5rem,   1.5vw, 0.75rem);
        --space-md:  clamp(0.75rem,  2vw,   1rem);
        --space-lg:  clamp(1rem,     3vw,   1.5rem);
        --space-xl:  clamp(1.5rem,   4vw,   2.5rem);
        --space-2xl: clamp(2.5rem,   6vw,   5rem);
        --space-3xl: clamp(4rem,     8vw,   7.5rem);

        /* ---- شعاع الزوايا ---- */
        --radius-xs:   4px;
        --radius-sm:   8px;
        --radius-md:  12px;
        --radius-lg:  15px;
        --radius-xl:  24px;
        --radius-full: 9999px;

        /* ---- الظلال ---- */
        --shadow-xs: 0 1px 3px  rgba(0,0,0,0.06);
        --shadow-sm: 0 2px 8px  rgba(0,0,0,0.08);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
        --shadow-lg: 0 12px 20px rgba(0,0,0,0.13), 0 2px 4px rgba(0,0,0,0.12);
        --shadow-header: 0 0 10px #ddd;

        /* ---- الانتقالات ---- */
        --ease-fast:   0.2s ease;
        --ease-normal: 0.3s ease;
        --ease-slow:   0.5s ease;
        --ease-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

        /* ---- تخطيط الشبكة ---- */
        --grid-cols-2: repeat(2, 1fr);
        --grid-cols-3: repeat(3, 1fr);
        --grid-auto:   repeat(auto-fill, minmax(300px, 1fr));

        /* ---- ارتفاع الهيدر ---- */
        --header-height: 90px;

        /* ---- z-index ---- */
        --z-below:   -1;
        --z-base:     0;
        --z-dropdown: 100;
        --z-overlay:  200;
        --z-modal:    300;
        --z-toast:    400;

        /* ---- الخط ---- */
        --font-family: "Cairo", sans-serif;
        --font-weight-normal: 400;
        --font-weight-bold:   700;
        --font-weight-black:  900;
        --line-height-tight:  1.3;
        --line-height-normal: 1.7;
        --line-height-loose:  2;
    }

    /* ---- وضع الظلام التلقائي ---- */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-body:      #0f1923;
            --bg-section:   #1a2633;
            --color-gray-800: #e0e0e0;
            --color-gray-600: #aaaaaa;
            --color-white:  #1a2633;
        }
    }
}

/* ==========================================
   @layer reset — إعادة الضبط الحديثة
   ========================================== */
@layer reset {

    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
    }

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font-family: var(--font-family);
        line-height: var(--line-height-normal);
        background-color: var(--bg-body);
    }

    img, video {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* إزالة الأنماط الافتراضية لـ button و a */
    button { cursor: pointer; background: none; border: none; }
    a      { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; padding: 0; }
}

/* ==========================================
   @layer base — الأنماط الأساسية
   ========================================== */
@layer base {

    /* الحاوية بخصائص منطقية (RTL/LTR) */
    .container {
        padding-inline: 15px;
        margin-inline: auto;
        width: 100%;
    }

    @media (min-width: 576px)  { .container { max-width: 540px; } }
    @media (min-width: 768px)  { .container { max-width: 750px; } }
    @media (min-width: 992px)  { .container { max-width: 970px; } }
    @media (min-width: 1200px) { .container { max-width: 1170px; } }

    /* القسم */
    section { padding-block-start: 70px; }

    .section-b-space { padding-block-end: 70px; }
}

/* ==========================================
   @layer components — المكونات بالمتغيرات
   ========================================== */
@layer components {

    /* --- الهيدر --- */
    .header {
        background-color: var(--bg-header);
        box-shadow: var(--shadow-header);
        block-size: var(--header-height);
    }

    .header .main-nav > li > a {
        font-size: var(--text-lg);
        block-size: var(--header-height);
        padding-inline: var(--space-xl);
        color: var(--color-white);
        transition: var(--ease-normal);
    }

    /* --- اللاندنج --- */
    .landing .text h1 {
        font-size: var(--text-hero);
        letter-spacing: -2px;
    }

    .landing .text p {
        font-size: var(--text-lg);
        color: var(--color-gray-600);
    }

    /* --- بطاقة التسعير --- */
    .pricing .box {
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
        transition: var(--ease-normal);
    }

    .pricing .box .amount {
        font-size: var(--text-3xl);
        color: var(--color-primary);
    }

    .pricing .box a {
        border-color: var(--color-primary);
        color: var(--color-primary);
        border-radius: var(--radius-xs);
        transition: var(--ease-normal);
    }

    .pricing .box a:hover {
        background-color: var(--color-alt);
        border-color: var(--color-alt);
        color: var(--color-white);
    }

    /* --- الفوتر --- */
    .footer { background-color: var(--bg-footer); }

    /* --- النماذج --- */
    .auth-header   { background: var(--color-primary); }
    .auth-link     { color: var(--color-primary); }
    .btn-submit    { background: var(--color-primary); border-radius: var(--radius-sm); }
    .btn-submit:hover { background: var(--color-primary-dark); }

    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
    }
}

/* ==========================================
   @layer utilities — أدوات مساعدة
   ========================================== */
@layer utilities {

    /* نصوص */
    .text-primary   { color: var(--color-primary); }
    .text-accent    { color: var(--color-accent); }
    .text-secondary { color: var(--color-secondary); }
    .text-muted     { color: var(--color-gray-600); }

    /* خلفيات */
    .bg-primary { background-color: var(--color-primary); }
    .bg-accent  { background-color: var(--color-accent); }
    .bg-section { background-color: var(--bg-section); }

    /* مسافات */
    .p-sm  { padding: var(--space-sm); }
    .p-md  { padding: var(--space-md); }
    .p-lg  { padding: var(--space-lg); }
    .p-xl  { padding: var(--space-xl); }

    .gap-sm  { gap: var(--space-sm); }
    .gap-md  { gap: var(--space-md); }
    .gap-lg  { gap: var(--space-lg); }

    /* إمكانية الوصول — تخفيف الحركة */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration:   0.01ms !important;
            transition-duration:  0.01ms !important;
        }
    }
}

/* ==========================================
   استعلامات الحاوية (Container Queries)
   ميزة CSS الحديثة لاستجابة أدق
   ========================================== */
.pricing-wrapper {
    container-type: inline-size;
    container-name: pricing;
}

@container pricing (max-width: 600px) {
    .pricing .box .amount { font-size: var(--text-2xl); }
    .pricing .box .title  { font-size: var(--text-lg); }
}

.card-wrapper {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .card { padding: var(--space-md); }
    .card h5 { font-size: var(--text-md); }
}

/*
==============================================
   كيفية الاستخدام:
   
   1. أضف هذا الملف بعد site-responsive.css في _Layout.cshtml:
      <link rel="stylesheet" href="~/Fontend/css/css-variables-module.css">
   
   2. استبدل القيم المكتوبة يدويًا في site-responsive.css بالمتغيرات:
      مثال: font-size: 22px  →  font-size: var(--text-xl)
   
   3. لتفعيل وضع الظلام التلقائي:
      لا تحتاج إلى شيء، سيكتشفه المتصفح تلقائيًا!
   
   4. لاستخدام Container Queries:
      أضف كلاس .pricing-wrapper على العنصر الأب لبطاقات التسعير.
==============================================
*/