/* ══════════════════════════════════════════════════════════════
   رموز التصميم — هوية وزارة التعليم ٢٠٢٥
   لا لونَ خارج هذا الملف، ولا مقاسَ خارج الستة.
   كلُّ قيمةٍ هنا مقيسةُ التباين — الرقمُ في التعليق هو النسبة على أبيض.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'HNW23';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* woff2 أولاً: ٨٩٬٨٤٤ ← ٤٠٬٥٧٦ بايت (نقصٌ ٥٥٪ مقيس).
     و TTF احتياطٌ لمتصفّحٍ قديمٍ لا يدعم woff2 — وهو نادر. */
  src: url('./fonts/HNW23-Regular.woff2') format('woff2'),
       url('./fonts/HNW23-Regular.ttf')   format('truetype');
}
@font-face {
  font-family: 'HNW23';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/HNW23-Bold.woff2') format('woff2'),
       url('./fonts/HNW23-Bold.ttf')   format('truetype');
}

:root {
  /* ── ألوان الهوية ── */
  --navy:        #12293A;   /* ١٤٫٩٦ — ترويسات وخلفيات داكنة */
  --navy-2:      #15445A;   /* ١٠٫٤٧ */
  --teal:        #0DA9A6;   /*  ٢٫٩٠ — ⚠️ تعبئةً وفواصلَ فقط، لا نصّاً */
  --teal-ink:    #066361;   /*  ٧٫٠٨ — التركوازي حين يكون نصّاً */
  --cyan:        #69CEE3;   /*  ١٫٨٢ — على الكحلي وحده (٨٫٢٢ عليه) */
  --green:       #07A869;   /*  ٣٫٠٨ — تعبئة */
  --green-ink:   #056B43;   /*  ٦٫٥٨ — نصّ نجاح */
  --blue:        #3D7EB9;   /*  ٤٫٣٠ */
  --gold:        #C9B27C;   /*  ٢٫١٠ — ⚠️ زخرفةً لا نصّاً */
  --gold-ink:    #7D6636;   /*  ٥٫٦٠ — الذهبيُّ حين يكون نصّاً */

  /* ── ألوان وظيفية ── */
  --amber-ink:   #A06A12;   /*  ٤٫٦٠ — تحذير */
  --red-ink:     #9B2F28;   /*  ٧٫٤٢ — خطر */

  /* ── الأسطح والنصّ ── */
  --ink:         #23404F;   /* ١٠٫٩٥ — النصّ الأساسي */
  --muted:       #5A7280;   /*  ٥٫٠٦ — ⚠️ على الأبيض فقط (٤٫٣٩ على --bg) */
  --bg:          #F3F5F7;
  --surface:     #FFFFFF;
  --line:        #E4E9ED;
  --line-strong: #D3DCE2;

  /* تعبئاتٌ خفيفة للشارات */
  --fill-ok:     #E3F5EC;
  --fill-warn:   #FAF0DC;
  --fill-bad:    #FAE7E5;
  --fill-info:   #E4F4F6;

  /* ── المقاسات: ستةٌ لا تزيد ── */
  --t-hero: 48px;
  --t-h1:   32px;
  --t-h2:   24px;
  --t-body: 19px;
  --t-ui:   16px;
  --t-cap:  13px;

  /* ── المسافات: مضاعفات الثمانية ── */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;

  /* ── الحواف والظلّ: واحدٌ من كلٍّ ── */
  --r:    16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow:      0 1px 2px rgba(18, 41, 58, .04), 0 1px 3px rgba(18, 41, 58, .06);
  /* ظلٌّ أعمقُ وأنعم — منقولٌ عن بطاقات لقاء الخبر، وهو ما يجعل
     السطحَ يبدو مرفوعاً لا مرسوماً */
  --shadow-soft: 0 1px 2px rgba(18, 41, 58, .04), 0 8px 24px rgba(18, 41, 58, .06);
  --shadow-lift: 0 14px 34px rgba(18, 41, 58, .12);

  /* شريط الهوية تحت كل ترويسة */
  --accent-bar: linear-gradient(to left, var(--teal), var(--cyan), var(--gold));

  /* ألوانُ النصّ فوق الأسطح الداكنة، ولمساتٌ وظيفية */
  --on-dark:      #FFFFFF;   /* ١٤٫٩٦ على الكحلي */
  --on-dark-dim:  #C9DCE6;   /*  ٩٫٩٣ على الكحلي — تنقّلٌ غيرُ نشط */
  --line-danger:  #E3BDB9;   /* حدُّ زرِّ الحذف */
  --hover-dark:   rgba(255, 255, 255, .08);   /* تمريرةٌ فوق الكحلي */
  --scrim:        rgba(0, 0, 0, .45);         /* حاجبُ الدُّرج على الجوّال */
  --on-fill-soft: rgba(255, 255, 255, .18);   /* زرٌّ فوق شريط تنبيهٍ ملوّن */
  --on-fill-line: rgba(255, 255, 255, .35);
  --on-fill-hover: rgba(255, 255, 255, .26);   /* تمريرةٌ فوق زرٍّ شفّاف */
  --paper:        #FFFFFF;   /* ورقُ الطباعة — أبيضُ دائماً ولو كان السطحُ داكناً */
  --shadow-rail:  -8px 0 24px rgba(0, 0, 0, .25);
  --ink-on-warn:  #6B4709;   /*  ٧٫٣١ على --fill-warn */

  /* سطحُ اللوحات — أفتحُ من الأبيض بلمسةِ لونِ الهوية، كما في
     لقاء الخبر: يفصل المحتوى عن الخلفية بلا حدٍّ ولا ظلٍّ ثقيل */
  --panel:      #F4F7F8;
  --panel-line: #E2E9EC;

  /* تعبئاتُ الأيقونات — مربّعٌ فاتحٌ بلون المجموعة وأيقونةٌ بدرجتها الداكنة */
  --tint-teal:  #E6F6F5;
  --tint-blue:  #E8F0F8;
  --tint-gold:  #F7F1E4;
  --tint-navy:  #E7ECF0;
  --table-head: #F7F9FA;
  /* واتساب — أخضرُه المألوف مخفّفاً كي لا يصرخ بين أزرار الهوية */
  --wa-fill:    #E8F7EE;
  --wa-line:    #BFE8CE;
  --wa-ink:     #0E6B37;   /* ٦٫٦٠ على --wa-fill */
  --wa-solid:   #17804A;   /* زرُّ واتساب المصمت — نصٌّ أبيضُ عليه ٥٫٠ */
  --danger-on-dark:      rgba(200, 72, 63, .22);   /* زرُّ خطرٍ فوق الكحلي */
  --danger-on-dark-line: rgba(200, 72, 63, .45);
  --danger-on-dark-ink:  #F4B2AC;
  --red:        #C8483F;
  --overlay:    rgba(18, 41, 58, .35);
  --heading:    #12293A;   /* العناوينُ والأرقام — الكحليُّ على الفاتح */
  --chart-best: #15445A;   /* العمودُ الأعلى في الرسم */
  --hero-bg:    #12293A;

  /* الشريطُ الجانبي */
  --rail-grp:     #7FA3B8;   /* عنوانُ المجموعة وأيقونةُ الرابط غيرِ النشط */
  --rail-on:      rgba(13, 169, 166, .20);
  --rail-on-2:    rgba(13, 169, 166, .05);
  --rail-card:    rgba(255, 255, 255, .05);
  --glass:        rgba(255, 255, 255, .08);
  --glass-line:   rgba(255, 255, 255, .18);
  --warn-on-dark: rgba(201, 138, 27, .28);
  --warn-text-on-dark: #F3D18E;

  /* نمطُ النقاط — مأخوذٌ من شعار الوزارة نفسه */
  --dot: rgba(105, 206, 227, .5);
  --focus-ring: rgba(13, 169, 166, .18);

  /* عرضُ الشريط الجانبي — يتّسع لأطول اسمِ شاشة */
  --rail-w: 268px;
  --top-h:  68px;

  /* هدفُ اللمس الأدنى — لا يُنقص */
  --tap: 44px;
}

/* السطحُ الداكن اختياري، والفاتحُ هو الافتراضي (أوضحُ على جوّالٍ في الشمس) */
:root[data-theme="dark"] {
  --bg:          #0D1F2D;
  --surface:     #12293A;
  --line:        #234156;
  --line-strong: #2F5A76;
  --ink:         #E6F1F5;
  --muted:       #9FBACB;
  --teal-ink:    #4FC8C5;
  --green-ink:   #45C88C;
  --amber-ink:   #E0A845;
  --red-ink:     #E88B84;
  --on-dark:     #FFFFFF;
  --on-dark-dim: #B9D0DE;
  --line-danger: #7A4A45;
  --hover-dark:  rgba(255, 255, 255, .06);
  --scrim:       rgba(0, 0, 0, .6);
  --on-fill-soft: rgba(255, 255, 255, .14);
  --on-fill-line: rgba(255, 255, 255, .3);
  --on-fill-hover: rgba(255, 255, 255, .22);
  --shadow-rail: -8px 0 24px rgba(0, 0, 0, .5);
  --ink-on-warn: #F0D9A8;
  --shadow:      0 2px 14px rgba(0, 0, 0, .35);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .3);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .45);
  --panel:       #16334699;
  --panel-line:  #234156;
  --tint-teal:   #123F45;
  --tint-blue:   #16324A;
  --tint-gold:   #3A3322;
  --tint-navy:   #1B3A4E;
  --gold-ink:    #D9C592;
  --table-head:  #163346;
  --wa-fill:     #123A28;
  --wa-line:     #1E5A3D;
  --wa-ink:      #7FE0A8;
  --overlay:     rgba(0, 0, 0, .5);
  --heading:     #F2F8FB;
  --chart-best:  #69CEE3;
  --hero-bg:     #173A50;
  --fill-ok:     #133A2C;
  --fill-warn:   #3A2F18;
  --fill-bad:    #3E2220;
  --fill-info:   #123F45;
  --focus-ring:  rgba(79, 200, 197, .25);
}