/* ============================================================
   دفتر المركز — الأساس المشترك
   Daftar Al-Markaz — Shared Base
   ------------------------------------------------------------
   المتغيّرات بأسماء منصة السند، والقيم من هوية دفتر المركز
   (النموذج المعتمد). ما يخصّ كل صفحة في home.css و demo.css.
   ============================================================ */

/* ============================================================
   1. المتغيرات · CSS Variables
   ============================================================ */
:root {
  /* الألوان الأساسية */
  --primary:            #1A9DB8;   /* الفيروزي، لون الهوية ★ */
  --primary-dark:       #127C92;   /* أغمق للأزرار والنص الصغير حتى يُقرأ */
  --primary-darker:     #0F6E82;   /* نص شارة «وشهران مجاناً» */
  --primary-deep:       #1B2A6B;   /* الكحلي: العناوين والرأس والأزرار */
  --primary-deep-hover: #24357F;   /* hover */
  --primary-light:      #6FD3E0;   /* عناوين صغيرة على الكحلي */

  /* الخلفيات */
  --bg:                 #F6F8FC;   /* خلفية صفحة التجربة وشريط الرأس */
  --bg-app:             #F2F4F9;   /* خلفية تطبيق التجربة */
  --surface:            #FFFFFF;   /* البطاقات، وخلفية الصفحة الرئيسية */
  --soft:               #F1F4F9;   /* أزرار التسجيل والتبويبات */
  --band-tint:          #F4F7FB;   /* شريط قسم الأسعار */
  --band-deep:          #111B47;   /* الخاتمة والتذييل بلون واحد */

  /* النصوص */
  --text:               #1B2A6B;   /* النص الرئيسي */
  --text-muted:         #5B6788;   /* النص الثانوي في الصفحة الرئيسية */
  --text-soft:          #6B7695;   /* النص الثانوي في صفحة التجربة */
  --text-light:         #A3ABC2;   /* المقادير الخافتة */

  /* الحدود */
  --border:             #E3E8F0;   /* حدود الجداول */
  --line:               #E4E8F1;   /* حدود البطاقات والخيارات في التجربة */

  /* الحالات */
  --success:            #17804A;   /* شارة التقدير */
  --danger:             #C0392B;   /* غياب بدون عذر */
  --danger-bg:          #FCEBEB;
  --warning:            #A35F00;   /* غياب بعذر، ومرض، وتأخّر */
  --warning-bg:         #FDF3E1;
  --info-bg:            #E5F5F8;

  /* الخط */
  --font:               "Cairo", system-ui, Tahoma, sans-serif;

  /* يمنع الوضع الداكن الإجباري في الهواتف — لا يُحذف */
  color-scheme: light only;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   2. القاعدة العامة · Base
   ============================================================ */
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

/* ============================================================
   3. الشعار الحيّ · Living Logo
   يبقى رسماً مدمجاً لأن أجزاءه تتحرّك كلٌّ وحده
   ============================================================ */
.lmark .ck  { transform-box: fill-box; transform-origin: center; animation: ck 8s infinite; }
.lmark .c1  { animation-delay: .3s; }
.lmark .c2  { animation-delay: .6s; }
.lmark .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: br 8s infinite; }
.lmark .b1  { animation-delay: .15s; }
.lmark .b2  { animation-delay: .3s; }
.lmark .orb { stroke-dasharray: 100; animation: orb 8s infinite; }
.lmark .dot { transform-box: fill-box; transform-origin: center; animation: dt 8s infinite; }

@keyframes ck  { 0%,4%{transform:scale(0)} 9%{transform:scale(1.3)} 12%,90%{transform:scale(1)} 97%,100%{transform:scale(0)} }
@keyframes br  { 0%,14%{transform:scaleY(.12)} 24%,90%{transform:scaleY(1)} 97%,100%{transform:scaleY(.12)} }
@keyframes orb { 0%,20%{stroke-dashoffset:100} 34%,90%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
@keyframes dt  { 0%,30%{transform:scale(0)} 35%{transform:scale(1.5)} 39%,86%{transform:scale(1)} 62%{transform:scale(1.18)} 92%,100%{transform:scale(0)} }

/* من طلب تقليل الحركة يرى الشعار ثابتاً */
@media (prefers-reduced-motion: reduce) { .lmark * { animation: none !important; } }