/*
   ─────────────────────────────────────────────────────────────
   ١ · الرموز التصميمية (Design Tokens)
   ─────────────────────────────────────────────────────────────
   المصدر الوحيد للحقيقة في اللون والخط والمسافة والظل.
   لا يُكتب لون صريح خارج هذا الملف — كل قاعدة تستهلك متغيّرًا.

   لوحة أزرق تعليمي حيوي: أساسي واثق، أخضر للنجاح والتفاعل،
   وكهرماني للتنبيه — بدل الرمادي شبه الأحادي القديم.

   ─── كيف يعمل الوضعان ───
   السمة تُحسم بسمة ‎data-theme‎ على ‎<html>‎، يكتبها سكربت قصير
   داخل ‎<head>‎ قبل أول رسم (انظر _Assets.cshtml) فلا تومض الصفحة.
   القيم المخزَّنة ثلاث: ‎light‎ و‎dark‎ و‎system‎ — والأخيرة تُترجَم
   إلى إحدى الأوليين وقت التحميل، فلا تحتاج الأوراق إلى نسخة ثالثة.

   ─── قاعدة الاستهلاك ───
   السلالم الخام (‎--n-*‎ و‎--p-*‎ …) تنقلب أدوارها مع السمة:
   الدرجة ‎50‎ تبقى دائمًا «أخفت خلفية» والدرجة ‎700‎ تبقى دائمًا
   «أقوى نص»، مهما كان الوضع. لذلك تصحّ كل قاعدة كُتبت للوضع الفاتح
   في الوضع الداكن بلا تعديل.
*/

:root {

    color-scheme: light;

    /* ─── محايدات: رمادي مزرقّ (Slate) ─── */
    --n-0:   #ffffff;
    --n-25:  #fcfdfe;
    --n-50:  #f8fafc;
    --n-100: #f1f5f9;
    --n-200: #e2e8f0;
    --n-300: #cbd5e1;
    --n-400: #94a3b8;
    --n-500: #64748b;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1e293b;
    --n-900: #0f172a;
    --n-950: #020617;

    /* ─── اللون الأساسي: أزرق حيوي واثق (#3b82f6) — هوية المنصة ─── */
    --p-50:  #f5f9ff;
    --p-100: #eff6ff;
    --p-200: #dbeafe;
    --p-300: #bfdbfe;
    --p-400: #93c5fd;
    --p-500: #60a5fa;
    --p-600: #3b82f6;
    --p-700: #2563eb;
    --p-800: #1d4ed8;
    --p-900: #1e40af;

    /* ─── لون مساعد: ذهبي للأسعار والتقييم ─── */
    --a-50:  #fefce8;
    --a-100: #fef9c3;
    --a-500: #ca8a04;
    --a-600: #a16207;
    --a-700: #854d0e;

    /* ─── دلالات ─── */
    --ok-50:   #f0fdf4;
    --ok-100:  #dcfce7;
    --ok-500:  #22c55e;
    --ok-600:  #16a34a;
    --ok-700:  #15803d;

    --warn-50:  #fffbeb;
    --warn-100: #fef3c7;
    --warn-500: #f59e0b;
    --warn-600: #d97706;
    --warn-700: #b45309;

    --err-50:   #fef2f2;
    --err-100:  #fee2e2;
    --err-500:  #ef4444;
    --err-600:  #dc2626;
    --err-700:  #b91c1c;

    --info-50:  #f0f9ff;
    --info-100: #e0f2fe;
    --info-500: #0ea5e9;
    --info-700: #0369a1;

    /* ─── أدوار الأسطح والنص ─── */
    --canvas:        var(--n-50);
    --surface:       var(--n-0);
    --surface-sunken: var(--n-25);
    --surface-raised: var(--n-0);
    --surface-inset:  var(--n-50);

    --line:        var(--n-200);
    --line-soft:   var(--n-100);
    --line-strong: var(--n-300);

    --text:        var(--n-900);
    --text-2:      var(--n-700);
    --text-muted:  var(--n-500);
    --text-faint:  var(--n-400);
    --text-invert: var(--n-0);

    --accent:      var(--p-600);
    --accent-hover:var(--p-700);
    --accent-soft: var(--p-50);
    --accent-line: var(--p-200);

    /* ─── أسطح شبه شفافة ───
       الترويسة اللاصقة تحتاج خلفية تمرّر ما تحتها بلا أن تُذيبه. */
    --surface-veil: rgba(255, 255, 255, .86);
    --scrim:        rgba(15, 23, 42, .45);
    --overlay-soft: rgba(15, 23, 42, .06);
    --overlay-chip: rgba(15, 23, 42, .72);

    /* ─── الحبر: أقسام داكنة في الوضعين ───
       الواجهة الرئيسية والتذييل وترويسة الكورس تبقى داكنة دائمًا،
       فهي هوية بصرية لا حالة عرض. القيم هنا لا تنقلب مع السمة. */
    --ink:        #0f172a;
    --ink-2:      #1e293b;
    --ink-fg:     #ffffff;
    --ink-line:   rgba(255, 255, 255, .08);
    --ink-line-2: rgba(255, 255, 255, .16);
    --ink-fill:   rgba(255, 255, 255, .04);
    --ink-fill-2: rgba(255, 255, 255, .07);

    /* ─── سطح القاعة المركّزة (المشغّل والامتحان) ───
       كان ثابت الدكانة؛ صار يتبع السمة مثل بقية المنصة.
       شاشة الفيديو وحدها تبقى سوداء — لأن الإطار الأسود يخدم الصورة. */
    --d-950: var(--n-100);
    --d-900: var(--n-50);
    --d-800: var(--n-0);
    --d-700: var(--n-100);
    --d-600: var(--n-300);
    --d-line: var(--n-200);
    --d-line-soft: var(--n-100);
    --d-text: var(--n-900);
    --d-text-2: var(--n-700);
    --d-muted: var(--n-500);

    /* ─── الخطوط ─── */
    /* كايرو للعربية بكل تدريجاته، إنتر للاتينية، جيت‌براينز للكود */
    --font-ar: 'Cairo', 'Segoe UI', system-ui, sans-serif;
    --font-en: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Mono', ui-monospace, monospace;

    /* تدريجات كايرو — لكل وزن موضعه */
    --fw-light:    300; /* أرقام كبيرة وعناوين عرض هادئة */
    --fw-regular:  400; /* نص الفقرات */
    --fw-medium:   500; /* عناصر الواجهة وخلايا الجداول */
    --fw-semibold: 600; /* عناوين البطاقات وتسميات الحقول والأزرار */
    --fw-bold:     700; /* عناوين الصفحات */
    --fw-black:    800; /* الشعار وعنوان الواجهة الرئيسية */

    /* ─── سلّم القياس ─── */
    --t-2xs:  0.6875rem; /* 11 */
    --t-xs:   0.75rem;   /* 12 */
    --t-sm:   0.8125rem; /* 13 */
    --t-ui:   0.9375rem; /* 15 — مقاس الواجهة الافتراضي */
    --t-md:   1rem;      /* 16 — نص القراءة */
    --t-lg:   1.125rem;  /* 18 */
    --t-xl:   1.3125rem; /* 21 */
    --t-2xl:  1.625rem;  /* 26 */
    --t-3xl:  2.125rem;  /* 34 */
    --t-4xl:  2.75rem;   /* 44 */

    /* ارتفاع السطر أعلى للعربية: كايرو له امتداد رأسي واسع */
    --lh-tight: 1.35;
    --lh-snug:  1.55;
    --lh-body:  1.85;

    /* ─── المسافات ─── */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-7: 2rem;
    --s-8: 2.5rem;
    --s-9: 3rem;
    --s-10: 4rem;
    --s-11: 5rem;

    /* ─── الأنصاف والظلال ───
       زوايا ناعمة بلغة تطبيقات الموبايل: الطلاب يستخدمون المنصة من
       الهاتف والتابلت أساسًا، فالبطاقة والزر يشبهان ما اعتادوه في تطبيقاتهم. */
    --r-xs:  6px;
    --r-sm:  10px;
    --r:     14px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-pill: 999px;

    /* نصف قطر موحّد لكل ما يُنقر أو يُكتب فيه: زر وحقل وقائمة */
    --r-control: 12px;

    --sh-1: 0 1px 2px rgba(15, 23, 42, .05);
    --sh-2: 0 2px 8px -2px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .04);
    --sh-3: 0 10px 24px -8px rgba(15, 23, 42, .16);
    --sh-4: 0 20px 40px -16px rgba(15, 23, 42, .20);
    --sh-ring: 0 0 0 3px rgba(59, 130, 246, .5);

    /* ─── الحركة ─── */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .12s;
    --dur: .18s;
    --dur-slow: .3s;

    /* ─── الطبقات ─── */
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ─── مقاسات الهيكل ─── */
    --shell-max: 1240px;
    --shell-wide: 1600px;
    --sidebar-w: 264px;
    --header-h: 64px;
    --control-h: 2.75rem;   /* 44px — هدف لمس مريح */
    --control-h-sm: 2.25rem;
    --control-h-lg: 3.125rem;

    /* شريط التبويبات السفلي في وضع التطبيق (الموبايل والتابلت) */
    --tabbar-h: 4.25rem;
    --appbar-h: 3.5rem;
}

/* ══════════════════════════════════════════
   الوضع الداكن
   ══════════════════════════════════════════
   السلالم تنقلب أدوارها لا أسماؤها: ‎--x-50‎ يظل أخفت خلفية
   و‎--x-700‎ يظل أقوى نص. لذلك كل قاعدة كُتبت للوضع الفاتح تصحّ هنا.
   النغمة أدفأ قليلًا من الأسود الصافي وأقل تباينًا من الأبيض على الأسود:
   شاشة تُقرأ ساعتين لا لقطة تُلتقط.
*/

[data-theme='dark'] {

    color-scheme: dark;

    --n-0:   #0b1220;
    --n-25:  #0f1729;
    --n-50:  #16213a;
    --n-100: #1c2942;
    --n-200: #24344f;
    --n-300: #34455f;
    --n-400: #64748b;
    --n-500: #94a3b8;
    --n-600: #b0bdd0;
    --n-700: #cbd5e1;
    --n-800: #e2e8f0;
    --n-900: #f1f5f9;
    --n-950: #f8fafc;

    --p-50:  #0b1a36;
    --p-100: #0e2249;
    --p-200: #123068;
    --p-300: #163e88;
    --p-400: #1c4fac;
    --p-500: #60a5fa;
    --p-600: #93c5fd;
    --p-700: #bfdbfe;
    --p-800: #dbeafe;
    --p-900: #eff6ff;

    --a-50:  #2b2306;
    --a-100: #3d310a;
    --a-500: #eab308;
    --a-600: #facc15;
    --a-700: #fde047;

    --ok-50:   #0f2318;
    --ok-100:  #163726;
    --ok-500:  #4ade80;
    --ok-600:  #86efac;
    --ok-700:  #bbf7d0;

    --warn-50:  #2a1d08;
    --warn-100: #3d2b0d;
    --warn-500: #fbbf24;
    --warn-600: #fcd34d;
    --warn-700: #fde68a;

    --err-50:   #2a1212;
    --err-100:  #3d1919;
    --err-500:  #f87171;
    --err-600:  #fca5a5;
    --err-700:  #fecaca;

    --info-50:  #0c1f2e;
    --info-100: #123044;
    --info-500: #38bdf8;
    --info-700: #7dd3fc;

    /* الأدوار تُكتب صراحةً لا اشتقاقًا: في الداكن يعلو السطح فوق اللوح،
       وهو عكس ترتيب الفاتح تمامًا. */
    --canvas:         #0b1220;
    --surface:        #121a2c;
    --surface-sunken: #0f1729;
    --surface-raised: #182238;
    --surface-inset:  #16213a;

    --line:        #24344f;
    --line-soft:   #1c2942;
    --line-strong: #34455f;

    --text:        #eef2f8;
    --text-2:      #c3cddb;
    --text-muted:  #93a1b5;
    --text-faint:  #6f7d92;
    --text-invert: #0b1220;

    --accent:      var(--p-500);
    --accent-hover:var(--p-600);
    --accent-soft: rgba(96, 165, 250, .14);
    --accent-line: rgba(96, 165, 250, .3);

    --surface-veil: rgba(11, 18, 32, .82);
    --scrim:        rgba(0, 0, 0, .6);
    --overlay-soft: rgba(255, 255, 255, .07);
    --overlay-chip: rgba(0, 0, 0, .72);

    /* القاعة المركّزة في الداكن: أعمق درجة على المنصة كلها */
    --d-950: #070c15;
    --d-900: #0b1220;
    --d-800: #121a2c;
    --d-700: #182238;
    --d-600: #263252;
    --d-line: #24344f;
    --d-line-soft: #1c2942;
    --d-text: #eef2f8;
    --d-text-2: #c3cddb;
    --d-muted: #93a1b5;

    /* الظل لا يُقرأ على سطح داكن؛ يعوّضه سواد أعمق وحدّ أوضح */
    --sh-1: none;
    --sh-2: 0 1px 3px -1px rgba(0, 0, 0, .5);
    --sh-3: 0 10px 24px -14px rgba(0, 0, 0, .6);
    --sh-4: 0 18px 38px -20px rgba(0, 0, 0, .7);
    --sh-ring: 0 0 0 3px rgba(96, 165, 250, .28);
}

/* ══════════════════════════════════════════
   أقسام الحبر: داكنة في الوضعين
   ══════════════════════════════════════════
   إعادة ضبط السلّم داخل هذه الأقسام تُبقي قواعدها كما كُتبت.
   المتغيّرات المشتقّة (‎--surface‎ و‎--text‎ …) حُسِبت على الجذر،
   فلا تتأثر بهذا الضبط — والبطاقة الفاتحة داخل ترويسة داكنة
   تظل تتبع السمة كما يجب.
*/

.ink,
.course-hero,
.steps-hero,
.site-footer {
    color-scheme: dark;

    --n-0:   #ffffff;
    --n-25:  #fcfdfe;
    --n-50:  #f8fafc;
    --n-100: #f1f5f9;
    --n-200: #e2e8f0;
    --n-300: #cbd5e1;
    --n-400: #94a3b8;
    --n-500: #64748b;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1e293b;
    --n-900: #0f172a;
    --n-950: #020617;

    --p-50:  #f5f9ff;
    --p-100: #eff6ff;
    --p-200: #dbeafe;
    --p-300: #bfdbfe;
    --p-400: #93c5fd;
    --p-500: #60a5fa;
    --p-600: #3b82f6;
    --p-700: #2563eb;

    --a-500: #ca8a04;
}