/* ============================================================================
   وتيرة — رموز الهوية البصرية
   المصدر: «وتيرة - الهوية البصرية.html» على سطح المكتب.

   هذا الملف هو النسخة الوحيدة المعتمدة للألوان والخطوط في الكود. أي لون
   يُكتب مباشرة في صفحة بدل أن يُؤخذ من هنا يخرج عن الهوية بصمت — ولا يُكتشف
   إلا حين تصير الصفحات كثيرة ويصعب توحيدها.
   ========================================================================= */

:root{
  /* ── القاعدة ─────────────────────────────────────────────────────────
     كحلي داكن عميق، لا أسود. الأسود يصلّب التصميم، والكحلي يبقيه هادئاً. */
  --ink:        #0A1422;   /* الكحلي الأساس */
  --ink-2:      #0F1C2E;   /* سطح فوق الأساس */
  --ink-3:      #132339;   /* حدود داخل المناطق الداكنة */

  /* ── «المضطرب» ────────────────────────────────────────────────────────
     الرمادي ليس لوناً محايداً هنا — إنه نصف المعنى. الأعمدة المضطربة رمادية
     والمنتظمة بلون التمييز، فيحمل اللون نفسه الفرق بين «قبل» و«بعد». */
  --chaotic:    #6B7683;   /* الرمادي المضطرب */
  --dim:        #93A3B5;   /* نص خافت على داكن */
  --dim-2:      #9AA6B2;

  /* ── لون التمييز ─────────────────────────────────────────────────────
     الأخضر المزرق هو المعتمد: هادئ، ثقة، تقنية ناضجة — وبعيد عن الأزرق
     التقني المكرّر. النحاسي بديل مدروس، يُستخدم للتوكيد الثانوي فقط. */
  --accent:     #17A79A;
  --accent-dark:#0E8578;
  --accent-soft:#04231F;   /* خلفية ناعمة على الداكن */
  --copper:     #C07A42;
  --copper-dark:#A0602E;

  /* ── الوضع الفاتح ────────────────────────────────────────────────── */
  --bg:         #F7F9FB;
  --surface:    #FFFFFF;
  --line:       #EAF0F6;
  --line-2:     #EEF2F5;
  --text:       #0A1422;
  --muted:      #6B7683;
  --tint:       #E8F5F3;   /* الأخضر المزرق مخفَّفاً على أبيض */
  --tint-line:  #CFE9E3;

  /* حالات: مشتقّة من لوني الهوية لا مستوردة من مكان آخر. الأحمر من --danger،
     والتحذير من النحاسي — فيبقى حتى الخطأ داخل الهوية. */
  --danger:     #E05A5A;
  --danger-bg:  #FDF3F2;
  --danger-line:#F3D5D2;
  --danger-text:#96322A;
  --warn-bg:    #FDF7EE;
  --warn-line:  #F0E0C8;

  /* ── الخطوط ──────────────────────────────────────────────────────────
     Tajawal للعناوين (هندسي حديث)، وIBM Plex Sans Arabic للنصوص لأنه
     الأعلى مقروئية في الفقرات الطويلة، وSpace Grotesk للاتيني. */
  --font-head: 'Tajawal', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-latin:'Space Grotesk', system-ui, sans-serif;

  /* ── الشعار ──────────────────────────────────────────────────────────
     قاعدتان من دليل الهوية:
       · مساحة الأمان: فراغ لا يقلّ عن عرض عمود واحد من كل جهة.
       · الحد الأدنى: 16 بكسل على الشاشة — تحته تختفي المسافات المتفاوتة
         ويصير الشعار كتلة، فيضيع المعنى كله.                             */
  --bar-w:      5px;
  --bar-gap:    2.5px;   /* نصف عرض العمود */
  --bar-group:  5.5px;   /* الفجوة الفاصلة بين المجموعتين — أعرض من العمود */
  --logo-min:   16px;
}

/* الأعمدة كما في ملفات الهوية بالضبط: **اثنان** رماديان بارتفاعين مختلفين،
   ثم فجوة أوسع، ثم **ثلاثة** خضراء متساوية بكامل الارتفاع.
   النسب مقيسة من الأصول: 80% و40% للرماديين، و100% للثلاثة.
   العدد ليس تفصيلاً: "بعد" يجب أن يكون أكثر وأطول من "قبل". */
.bars{
  display:flex;align-items:flex-end;gap:var(--bar-gap);height:26px;
  /* الشعار لا يُعكس مع اللغة.
     حاوية flex داخل dir=rtl تبدأ من اليمين، فينقلب الترتيب ويصير الأخضر
     قبل الرمادي — أي "من النظام إلى الفوضى". هذا السطر هو ما يمنع ذلك،
     ولا يظهر أثره إلا داخل صفحة عربية. */
  direction:ltr;
}
.bars i{display:block;width:var(--bar-w);background:var(--chaotic);border-radius:0}
.bars i:nth-child(1){height:80%}
.bars i:nth-child(2){height:40%}
.bars i:nth-child(3){height:100%;background:var(--accent);
                     margin-left:var(--bar-group)}
.bars i:nth-child(4),
.bars i:nth-child(5){height:100%;background:var(--accent)}