/* ===================================================================
   لوي بلس — طبقة الرموز
   المصدر الوحيد للألوان والمقاسات. لا رقم لوني ولا قياس مكتوب
   بيده في أي ملف آخر.

   ثلاث قواعد تحكم كل ما تحت:

   1. أزواج سطح/نص. كل رمز سطح يقابله رمز -foreground للنص فوقه.
      التباين يصير مضموناً بالبنية لا بالانتباه: من يستخدم
      --surface يأخذ معه --surface-foreground فلا يخطئ.

   2. لا letter-spacing على النص العربي أبداً. العربية حروف متصلة،
      وتباعد الأحرف يفكّ اتصالها فتبدو مكسورة. يُسمح به على
      الأرقام والنص اللاتيني فقط.

   3. منطقي لا اتجاهي. inset-inline-start لا left. الواجهة عربية
      اليوم، والقاعدة تجعلها تصلح لاتينية غداً بلا إعادة كتابة.

   كل نسبة تباين مذكورة في التعليقات محسوبة بمعادلة WCAG 2.1.
   =================================================================== */

:root {
  color-scheme: light;

  /* ---------- الأسطح ونصوصها ---------- */
  --bg:                     #fcfcfd;   /* أبيض دافئ لمساحة العمل */
  --bg-foreground:          #0c0c11;   /* 19.4:1  */
  --surface:                #ffffff;
  --surface-foreground:     #0c0c11;
  --surface-2:              #f6f6f8;   /* تظليل خفيف: رؤوس الجداول، الحقول المعطّلة */
  --surface-3:              #ededf1;
  --sidebar:                #f4f2fa;
  --sidebar-foreground:     #0c0c11;
  --sidebar-hover:          #ebe8f5;
  --sidebar-active:         #ffffff;
  --card-tint:              #fbfaff;

  --muted-foreground:       #5a5f6e;   /* 6.37:1 على السطح */
  --faint-foreground:       #646979;   /* 5.47:1 على السطح · 4.90:1 على surface-2 */

  /* ---------- العلامة ----------
     قيمة واحدة تنهي ازدواج #5b5bd6 (اللوحة) و#5f4ee8 (التسويق).
     اخترنا الأهدأ: اللوحة تُحدَّق فيها ساعات، والتسويق يُمَرّ عليه. */
  --brand:                  #5b5bd6;   /* 5.37:1 على الأبيض */
  --brand-foreground:       #ffffff;   /* 5.37:1 فوق الزر */
  --brand-hover:            #4b4bc4;
  --brand-active:           #4040b0;
  --brand-soft:             #eeeeff;
  --brand-soft-foreground:  #5b5bd6;   /* 4.68:1 */
  --brand-line:             #d9d9fb;
  --brand-tint:             #7a6ff0;   /* للتدرجات الترويجية فقط */

  /* ---------- دلالية — منفصلة عن لون العلامة ---------- */
  --ok:                     #1f6b4d;   /* 6.42:1 */
  --ok-soft:                #e8f4ee;   /* 5.69:1 */
  --ok-foreground:          #ffffff;
  --warn:                   #8a5a10;   /* 5.91:1 */
  --warn-soft:              #fdf2e0;   /* 5.34:1 */
  --danger:                 #b02a24;   /* 6.56:1 */
  --danger-soft:            #fceceb;   /* 5.73:1 */
  --danger-foreground:      #ffffff;   /* 6.56:1 */

  /* ---------- الحدود ----------
     border-strong للعناصر التفاعلية: المعيار يوجب 3:1 لحدود
     عناصر التحكم، وهو ما كان راسباً قبل هذه الطبقة. */
  --border:                 #e7e7ec;
  --border-strong:          #8e90a3;   /* 3.15:1 على الأبيض */
  --ring:                   #5b5bd6;
  --ring-shadow:            rgba(91, 91, 214, .22);

  /* ---------- بيانات ----------
     ألوان الرسوم لا تُشتق من لون العلامة: لو تغيّرت الهوية غداً
     تبقى الرسوم مقروءة، ولا يُقرأ عمودٌ ملوّنٌ بلون العلامة
     كأنه «العنصر المختار». */
  --chart-1:                #5b5bd6;
  --chart-2:                #2f8f83;
  --chart-3:                #b8791f;
  --chart-4:                #a4508f;
  --chart-5:                #3c6ea5;
  --chart-grid:             #e9e9f1;

  /* ---------- التباعد — أساس 4 ----------
     القيم القديمة (10 · 11 · 14 · 16 · 18 · 20) كانت تدور حول
     هذا السلّم أصلاً، فالانتقال تقريبٌ لا إعادة تصميم. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---------- نصف القطر — مشتق من أساس واحد ---------- */
  --radius:     10px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* ---------- الطباعة — ثماني درجات بدل 33 حجماً يدوياً ---------- */
  --text-2xs:  .6875rem;   /* 11px  */
  --text-xs:   .78rem;     /* 12.5  */
  --text-sm:   .84rem;     /* 13.5  */
  --text-base: .9375rem;   /* 15    */
  --text-lg:   1.06rem;    /* 17    */
  --text-xl:   1.25rem;    /* 20    */
  --text-2xl:  1.56rem;    /* 25    */
  --text-3xl:  1.94rem;    /* 31    */

  --leading-tight: 1.35;   /* العناوين */
  --leading-snug:  1.55;
  --leading-body:  1.7;    /* العربية تحتاج سطراً أوسع من اللاتينية */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --font: 'Plex Arabic', -apple-system, BlinkMacSystemFont,
          'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- الظلال — بميل بنفسجي لا رمادي محايد ---------- */
  /* الظلال للطبقات العائمة فقط — الحوار والقائمة والنافذة المنبثقة.
     الأسطح الثابتة تُفصَل بحدّ شعري وتباعد، لا بضباب رمادي تحتها. */
  --shadow-sm: 0 1px 2px rgba(12, 12, 17, .05);
  --shadow:    0 4px 12px -2px rgba(12, 12, 17, .08), 0 2px 6px -2px rgba(12, 12, 17, .05);
  --shadow-lg: 0 16px 48px -12px rgba(12, 12, 17, .22), 0 4px 12px -4px rgba(12, 12, 17, .08);

  /* ---------- الحركة ----------
     رموز تجعل إيقاع كل الانتقالات واحداً. --ease منحنى خروج
     سريع البداية بطيء النهاية: يبدو استجابةً لا تأخيراً. */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;
  --ease:       cubic-bezier(.2, .8, .2, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ---------- التخطيط ---------- */
  --sidebar-width:      252px;
  --sidebar-width-icon:  60px;
  --main-max:          1400px;
  --header-h:            64px;
  --z-sticky:  20;
  --z-sidebar: 80;
  --z-sheet:   90;
  --z-toast:  100;
  --z-dialog: 120;
}

/* ===================================================================
   الوضع الداكن

   ثلاث حالات لا اثنتان: الافتراضي بلا وسم (يقرّره النظام)،
   واختيار صريح للفاتح، واختيار صريح للداكن. لذلك تتكرّر الكتلة
   مرتين: مرة تحت prefers-color-scheme محروسة بـ :not([data-theme="light"])
   حتى يغلب اختيار المستخدم نظامَه، ومرة تحت [data-theme="dark"]
   حتى يغلب اختياره في الاتجاه الآخر.

   لا يُعرَّف أي لون هنا لأول مرة — رموز فقط. أي لون تعريفه
   الوحيد داخل هذه الكتلة يعني نصاً بلون ثيم فوق أرضية ثيم آخر.
   =================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:                     #0b0b0f;
    --bg-foreground:          #ececf1;
    --surface:                #0b0b0f;
    --surface-foreground:     #ececf1;
    --surface-2:              #16161c;
    --surface-3:              #1f1f27;
    --sidebar:                #13111b;
    --sidebar-foreground:     #ececf1;
    --sidebar-hover:          #201d2b;
    --sidebar-active:         #282438;
    --card-tint:              #111017;

    --muted-foreground:       #a3a6b3;   /* 7.36:1 */
    --faint-foreground:       #8b8e9c;   /* 5.48:1 */

    --brand:                  #a3a3f5;   /* 7.75:1 */
    --brand-foreground:       #101014;   /* 8.24:1 */
    --brand-hover:            #b6b6f8;
    --brand-active:           #c6c6fa;
    --brand-soft:             #24243a;
    --brand-soft-foreground:  #b6b6f8;
    --brand-line:             #33334f;
    --brand-tint:             #8f83ef;

    --ok:                     #5fc596;   /* 8.42:1 */
    --ok-soft:                #17291f;
    --ok-foreground:          #0d1a13;
    --warn:                   #d9a441;   /* 7.93:1 */
    --warn-soft:              #2b2213;
    --danger:                 #e58a80;   /* 7.04:1 */
    --danger-soft:            #2e1a18;
    --danger-foreground:      #1a0e0d;

    --border:                 #24242c;
    --border-strong:          #65657a;   /* 3.14:1 */
    --ring:                   #a3a3f5;
    --ring-shadow:            rgba(163, 163, 245, .26);

    --chart-1:                #9a9af0;
    --chart-2:                #5cbfae;
    --chart-3:                #d8a24e;
    --chart-4:                #cf8ec0;
    --chart-5:                #7aa8d6;
    --chart-grid:             #262630;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow:    0 4px 12px -2px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, .85), 0 4px 12px -4px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:                     #0b0b0f;
  --bg-foreground:          #ececf1;
  --surface:                #0b0b0f;
  --surface-foreground:     #ececf1;
  --surface-2:              #16161c;
  --surface-3:              #1f1f27;
  --sidebar:                #13111b;
  --sidebar-foreground:     #ececf1;
  --sidebar-hover:          #201d2b;
  --sidebar-active:         #282438;
  --card-tint:              #111017;

  --muted-foreground:       #a3a6b3;
  --faint-foreground:       #8b8e9c;

  --brand:                  #a3a3f5;
  --brand-foreground:       #101014;
  --brand-hover:            #b6b6f8;
  --brand-active:           #c6c6fa;
  --brand-soft:             #24243a;
  --brand-soft-foreground:  #b6b6f8;
  --brand-line:             #33334f;
  --brand-tint:             #8f83ef;

  --ok:                     #5fc596;
  --ok-soft:                #17291f;
  --ok-foreground:          #0d1a13;
  --warn:                   #d9a441;
  --warn-soft:              #2b2213;
  --danger:                 #e58a80;
  --danger-soft:            #2e1a18;
  --danger-foreground:      #1a0e0d;

  --border:                 #24242c;
  --border-strong:          #65657a;
  --ring:                   #a3a3f5;
  --ring-shadow:            rgba(163, 163, 245, .26);

  --chart-1:                #9a9af0;
  --chart-2:                #5cbfae;
  --chart-3:                #d8a24e;
  --chart-4:                #cf8ec0;
  --chart-5:                #7aa8d6;
  --chart-grid:             #262630;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow:    0 4px 12px -2px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, .85), 0 4px 12px -4px rgba(0, 0, 0, .6);
}

/* ===================================================================
   أسماء الإصدار السابق

   app.css و marketing.css و design.js تستعمل أسماء قديمة في مئات
   المواضع. تحويلها كلها دفعة واحدة تغييرٌ ضخم بلا مكسب؛ بدل ذلك
   نجعل الاسم القديم اسماً مستعاراً للجديد. مصدر القيمة واحد،
   والملفات القديمة تعمل كما هي، والجديد يُكتب بالأسماء الجديدة.
   =================================================================== */
:root {
  --text:          var(--surface-foreground);
  --text-dim:      var(--muted-foreground);
  --text-faint:    var(--faint-foreground);
  --accent:        var(--brand);
  --accent-hover:  var(--brand-hover);
  --accent-soft:   var(--brand-soft);
  --accent-line:   var(--brand-line);
  --accent-text:   var(--brand-foreground);

  /* التسويق: نفس المصدر، فلا تنفصل هوية الصفحة العامة عن اللوحة */
  --mk-bg:           var(--bg);
  --mk-soft:         var(--surface-2);
  --mk-soft-2:       var(--surface-3);
  --mk-ink:          var(--surface-foreground);
  --mk-muted:        var(--muted-foreground);
  --mk-line:         var(--border);
  --mk-primary:      var(--brand);
  --mk-primary-2:    var(--brand-tint);
  --mk-primary-soft: var(--brand-soft);
  --mk-green:        var(--ok);
  --mk-green-soft:   var(--ok-soft);
  --mk-radius:       var(--radius-xl);
  --mk-shadow:       var(--shadow-lg);
}