/* ============================================================================
   طبقة رموز التصميم — الارتفاع والحركة وحلقة التركيز
   ----------------------------------------------------------------------------
   تُحمَّل بعد styles.css و admin-style.css، فتكمّل ما فيهما ولا تستبدله:
   ‎--shadow / --shadow-sm / --shadow-glow تبقى كما هي، وتُضاف هنا مستويات
   الارتفاع الناقصة ورموز الحركة والتركيز.

   لماذا كانت هناك حاجة لها:
   • صفحة مركز المطورين كانت تكتب 31 ظلًّا بصيغة rgba(0,0,0,…) ثابتة. الظل
     الأسود الخفيف مصمَّم لسطح أبيض؛ فوق سطح داكن (‎#1A1A1A) لا يكاد يُرى،
     فتفقد كل البطاقات والنوافذ ارتفاعها في السمة الداكنة وتبدو مسطّحة ملتصقة.
     القيم أدناه مطابقة للمظهر الفاتح الحالي، ومصحَّحة للداكن.
   • ‎--shadow-lg معرَّف بقيمة ثابتة لا تتبع السمة رغم استخدامه في نوافذ.
   • 21 مدّة انتقال مختلفة و5 منحنيات تسارع بلا نظام، فتتفاوت سرعة العناصر
     المتجاورة بلا سبب.
   • أربع قواعد ‎:focus-visible فقط في الصفحة كلها، فمستخدم الكيبورد يتنقّل
     بين عشرات البطاقات والشرائح دون أن يرى أين هو.

   قاعدة ثابتة: لا لون جديد. كل ما هنا إمّا أسود شفّاف للظل، أو مشتق من
   ‎--color-accent عبر color-mix.
   ========================================================================== */

:root,
:root[data-theme='light'] {
    /* ── الارتفاع ─────────────────────────────────────────────────────────
       ثلاث درجات فقط: سطح هادئ، سطح مرفوع (تمرير/تركيز)، طبقة عائمة (نوافذ).
       أكثر من ذلك يصير زخرفة لا معنى لها. */
    --elev-1: 0 2px 12px rgba(0, 0, 0, 0.07);
    --elev-2: 0 8px 22px rgba(0, 0, 0, 0.10);
    --elev-3: 0 20px 60px rgba(0, 0, 0, 0.28);

    /* ظل ملوّن يتبع لون النظام — للعناصر الأساسية (أزرار الإجراء الرئيسي) */
    --elev-accent: 0 6px 18px color-mix(in srgb, var(--color-accent) 30%, transparent);

    --shadow-lg: var(--elev-2);
}

:root[data-theme='dark'] {
    /* السطح الداكن يبتلع الظل الخفيف، فيحتاج عتامة أعلى وانتشارًا أقل.
       والحدّ الداخلي الفاتح يرسم حافة السطح حيث يعجز الظل — وهي الطريقة
       المعتادة لإظهار الارتفاع في السمات الداكنة. */
    --elev-1: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --elev-2: 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --elev-3: 0 20px 50px rgba(0, 0, 0, 0.7);

    --elev-accent: 0 6px 18px color-mix(in srgb, var(--color-accent) 45%, transparent);

    --shadow-lg: var(--elev-2);
}

:root {
    /* ── الحركة ───────────────────────────────────────────────────────────
       ثلاث مدد: استجابة فورية (تلوين/تحويم)، انتقال محسوس (بطاقة/لوحة)،
       دخول طبقة كاملة. والمنحنى الافتراضي خارجي (يبدأ سريعًا ثم يهدأ) لأنه
       يقرأ كاستجابة لفعل المستخدم لا كحركة تلقائية. */
    --dur-fast: 0.15s;
    --dur-base: 0.25s;
    --dur-slow: 0.4s;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── التركيز ──────────────────────────────────────────────────────────
       حلقة واحدة لكل الصفحة: خط خارجي للوضوح، وهالة ملوّنة للربط بنظام
       الألوان. تظهر مع :focus-visible فقط، فلا تزعج مستخدم الفأرة. */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent);
    --focus-outline-width: 2px;
}

/* ============================================================================
   حلقة تركيز موحّدة
   ----------------------------------------------------------------------------
   ‎:focus-visible لا يُفعّل إلا للتنقّل بالكيبورد، فالنقر بالفأرة لا يُظهرها.
   ========================================================================== */

.mcp-container :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.modal-overlay :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.cmdk :is(a, button, input, [tabindex]):focus-visible {
    outline: var(--focus-outline-width) solid var(--color-accent);
    outline-offset: 2px;
    border-radius: inherit;
}

/* البطاقات القابلة للنقر تُبرَز بالهالة بدل الخط، فحوافها مستديرة وكبيرة */
.mcp-container :is(.mcp-card, .connector-card, .hub-card, .stat-card):focus-visible {
    outline: none;
    box-shadow: var(--elev-2), var(--focus-ring);
}

/* حقول الإدخال: الهالة أوضح من الخط الخارجي لأنها تلتصق بحدّ الحقل */
.mcp-container :is(input, select, textarea):focus-visible,
.modal-overlay :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.01s;
        --dur-base: 0.01s;
        --dur-slow: 0.01s;
    }
}