/* =====================================================================
 * رموز التصميم المشتركة — لوحة الأدمن وتطبيق الميدان معاً
 * Shared design tokens — admin console and field app
 *
 * لماذا ملف واحد: كان لكل واجهة كتلة :root خاصة بها، وتوأمان في الظاهر
 * لا في الحقيقة — ‎--green‎ كان ‎#82c882‎ في اللوحة و‎#2e7d32‎ في التطبيق،
 * وأخضر الخلفية ‎--ok-bg‎ هناك و‎--green-bg‎ هنا بقيمتين مختلفتين. فكان
 * «المكتمل» لونين في شاشتين عن الحالة نفسها، ولا شيء يكشفه إلا من يفتح
 * الاثنتين جنباً إلى جنب.
 *
 * ومن أين جاءت الألوان: من ملف الشعار brand/aiks-mark.svg لا من ذوق —
 * تدرّج القوس، وتدرّج الطفلين، وأخضر علامة الصحّ.
 *
 * وكل زوج (نصّ على خلفيته) محسوب لا مُقدَّر: اشتُقّ بتغميق اللون في نفس
 * عائلته حتى يتجاوز 4.5:1، والنسب مكتوبة بجانبه. من غيّر قيمة هنا فليُعِد
 * الحساب — رقمٌ يُكتب بالذوق يسقط تحت الشمس عند البوابة.
 *
 * الاستعمال: يُربط قبل ملف تنسيق الواجهة، فالأسماء القديمة تبقى عاملة
 * (انظر «أسماء متوارثة» في آخر الملف) ولا تحتاج كل قاعدة إلى إعادة كتابة.
 * ===================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------
     أصول العلامة — لا تُستعمل مباشرة في المكوّنات
     --------------------------------------------------------------- */
  --brand-teal: #2AA6A3;   /* بداية قوس الشعار */
  --brand-blue: #1370B8;   /* وسطه */
  --brand-deep: #0E4E86;   /* نهايته */
  --brand-sun:  #F2DE45;   /* أعلى تدرّج الطفلين */
  --brand-lime: #8CC63F;   /* وسطه */
  --brand-go:   #2E9E4F;   /* علامة الصحّ */

  /* ---------------------------------------------------------------
     الأسطح والنصوص
     --------------------------------------------------------------- */
  --bg:           #F2F6FA;
  --surface:      #FFFFFF;
  --surface-sunk: #E7EFF6;   /* حقل غائر: الرمز، الملخّص، ترويسة الجدول */
  --surface-hover:#EDF3F9;   /* صفّ تحت المؤشّر */
  --line:         #D9E4ED;

  --fg:       #0C1D2E;   /* 15.71:1 على --bg */
  --fg-muted: #46596C;   /*  6.65:1 على --bg */
  --fg-faint: #7A8CA0;   /* زخرفي ومسمّيات لا تحمل معنى وحدها */
  /* النصّ البارز: العناوين وأسماء الطلاب والأرقام الكبيرة. كان --navy
     يؤدّي هذا الدور، وهو لونُ علامةٍ داكن — ممتاز على الأبيض و1.92:1
     على سطحٍ ليليّ. لونُ علامةٍ لا يصلح لوناً لنصّ في الوضعين. */
  --fg-strong: #0E4E86;   /* 11.17:1 على --surface */

  /* ---------------------------------------------------------------
     الفعل
     --------------------------------------------------------------- */
  /* دوران لا دور واحد: --accent لونُ نصٍّ (رابط، رقم، أيقونة) فيجب أن
     يُقرأ على الخلفية؛ و--accent-solid خلفيةُ زرٍّ ممتلئ فيجب أن يُقرأ
     الأبيضُ عليه. دمجُهما في رمز واحد أسقط الأبيضَ إلى 4.16:1 ليلاً. */
  --accent:        #1370B8;   /* 4.79:1 على --bg */
  --accent-hover:  #0E4E86;
  --accent-solid:  #1370B8;   /* الأبيض عليه 5.20:1 */
  --accent-solid-hover: #0E4E86;
  --on-accent:     #FFFFFF;
  --focus:        #1370B8;

  /* ---------------------------------------------------------------
     الحالات — لكل حالة نصّها وخلفيتها، والنسبة بينهما محسوبة
     --------------------------------------------------------------- */
  --c-ok-fg:   #247A3D;  --c-ok-bg:   #E5F5EA;   /* 4.73:1 */
  --c-info-fg: #136DB3;  --c-info-bg: #E1EFF9;   /* 4.63:1 */
  /* أحمرٌ لا طوبيّ: #C0392B يقع في مدى الطوبيّ الذي صار علامةً على
     واجهةٍ مولّدة، وهذا لون إنذار لا لون هوية. */
  --c-bad-fg:  #B3261E;  --c-bad-bg:  #FBEAE8;
  /* التحذير وحده أُديرت درجته نحو الكهرماني: أصفر الشعار المغمَّق يخرج
     زيتونياً باهتاً — يمرّ في الحساب ويفشل في التواصل، ولون التحذير
     يجب أن يُقرأ تحذيراً من لمحة. */
  --c-warn-fg: #906104;  --c-warn-bg: #F6EEDF;   /* 4.67:1 */

  /* ---------------------------------------------------------------
     مقياس الخط — أساس 16px ونسبة ≈1.2
     كان في الملفين 22 حجماً متمايزاً بأنصاف بكسلات (11.5 و12.5 و…)،
     وتسعة مواضع دون 12px بعضها يحمل رقم الطالب وصفّه.
     القاعدة: لا نصّ يحمل معنى دون --text-2xs.
     --------------------------------------------------------------- */
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  19px;
  --text-xl:  23px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --text-4xl: 42px;

  /* الخطّ رمزٌ كبقيّة الرموز. كانت كل واجهة تحمل قائمتها مكتوبةً في
     body، فبقي الجميع على خطّ النظام: "Segoe UI" على ويندوز وغيره على
     غيره — أي أن شكل الشاشة كان يتغيّر بتغيّر الجهاز.
     الملفات مستضافة محلياً في app/fonts (انظر app/css/fonts.css). */
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;

  --leading-tight: 1.3;    /* العناوين */
  --leading-snug:  1.5;    /* الأسطر القصيرة والجداول */
  --leading-body:  1.7;    /* النصّ العربي المتّصل يحتاج فسحة أكثر */

  /* ---------------------------------------------------------------
     المسافات — أساس 4px
     كان في الملفين 24 قيمة حشو متمايزة، كل عدد صحيح من 2 إلى 16.
     --------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------------------------------------------------------------
     الشكل
     --------------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(12, 29, 46, .06), 0 2px 8px rgba(12, 29, 46, .05);
  --shadow-2: 0 2px 6px rgba(12, 29, 46, .08), 0 12px 28px rgba(12, 29, 46, .08);

  /* هدف اللمس: 48 لا 44. المسؤول يستعمل الجهاز واقفاً بيد واحدة في
     الساحة، والحدّ الأدنى في الإرشادات مكتوبٌ لجالسٍ في مكتب. */
  --tap: 48px;
}

/* =====================================================================
   الوضع الليلي — القيم مُعاد حسابها لا مقلوبة
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:           #081520;
    --surface:      #0E2130;
    --surface-sunk: #0A1B27;
    --surface-hover:#16293A;
    --line:         #1E3647;

    --fg:       #EAF1F7;   /* 16.18:1 */
    --fg-muted: #A8BDD0;
    --fg-faint: #7A8CA0;
    --fg-strong: #CFE3F3;   /*  5.35:1 */

    --accent:        #1684D8;   /* 4.68:1 على --bg */
    --accent-hover:  #3C9EE8;
    --accent-solid:  #1370B8;   /* الأبيض عليه 5.20:1، وحدّه على الخلفية 3.55:1 */
    --accent-solid-hover: #1684D8;

    --c-ok-fg:   #34B259;  --c-ok-bg:   #1B3623;   /* 4.79:1 */
    --c-info-fg: #339AEA;  --c-info-bg: #162E40;   /* 4.64:1 */
    --c-warn-fg: #F2A60D;  --c-warn-bg: #3B2D11;   /* 6.52:1 */
    --c-bad-fg:  #DD7065;  --c-bad-bg:  #3C1E1B;   /* 4.72:1 */

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40);
  }
}

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

  --bg:           #081520;
  --surface:      #0E2130;
  --surface-sunk: #0A1B27;
  --surface-hover:#16293A;
  --line:         #1E3647;

  --fg:       #EAF1F7;
  --fg-muted: #A8BDD0;
  --fg-faint: #7A8CA0;
  --fg-strong: #CFE3F3;

  --accent:        #1684D8;   /* 4.68:1 على --bg */
  --accent-hover:  #3C9EE8;
  --accent-solid:  #1370B8;   /* الأبيض عليه 5.20:1، وحدّه على الخلفية 3.55:1 */
  --accent-solid-hover: #1684D8;

  --c-ok-fg:   #34B259;  --c-ok-bg:   #1B3623;
  --c-info-fg: #339AEA;  --c-info-bg: #162E40;
  --c-warn-fg: #F2A60D;  --c-warn-bg: #3B2D11;
  --c-bad-fg:  #DD7065;  --c-bad-bg:  #3C1E1B;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40);
}

/* =====================================================================
   أسماء متوارثة
   تبقى الأسماء القديمة عاملة فلا يحتاج كل ملف تنسيق إلى إعادة كتابة،
   ويصل الإصلاح إلى كل قاعدة تستعملها دفعةً واحدة. تُزال حين لا يبقى
   مستعمِل لها — لا قبل ذلك.
   ===================================================================== */
:root {
  --blue:      var(--accent);
  --blue-dark: var(--accent-hover);
  --navy:      var(--brand-deep);
  --yellow:    var(--brand-sun);
  --ink:       var(--fg);
  --muted:     var(--fg-muted);
  --card:      var(--surface);
  --radius:    var(--r-md);
  --shadow:    var(--shadow-1);

  --green:     var(--c-ok-fg);
  --green-bg:  var(--c-ok-bg);
  --ok-bg:     var(--c-ok-bg);
  --warn:      var(--c-warn-fg);
  --warn-bg:   var(--c-warn-bg);
  --danger:    var(--c-bad-fg);
  --danger-bg: var(--c-bad-bg);
}

/* حلقة التركيز موحّدة: إزالتها من أكثر ما يكسر الاستعمال بلوحة المفاتيح،
   وتركها للمتصفح يعني شكلاً مختلفاً في كل واجهة. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}