/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — نظام تصميم شاطر (مصدر الحقيقة الوحيد)

   المصدر: «إعادة تصميم صفحة شاطر» — نظام صمّمه المستخدم واعتمده، ١٥ أغسطس ٢٦.
   قبل هذا الملف كانت كل صفحة تجتهد وحدها: حشوة الأقسام تتراوح ٣٤–٧٤ بكسل بلا
   قاعدة، وزوايا الصناديق ١١ و١٤ و١٦ و٢٠ و٢٢ و٢٤، وأحجام النص ١٢٫٥ و١٣٫٥ و١٤
   و١٥ و١٦ و١٧٫٥. النتيجة أن كل عنصر لحاله مقبول والمجموع يبدو غير مرتّب.

   ★ القاعدة: أي قيمة جديدة تدخل من هنا أو لا تدخل. لا أرقام حرّة في الصفحات.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ───── الألوان ───── */
  --brand:#10332C;        /* أخضر داكن — ثيم الهبوط ٢ سبتمبر */
  --accent:#F2B41F;       /* ذهبي تمييز */
  --bg:#ECF2EB;           /* أرضية الصفحة */
  --surface:#FFFFFF;      /* سطح البطاقات */
  --surface-2:#E4EDE3;    /* سطح ثانٍ */
  --border:#CEDCD0;       /* حدود */
  --border-2:#B1C5B6;     /* حد أوضح — للزر الثانوي */
  --text:#10332C;         /* نص أساسي */
  --text-2:#425F56;       /* نص ثانوي */
  --text-3:#748D85;       /* نص معطّل/خافت */
  --success:#12885D;
  --danger:#C4384B;
  --warning:#9A6B08;

  /* ───── سلّم الخطوط — القيمة/الوزن/ارتفاع السطر ───── */
  --fs-display:40px;  --lh-display:1.25;  --fw-display:800;
  --fs-h1:30px;       --lh-h1:1.35;       --fw-h1:800;
  --fs-h2:22px;       --lh-h2:1.45;       --fw-h2:700;
  --fs-lead:18px;     --lh-lead:1.85;     --fw-lead:400;
  --fs-body:16px;     --lh-body:1.90;     --fw-body:400;  /* الحد الأدنى — لا تنزل تحته */
  --fs-label:14px;    --lh-label:1.70;    --fw-label:500;

  /* ───── سلّم الفراغات — ست قيم لا غير ───── */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px;

  /* ───── قواعد التخطيط المشتقّة ───── */
  --sec-y:var(--s-6);      /* رأسي بين الأقسام — ٤٠ على الجوال (تحت) */
  --sec-x:var(--s-4);      /* أفقي داخل الصفحة */
  --gap-cards:var(--s-4);  /* بين البطاقات */
  --pad-card:var(--s-4);   /* داخل البطاقة */
  --gap-in:var(--s-3);     /* بين عناصر البطاقة */

  /* ───── الأشكال ───── */
  --r-btn:14px;            /* الأزرار */
  --r-card:20px;           /* البطاقات */
  --r-field:14px;          /* الحقول */
  --r-pill:999px;
  --h-tap:48px;            /* أدنى ارتفاع لأي هدف لمس */
  --shadow-card:0 1px 2px rgba(16,51,44,.06);

  /* ───── الأيقونات — خط موحّد، لا إيموجي ───── */
  --icon-w:1.75;
  --icon-size:20px;
}

@media (max-width:760px){
  :root{ --sec-y:var(--s-5); }   /* ٤٠ بكسل على الجوال بدل ٦٤ */
}

/* ═══ أساسيات ═══ */
*{box-sizing:border-box;margin:0;font-family:"Tajawal","Segoe UI",Tahoma,sans-serif}
/* 🎬 السبورة مستثناة — حركتها هي الشرح نفسه لا زينة (بلاغ فارس ١٩ أغسطس) */
@media (prefers-reduced-motion:reduce){
  *:not(.sv-keepmotion):not(.sv-keepmotion *){animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══ أنماط جاهزة — تُستعمل كما هي فلا تتكرر الأرقام في الصفحات ═══ */
.ds-display{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display)}
.ds-h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:var(--lh-h1)}
.ds-h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:var(--lh-h2)}
.ds-lead{font-size:var(--fs-lead);font-weight:var(--fw-lead);line-height:var(--lh-lead);color:var(--text-2)}
.ds-body{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body)}
.ds-label{font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-label);color:var(--text-2)}

/* أزرار — الثلاثة المعتمدة فقط */
.ds-btn{min-height:var(--h-tap);padding:0 var(--s-4);border:none;border-radius:var(--r-btn);
  font-size:var(--fs-body);font-weight:700;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:var(--s-2);justify-content:center}
.ds-btn-1{background:var(--brand);color:#fff}
.ds-btn-2{background:var(--surface);color:var(--brand);border:1px solid var(--border-2)}
.ds-btn-3{background:var(--accent);color:var(--brand)}
.ds-btn:disabled{background:var(--border);color:var(--text-3);cursor:not-allowed}

/* بطاقات */
.ds-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--pad-card);display:grid;gap:var(--gap-in);box-shadow:var(--shadow-card)}
.ds-card-dark{background:linear-gradient(150deg,var(--brand),#2A544A);border:none;color:#fff}
.ds-card-dark .ds-body{color:#9FBCB0}

/* حقول */
.ds-field{width:100%;min-height:var(--h-tap);padding:0 var(--s-3);border:1px solid var(--border-2);
  border-radius:var(--r-field);font-size:var(--fs-body);font-family:inherit;background:var(--surface);color:var(--text)}

/* صف حالة — «ضبط معه» / «ما ضبط» / «مقفل».
   اللغة مقصودة: لغة أولياء الأمور لا لغة المشرفين التربويين. */
.ds-row{min-height:56px;padding:var(--s-3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-field);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.ds-row .k{font-size:var(--fs-label);font-weight:500;color:var(--text-2)}
.ds-row .v{font-size:var(--fs-body);font-weight:700;display:inline-flex;align-items:center;gap:var(--s-2)}
.ds-row.ok .v{color:var(--success)}
.ds-row.bad .v{color:var(--danger)}
.ds-row.lock{background:var(--bg);opacity:.55}
.ds-row.lock .v{color:var(--text-3)}

/* أيقونات خطّية موحّدة — بديل الإيموجي.
   الاستعمال: <svg class="ds-i" viewBox="0 0 24 24"><path d="…"/></svg> */
.ds-i{width:var(--icon-size);height:var(--icon-size);fill:none;stroke:currentColor;
  stroke-width:var(--icon-w);stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}