/* ============================================================================
   ROEIA ACADEMY — DESIGN TOKENS
   نظام رموز التصميم · قابل لإعادة العلامة التجارية بالكامل
   ----------------------------------------------------------------------------
   طبقتان:
     1. PRIMITIVES  — اللوحة الخام. العميل يغيّر هذه فقط.
     2. SEMANTIC    — ما تستخدمه المكوّنات. لا تُلمس عند إعادة العلامة.

   قاعدة صارمة: صفر قيمة لونية أو مقاس مكتوب داخل CSS المكوّنات.
   كل شيء var(--rlms-*).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. PRIMITIVES — الطبقة القابلة للاستبدال
   ---------------------------------------------------------------------------- */
:root {

  /* --- الحياد الدافئ ---------------------------------------------------------
     ليس رماديًا نقيًا. درجة حرارة خفيفة (تدرّج ~35°، تشبّع 3–6%) تجعل الأسطح
     تُقرأ كورق مطبوع لا كصندوق Bootstrap. الفرق غير واعٍ لكنه هو الفارق
     بين "مصمَّم" و"افتراضي".                                                  */
  --rlms-ink-0:    #FFFFFF;
  --rlms-ink-25:   #FCFBFA;
  --rlms-ink-50:   #F8F7F5;
  --rlms-ink-100:  #F1EFEC;
  --rlms-ink-200:  #E4E1DC;
  --rlms-ink-300:  #CFCBC4;
  --rlms-ink-400:  #ADA89F;
  --rlms-ink-500:  #8A857B;
  --rlms-ink-600:  #6B6760;
  --rlms-ink-700:  #514E48;
  --rlms-ink-800:  #3A3833;
  --rlms-ink-900:  #262421;
  --rlms-ink-950:  #171614;

  /* --- العلامة: بترولي عميق -------------------------------------------------
     ليس أزرق #2563eb ولا بنفسجي #6366f1 — الافتراضيّين اللذين يُعلنان
     "قالب جاهز". البترولي مكمّل بصريًا للحياد الدافئ، ونادر في التعليم
     الإلكتروني (المشبع بالأزرق والبرتقالي)، ويصمد في الفاتح والداكن.
     ← هذا هو السُّلّم الوحيد الذي يغيّره العميل.                              */
  --rlms-brand-50:   #F0F7F6;
  --rlms-brand-100:  #DCEDEB;
  --rlms-brand-200:  #BADDD8;
  --rlms-brand-300:  #8AC4BC;
  --rlms-brand-400:  #52A69C;
  --rlms-brand-500:  #2A8C81;
  --rlms-brand-600:  #147068;   /* ← الأساسي */
  --rlms-brand-700:  #105C55;
  --rlms-brand-800:  #0D4A45;
  --rlms-brand-900:  #0A3B37;
  --rlms-brand-950:  #062522;

  /* --- الدلالات --------------------------------------------------------------
     كلها مسحوبة نحو الدفء لتنتمي للوحة. أحمر #B3402F لا #EF4444.             */
  --rlms-green-100: #DFEEE3;  --rlms-green-600: #2E7D4F;  --rlms-green-800: #1E5636;
  --rlms-amber-100: #F7ECD8;  --rlms-amber-600: #B4741A;  --rlms-amber-800: #7D4F10;
  --rlms-red-100:   #F7E2DE;  --rlms-red-600:   #B3402F;  --rlms-red-800:   #7E2B1E;

  /* --- الطباعة ---------------------------------------------------------------
     IBM Plex Sans Arabic — مصمَّم بواسطة IBM مع بوتروس. اختيار مسبوك من
     مسبك حقيقي، بثمانية أوزان وعناية بصرية فعلية.
     تجنّبنا Cairo عمدًا: هو "Inter العربية" — مستهلك لدرجة أنه يُعلن
     عن نفسه كخيار افتراضي.

     Plex Mono للبيانات الوصفية (المدد، الأسعار، الأعداد) — توقيع المنتجات
     الهندسية المصمَّمة جيدًا، ويصمد بعد أي إعادة تلوين.                        */
  --rlms-font-display: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --rlms-font-body:    "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --rlms-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- سلّم الحجم ------------------------------------------------------------
     ليس نسبة رياضية نقية. مضبوط يدويًا: أضيق عند أحجام النص، أوسع عند
     العرض. السلالم النقية تبدو حسابية؛ المضبوطة تبدو مصمَّمة.                 */
  --rlms-text-2xs:  0.6875rem;  /* 11 */
  --rlms-text-xs:   0.75rem;    /* 12 */
  --rlms-text-sm:   0.8125rem;  /* 13 */
  --rlms-text-md:   0.875rem;   /* 14 */
  --rlms-text-base: 1rem;       /* 16 */
  --rlms-text-lg:   1.125rem;   /* 18 */
  --rlms-text-xl:   1.375rem;   /* 22 */
  --rlms-text-2xl:  1.75rem;    /* 28 */
  --rlms-text-3xl:  2.25rem;    /* 36 */
  --rlms-text-4xl:  3rem;       /* 48 */
  --rlms-text-5xl:  3.875rem;   /* 62 */

  /* --- ارتفاع السطر ----------------------------------------------------------
     ❗ العربية تحتاج تباعدًا أكبر من اللاتينية. المحارف المتصلة والتشكيل
     والنزلات تحتاج مجالًا. 1.75 للعربية مقابل 1.6 للاتينية.
     خلطهما في رمز واحد خطأ شائع يجعل النص العربي مزدحمًا.                    */
  --rlms-leading-none:    1;
  --rlms-leading-display: 1.15;
  --rlms-leading-heading: 1.35;
  --rlms-leading-body-ar: 1.75;
  --rlms-leading-body-en: 1.6;
  --rlms-leading-relaxed: 1.9;

  /* --- التتبّع ----------------------------------------------------------------
     ❗❗ العربية لا تأخذ letter-spacing إطلاقًا — يفصل المحارف المتصلة
     ويكسر الكلمة بصريًا. هذه الرموز للاتينية والأرقام فقط.
     [dir="rtl"] يصفّرها قسرًا في الطبقة الدلالية أدناه.                       */
  --rlms-tracking-tight:  -0.02em;
  --rlms-tracking-snug:   -0.01em;
  --rlms-tracking-normal:  0;
  --rlms-tracking-wide:    0.04em;
  --rlms-tracking-caps:    0.08em;

  /* --- الأوزان --------------------------------------------------------------- */
  --rlms-weight-light:    300;
  --rlms-weight-normal:   400;
  --rlms-weight-medium:   500;
  --rlms-weight-semibold: 600;
  --rlms-weight-bold:     700;

  /* --- الفراغ ---------------------------------------------------------------- */
  --rlms-space-px:  1px;
  --rlms-space-1:   0.25rem;
  --rlms-space-2:   0.5rem;
  --rlms-space-3:   0.75rem;
  --rlms-space-4:   1rem;
  --rlms-space-5:   1.25rem;
  --rlms-space-6:   1.5rem;
  --rlms-space-8:   2rem;
  --rlms-space-10:  2.5rem;
  --rlms-space-12:  3rem;
  --rlms-space-16:  4rem;
  --rlms-space-20:  5rem;
  --rlms-space-24:  6rem;
  --rlms-space-32:  8rem;

  /* --- الاستدارة -------------------------------------------------------------
     مضبوطة. الاستدارات الكبيرة (16–24px) تُقرأ "SaaS ودود" — وهي التوقيع
     البصري الأول لتصميم آلي. المنتجات المصقولة تبقى تحت 12px.                 */
  --rlms-radius-xs:   3px;
  --rlms-radius-sm:   5px;
  --rlms-radius-md:   8px;
  --rlms-radius-lg:   11px;
  --rlms-radius-xl:   16px;
  --rlms-radius-full: 9999px;

  /* --- الظلال ---------------------------------------------------------------
     مصبوغة بالحبر لا بالأسود النقي، متعددة الطبقات، إزاحات صغيرة.
     الوهج الكبير الناعم الملوّن = علامة تصميم آلي.                            */
  --rlms-shadow-xs: 0 1px 2px -1px rgb(23 22 20 / .09);
  --rlms-shadow-sm: 0 1px 2px rgb(23 22 20 / .05), 0 2px 6px -2px rgb(23 22 20 / .08);
  --rlms-shadow-md: 0 2px 4px rgb(23 22 20 / .04), 0 6px 14px -4px rgb(23 22 20 / .10);
  --rlms-shadow-lg: 0 4px 8px rgb(23 22 20 / .04), 0 16px 32px -8px rgb(23 22 20 / .13);
  --rlms-shadow-xl: 0 8px 16px rgb(23 22 20 / .05), 0 28px 56px -12px rgb(23 22 20 / .18);

  /* --- الحركة ---------------------------------------------------------------
     منحنيات مخصصة. ease-in-out الافتراضي يُقرأ ميكانيكيًا.                    */
  --rlms-ease:       cubic-bezier(.32, .72, 0, 1);
  --rlms-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --rlms-ease-snap:  cubic-bezier(.5, 1.4, .6, 1);
  --rlms-dur-fast:   120ms;
  --rlms-dur-base:   200ms;
  --rlms-dur-slow:   340ms;

  /* --- الطبقات --------------------------------------------------------------- */
  --rlms-z-base: 0; --rlms-z-sticky: 100; --rlms-z-drawer: 200;
  --rlms-z-modal: 300; --rlms-z-toast: 400;

  /* --- القياسات -------------------------------------------------------------- */
  --rlms-container:   1200px;
  --rlms-container-narrow: 760px;
  --rlms-measure:     68ch;   /* أقصى عرض للنص المقروء */
  --rlms-header-h:    64px;
  --rlms-border-hair: 1px;
}


/* ----------------------------------------------------------------------------
   2. SEMANTIC — ما تستخدمه المكوّنات · لا يُلمس عند إعادة العلامة
   ---------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --rlms-bg:              var(--rlms-ink-50);
  --rlms-bg-subtle:       var(--rlms-ink-100);
  --rlms-surface:         var(--rlms-ink-0);
  --rlms-surface-raised:  var(--rlms-ink-0);
  --rlms-surface-sunken:  var(--rlms-ink-100);
  --rlms-surface-inverse: var(--rlms-ink-950);

  --rlms-text:            var(--rlms-ink-900);
  --rlms-text-secondary:  var(--rlms-ink-700);
  --rlms-text-muted:      var(--rlms-ink-500);
  --rlms-text-faint:      var(--rlms-ink-400);
  /* النصّ النائب في الحقول: نصّ يُقرأ فعلًا لا زخرفة، فيلزمه 4.5:1.
     ink-500 يعطي 3.67:1 على سطح أبيض — راسب. ink-600 يعطي 5.62:1. */
  --rlms-text-placeholder: var(--rlms-ink-600);
  --rlms-text-inverse:    var(--rlms-ink-50);
  --rlms-text-on-brand:   #FFFFFF;

  --rlms-border:          var(--rlms-ink-200);
  --rlms-border-strong:   var(--rlms-ink-300);
  --rlms-border-subtle:   var(--rlms-ink-100);

  --rlms-brand:           var(--rlms-brand-600);
  --rlms-brand-hover:     var(--rlms-brand-700);
  --rlms-brand-active:    var(--rlms-brand-800);
  --rlms-brand-subtle:    var(--rlms-brand-50);
  --rlms-brand-border:    var(--rlms-brand-200);
  --rlms-brand-text:      var(--rlms-brand-700);

  --rlms-success:         var(--rlms-green-600);
  --rlms-success-subtle:  var(--rlms-green-100);
  --rlms-success-text:    var(--rlms-green-800);
  --rlms-warning:         var(--rlms-amber-600);
  --rlms-warning-subtle:  var(--rlms-amber-100);
  --rlms-warning-text:    var(--rlms-amber-800);
  --rlms-danger:          var(--rlms-red-600);
  --rlms-danger-subtle:   var(--rlms-red-100);
  --rlms-danger-text:     var(--rlms-red-800);

  --rlms-focus-ring:      0 0 0 3px color-mix(in srgb, var(--rlms-brand) 22%, transparent);
  --rlms-overlay:         rgb(23 22 20 / .48);
}

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

  /* ليس أسود نقيًا. #121110 يحتفظ بالحرارة ويمنع الهالة حول النص. */
  --rlms-bg:              #121110;
  --rlms-bg-subtle:       #1A1917;
  --rlms-surface:         #1C1B19;
  --rlms-surface-raised:  #232220;
  --rlms-surface-sunken:  #0E0D0C;
  --rlms-surface-inverse: var(--rlms-ink-50);

  --rlms-text:            #EDEAE5;
  --rlms-text-secondary:  #BDB8B0;
  --rlms-text-muted:      #8D8880;
  --rlms-text-faint:      #656059;
  --rlms-text-placeholder: #A19C93;
  --rlms-text-inverse:    var(--rlms-ink-950);
  --rlms-text-on-brand:   #04211E;

  --rlms-border:          #302E2B;
  --rlms-border-strong:   #423F3B;
  --rlms-border-subtle:   #242220;

  /* في الداكن نصعد درجتين — الألوان الغامقة تنهار على خلفية غامقة. */
  --rlms-brand:           var(--rlms-brand-400);
  --rlms-brand-hover:     var(--rlms-brand-300);
  --rlms-brand-active:    var(--rlms-brand-200);
  --rlms-brand-subtle:    #10302D;
  --rlms-brand-border:    #1D4A45;
  --rlms-brand-text:      var(--rlms-brand-300);

  --rlms-success:         #55B37A;
  --rlms-success-subtle:  #14301F;
  --rlms-success-text:    #8FD1A8;
  --rlms-warning:         #D89A3E;
  --rlms-warning-subtle:  #322414;
  --rlms-warning-text:    #E8BE7C;
  --rlms-danger:          #D96A56;
  --rlms-danger-subtle:   #351B16;
  --rlms-danger-text:     #E9A091;

  --rlms-focus-ring:      0 0 0 3px color-mix(in srgb, var(--rlms-brand) 30%, transparent);
  --rlms-overlay:         rgb(0 0 0 / .68);

  /* الظلال شبه بلا معنى في الداكن — نعتمد الحدود ونخفّف الظل. */
  --rlms-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --rlms-shadow-md: 0 4px 12px rgb(0 0 0 / .38);
  --rlms-shadow-lg: 0 12px 32px rgb(0 0 0 / .46);
  --rlms-shadow-xl: 0 24px 56px rgb(0 0 0 / .55);
}


/* ----------------------------------------------------------------------------
   3. الاتجاه — منطق ثنائي النص
   ---------------------------------------------------------------------------- */

/* ❗ إبطال التتبّع قسرًا في العربية. أي letter-spacing يفكّك المحارف المتصلة. */
[dir="rtl"] {
  --rlms-tracking-tight:  0;
  --rlms-tracking-snug:   0;
  --rlms-tracking-wide:   0;
  --rlms-tracking-caps:   0;
  --rlms-leading-body:    var(--rlms-leading-body-ar);
}
[dir="ltr"] {
  --rlms-leading-body:    var(--rlms-leading-body-en);
}

/* حاوية محتوى بلغة مخالفة للواجهة (كورس إنجليزي داخل واجهة عربية).
   تستعيد التتبّع اللاتيني داخل الجزيرة فقط. */
[dir="rtl"] [dir="ltr"],
[lang="en"] {
  --rlms-tracking-tight: -0.02em;
  --rlms-tracking-snug:  -0.01em;
  --rlms-tracking-wide:   0.04em;
  --rlms-tracking-caps:   0.08em;
  --rlms-leading-body:    var(--rlms-leading-body-en);
}


/* ----------------------------------------------------------------------------
   4. الأساسيات
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rlms-bg);
  color: var(--rlms-text);
  font-family: var(--rlms-font-body);
  font-size: var(--rlms-text-base);
  line-height: var(--rlms-leading-body);
  font-weight: var(--rlms-weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* الأرقام جدولية دائمًا — الأسعار والمدد والدرجات يجب أن تصطف عموديًا.
   تفصيلة صغيرة، لكن غيابها هو ما يجعل الجداول تبدو غير مصقولة. */
.rlms-num,
[data-numeric] {
  font-family: var(--rlms-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--rlms-tracking-snug);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--rlms-brand);
  outline-offset: 2px;
  border-radius: var(--rlms-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}