/**
 * LearnSimply — Design Tokens
 * ============================
 * المصدر الوحيد لكل قيم التصميم في الموقع.
 *
 * كل قيمة هنا مستخرجة من الـ CSS الموجود فعلًا (61,153 سطر) بناءً على
 * عدد الاستخدامات — مش اختيارات جديدة. الرقم اللي جنب كل توكن هو عدد
 * المرات اللي القيمة دي (أو أقرب لون ليها) اتكتبت فيها بالإيد.
 *
 * قاعدة: أي CSS جديد يستخدم var(--ls-*) فقط. ممنوع hex جديد.
 */

:root {
	/* ─── الأسطح: سُلّم الارتفاع في الوضع الداكن ─────────────────────
	   4 مستويات. كل خطوة أفتح شوية = أقرب للمستخدم.              */
	--ls-bg:            #0a0f1a;   /* خلفية الصفحة (الأعمق)      ~35x */
	--ls-surface:       #141924;   /* الكروت والصناديق           ~70x */
	--ls-surface-2:     #1b2133;   /* سطح مرتفع / hover          ~60x */
	--ls-surface-3:     #232d45;   /* الأعلى / حقول الإدخال      ~20x */

	/* ─── هوية العلامة ──────────────────────────────────────────── */
	--ls-blue:          #4077f3;   /* اللون الأساسي             235x */
	--ls-blue-hover:    #5a8eff;   /* أفتح — hover               19x */
	--ls-blue-active:   #3568d4;   /* أغمق — ضغط                 68x */
	--ls-blue-soft:     rgba(64, 119, 243, 0.12);  /* خلفية خفيفة   */

	/* الأزرق كـ*خلفية* تحت نص أبيض — دور منفصل عن لون الهوية.
	   --ls-blue نفسه بيدي 4.08:1 مع الأبيض، وده راسب في WCAG AA (المطلوب 4.5).
	   القيم دي مستخدمة في الكود بالفعل، والأزرار اللي شغالة بيها دلوقتي ناجحة.
	   الهوية متغيرتش: --ls-blue لسه لون النص والحدود واللمسات (4.70:1 على الخلفية الداكنة). */
	--ls-blue-cta:       #3566d9;   /* 5.18:1 على أبيض */
	--ls-blue-cta-hover: #2a57bf;   /* 6.53:1 على أبيض */
	--ls-blue-glow:     rgba(64, 119, 243, 0.22);  /* توهج/ظل       */

	/* ─── النص: 4 مستويات وضوح ──────────────────────────────────── */
	--ls-text:          #ffffff;   /* عناوين ونص أساسي          344x */
	--ls-text-2:        #e2e6f0;   /* نص ثانوي                   99x */
	--ls-text-muted:    #999eb2;   /* وصف / تسميات              194x */
	--ls-text-dim:      #7a7f96;   /* أقل أهمية                  26x */

	/* ─── الحدود ────────────────────────────────────────────────── */
	--ls-border:        rgba(255, 255, 255, 0.08);  /* الافتراضي  ~140x */
	--ls-border-soft:   rgba(255, 255, 255, 0.05);  /* خفيف        80x */
	--ls-border-strong: rgba(255, 255, 255, 0.14);  /* واضح           */

	/* ─── ألوان الحالة ──────────────────────────────────────────── */
	--ls-success:       #18a963;   /* نجاح / مكتمل               21x */
	--ls-danger:        #f96a7b;   /* خطأ / تحذير                33x */
	--ls-warning:       #ffbb54;   /* تنبيه                      19x */
	--ls-star:          #ffce31;   /* نجوم التقييم               19x */
	--ls-accent:        #c27aff;   /* لمسة بنفسجية               10x */

	/* ─── الخط ──────────────────────────────────────────────────── */
	--ls-font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, sans-serif;

	/* سُلّم مقاسات: 8 مقاسات بدل 53. النسبة ~1.25 */
	--ls-text-xs:   12px;   /* تسميات صغيرة            126x */
	--ls-text-sm:   14px;   /* النص الافتراضي          404x */
	--ls-text-base: 16px;   /* نص أساسي / أزرار        379x */
	--ls-text-lg:   18px;   /* نص بارز                 208x */
	--ls-text-xl:   20px;   /* عنوان صغير              161x */
	--ls-text-2xl:  24px;   /* عنوان قسم فرعي           73x */
	--ls-text-3xl:  32px;   /* عنوان قسم                39x */
	--ls-text-4xl:  48px;   /* عنوان رئيسي / hero       19x */

	/* أوزان: 4 بدل 8 */
	--ls-weight-normal:   400;   /* 131x */
	--ls-weight-medium:   500;   /* 221x */
	--ls-weight-semibold: 600;   /* 226x */
	--ls-weight-bold:     700;   /* 128x */

	--ls-leading-tight:  1.2;    /* للعناوين  */
	--ls-leading-normal: 1.6;    /* للنص      */
	--ls-leading-loose:  1.9;    /* لفقرات RTL طويلة */

	/* ─── المسافات: سُلّم 4px، 8 خطوات بدل 44 قيمة ──────────────── */
	--ls-space-1:  4px;
	--ls-space-2:  8px;    /* 141x */
	--ls-space-3:  12px;   /* 123x */
	--ls-space-4:  16px;   /* 163x */
	--ls-space-5:  20px;   /* 310x — الأكثر استخدامًا */
	--ls-space-6:  24px;   /*  65x */
	--ls-space-8:  32px;   /*  52x */
	--ls-space-10: 40px;   /*  32x */
	--ls-space-12: 48px;
	--ls-space-16: 64px;

	/* ─── الاستدارة: 6 قيم بدل 41 ───────────────────────────────── */
	/* المقاسات دي هي اللي الأنظمة القديمة بتستخدمها فعلًا، عشان الربط
	   يبقى مطابق بالظبط من غير أي تغيير بصري. */
	--ls-radius-sm:   8px;     /* شارات صغيرة    23x */
	--ls-radius:      10px;    /* الافتراضي     148x */
	--ls-radius-md:   16px;    /* أزرار وكروت    34x */
	--ls-radius-lg:   20px;    /* كروت كبيرة     89x */
	--ls-radius-xl:   30px;    /* أقسام          45x */
	--ls-radius-full: 999px;   /* دائري          17x */
	/* لسه موجود في الكود وهيتلم في خطوة لاحقة: 12px, 14px, 15px, 24px, 40px */

	/* ─── الظلال: 4 بدل 127 ─────────────────────────────────────── */
	--ls-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.20);
	--ls-shadow:      0 4px 16px rgba(0, 0, 0, 0.28);
	--ls-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.36);
	--ls-shadow-blue: 0 8px 28px var(--ls-blue-glow);   /* لأزرار الـ CTA */

	/* ─── الحركة: 3 بدل 9 ───────────────────────────────────────── */
	--ls-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--ls-duration-fast: 0.2s;    /*  50x */
	--ls-duration:      0.3s;    /* 122x */
	--ls-duration-slow: 0.5s;

	/* ─── التخطيط ───────────────────────────────────────────────── */
	--ls-container:     1200px;
	--ls-header-height: 80px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ls-duration-fast: 0.01ms;
		--ls-duration:      0.01ms;
		--ls-duration-slow: 0.01ms;
	}
}