/* رموز «تعليم»: المصدر الواحد لألوان المنصّة وخطوطها وزواياها.
   تأخذ منه الترويسة والتذييل والصفحات ولوحة التحكّم وشرائح الدروس.
   الأسماء هي أسماء الشرائح حيث تتقاطع (--bg1 --ink --muted --pri --acc --ok --bad --surface --line)،
   ولوحات الدروس الثماني تبدّل قيمها على .tlx وحده.
   القيم قيم الهويّة كما هي؛ لا يُغيَّر شيءٌ منها إلّا بإذن صاحب الموقع. */
:root{
  /* الخلفيّة الداكنة */
  --bg1:#123A63;
  --bg2:#0B1B33;
  --bg3:#050A18;
  --bg-grad:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 46%,var(--bg3) 100%);

  /* النصّ على الداكن، من الأقوى إلى الأخفت */
  --ink:#fff;
  --soft:#DBE6F7;
  --soft2:#C3D2EA;
  --muted:#A8BAD6;
  --faint:#8FA3C4;
  --link:#9FD8CF;

  /* الأزرار والتمييز */
  --pri:#0F6B66;
  --pri-hover:#0C5B56;
  --pri-ink:#fff;
  --acc:#E3C46E;
  --acc-ink:#1D1606;

  /* الحالات: اللون للإشارة، والفاتح لنصّ الرسالة على الداكن */
  --ok:#3FB68B;
  --bad:#E5726A;
  --warn:#8E2F28;
  --ok-soft:#BDEBD2;
  --bad-soft:#FFD1CC;

  /* البطاقات والحدود على الداكن */
  --surface:rgba(255,255,255,.07);
  --surface2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.15);

  /* الترويسة الفاتحة */
  --hdr-bg:#E8F5FF;
  --hdr-ink:#000;
  --hdr-on:rgb(6,120,3);

  /* أبيض وأسود لغير النصّ (خلفيّة زرّ فاتح، إطار فيديو) */
  --white:#fff;
  --black:#000;

  /* الخطّان: «المجلّة» للنصّ والواجهة، و«الأميري» للعناوين والشعر */
  --font-body:'Sakkal Majalla Regular',Tahoma,Arial,sans-serif;
  --font-display:'Amiri',serif;

  /* الزوايا */
  --r-pill:99px;
  --r-card:12px;
}

/* ---------- نظام التصميم: الخطوط والمسافات والسطوح والزوايا والحركة ----------
   سلّم الخطوط ثابتٌ بنسبةٍ قريبة من ١٫١٢٥، أصغره ستّة عشر بكسلًا على الحاسوب، لأنّ عين «المجلّة» صغيرة.
   المرجع: Impeccable reference/typeset.md و operate.md (سلّمٌ ثابت لواجهات العمل، ونسبة ١٫١٢٥ إلى ١٫٢). */
:root{
  --fs-sm:16px;      /* بيانات ثانويّة، تسميات، أزرار صغيرة */
  --fs-base:18px;    /* النصّ والأزرار والحقول */
  --fs-md:20px;      /* نصٌّ تمهيديّ، عناوين البطاقات */
  --fs-lg:22px;      /* عناوين فرعيّة */
  --fs-xl:26px;      /* عنوان قسم */
  --fs-2xl:30px;     /* عنوان صفحة ثانويّ */
  --fs-3xl:36px;     /* عنوان الصفحة */
  --fs-display:50px; /* عنوان الغلاف */
  --lh-body:1.75;
  --lh-tight:1.35;

  /* المسافات على أساس أربعة */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* درجات السطوح والحدود على الداكن، من الأخفّ إلى الأقوى */
  --tint-1:rgba(255,255,255,.05);   /* خلفيّةٌ خفيّة: صفّ جدول، شريط */
  --tint-2:rgba(255,255,255,.10);   /* خلفيّة الحقول والشارات */
  --line-2:rgba(255,255,255,.20);   /* حدّ الأزرار الثانويّة والشارات */
  --line-3:rgba(255,255,255,.30);   /* حدّ الحقول */
  --scrim:rgba(5,10,24,.75);        /* تعتيم فوق الصور */

  /* الزوايا */
  --r-sm:10px;       /* الحقول والقوائم الصغيرة */

  /* الأهداف والحركة والظلال */
  --hit:44px;
  --dur:180ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-pop:0 8px 24px rgba(0,0,0,.18);
  --shadow-lg:0 18px 40px rgba(0,0,0,.35);
}
@media (max-width:600px){
  :root{--fs-sm:15px;--fs-base:17px;--fs-md:18px;--fs-lg:20px;--fs-xl:22px;--fs-2xl:25px;--fs-3xl:30px;--fs-display:38px}
}