/*
=========================================================
MAHEDI ALTAYS — DESIGN TOKENS
=========================================================

المصدر الوحيد للهوية البصرية والحركة.

القاعدة الملزمة

  لا تُكتب قيمة لون من الهوية، ولا مدّة انتقال،
  خارج هذا الملف. الملفات الأخرى تشير فقط.

  الالتزام مفروض آليًا: npm run qa:design يفشل عند أي مخالفة.


لماذا قنوات RGB منفصلة

نفس اللون البرونزي كان مكتوبًا بالأرقام 367 مرة بدرجات
شفافية مختلفة: rgba(184,138,97,.14) ثم .18 ثم .52 …

الشفافية لا تُخزَّن في التوكِن لأن كل موضع يحتاج درجته،
لذلك يُخزَّن اللون كقنوات وتُشتق منه كل الدرجات:

    --brand-bronze-rgb: 184, 138, 97;

    background: rgba(var(--brand-bronze-rgb), .14);
    border: 1px solid rgba(var(--brand-bronze-rgb), .52);

النتيجة: تغيير البرونزي = سطر واحد، ينتقل إلى الموقع كله
بكل درجات شفافيته.


سُلَّم الحركة

كانت مدد الانتقال خمس عشرة قيمة متفرقة بلا نظام
(.08 .16 .18 .2 .22 .25 .3 .35 .5 .6 .65 .7 .78 .8 …).
صارت خمس درجات، وكل قيمة بقيت ضمن 150ms من أصلها
والمتوسط 33ms — أي أن الإحساس محفوظ والنظام صار واحدًا.

  instant  لمس وضغط فوري
  fast     ألوان وحدود وأيقونات
  base     المعيار العام
  slow     بطاقات وطبقات
  slower   لوحات كبيرة وتحولات كاملة

مدد @keyframes لم تُمس إطلاقًا. النبض والوميض والدوران
جزء من الهوية، لا من ردّ فعل الواجهة.

=========================================================
*/

:root{

  /* =======================================================
     1 — قنوات الألوان
  ======================================================= */

  --brand-bronze-rgb:       184, 138, 97;
  --brand-bronze-warm-rgb:  198, 148, 99;
  --brand-bronze-deep-rgb:  190, 139, 91;

  --brand-green-rgb:         53, 183, 121;
  --brand-red-strong-rgb:   199,  78,  78;
  --brand-red-soft-rgb:     224, 105, 105;

  --brand-bg-rgb:             9,  10,  11;
  --brand-bg-raised-rgb:     12,  14,  15;
  --brand-surface-rgb:       24,  27,  29;

  --tint-light-rgb:         255, 255, 255;
  --tint-dark-rgb:            0,   0,   0;


  /* =======================================================
     2 — الألوان المصمتة
  ======================================================= */

  /* ---------- الخلفيات ---------- */

  --brand-bg:                   rgb(var(--brand-bg-rgb));

  --brand-bg-soft:              #0d0f10;   /* base + documents */
  --brand-bg-soft-vault:        #0d1011;   /* vault — درجة مختلفة أصلًا */

  --brand-surface:              #111416;
  --brand-surface-2:            #171b1d;

  --brand-surface-warm:         #17110d;   /* سطح بنيّ دافئ — خلفيات برونزية */
  --brand-surface-3:            #1c2022;   /* base */
  --brand-surface-3-documents:  #1d2123;   /* documents — درجة مختلفة أصلًا */


  /* ---------- النصوص ---------- */

  --brand-text:   #f4efe8;
  --brand-soft:   #d9d1c5;
  --brand-muted:  #aaa396;


  /* ---------- البرونزي ---------- */

  --brand-bronze:        rgb(var(--brand-bronze-rgb));
  --brand-bronze-warm:   rgb(var(--brand-bronze-warm-rgb));
  --brand-bronze-deep:   rgb(var(--brand-bronze-deep-rgb));
  --brand-bronze-dark:   #8c6848;
  --brand-bronze-light:  #d3ad87;
  --brand-bronze-soft:   rgba(var(--brand-bronze-rgb), .14);


  /* ---------- الحالات ---------- */

  --brand-green:  rgb(var(--brand-green-rgb));
  --brand-red:    #df7373;


  /* ---------- الحدود ---------- */

  --brand-line:       #2b2f31;
  --brand-line-soft:  rgba(var(--tint-light-rgb), .07);


  /* ---------- محايدات ---------- */

  --tint-light:  rgb(var(--tint-light-rgb));
  --tint-dark:   rgb(var(--tint-dark-rgb));


  /* =======================================================
     3 — سُلَّم الحركة
  ======================================================= */

  --motion-instant:  .08s;
  --motion-fast:     .18s;
  --motion-base:     .25s;
  --motion-slow:     .45s;
  --motion-slower:   .65s;

  --motion-ease:     ease;
  --motion-emphasis: cubic-bezier(.2, .75, .2, 1);


  /* ---------- اختصارات جاهزة ---------- */

  --transition-instant:  var(--motion-instant) var(--motion-ease);
  --transition-fast:     var(--motion-fast)    var(--motion-ease);
  --transition-base:     var(--motion-base)    var(--motion-ease);
  --transition-slow:     var(--motion-slow)    var(--motion-ease);
  --transition-slower:   var(--motion-slower)  var(--motion-ease);

  /*
  الاسم القديم. لم يُحذف لأن كودًا قائمًا يعتمد عليه.
  */

  --brand-transition: var(--transition-base);

}


/*
=========================================================
لوحة الرسم — خلفية الموقع كله
=========================================================

المشكلة

كانت الصفحات ترسم خلفياتها كتدرّجات فقط:

    body{ background: radial-gradient(...), linear-gradient(...); }

بلا لون صلب تحتها، و html بلا خلفية إطلاقًا. فكانت القيمة
المحسوبة rgba(0,0,0,0) — أي شفافة — في أغلب الصفحات.

والشفاف يعني أن المتصفح يرسم لوحته الافتراضية: الأبيض.

فتظهر خلفية بيضاء في كل موضع لا يغطيه التدرّج:
عند السحب الزائد على الهاتف، وفي الطباعة، وفي المساحة
تحت شريط العنوان، وقبل تحميل ملفات التنسيق.

وكانت الحالة غير متسقة أصلًا: بعض الصفحات rgb(9,11,12)
وبعضها rgb(9,10,11) والباقي شفاف.

الحل

لون صلب واحد على html، من التوكِن الرسمي. التدرّجات تبقى
كما هي وترسم فوقه، فلا يتغير شكل أي صفحة — لكن ما تحتها
لم يعد أبيض.

و color-scheme: dark يجعل المتصفح يلوّن ما لا نتحكم به:
أشرطة التمرير، وحقول النماذج الافتراضية، ومنطقة السحب
الزائد. بدونه تبقى بيضاء مهما فعلنا بالـCSS.

=========================================================
*/

html{
  background-color: var(--brand-bg);
  color-scheme: dark;
}

body{
  background-color: var(--brand-bg);
}


/*
=========================================================
تفضيل تقليل الحركة
=========================================================

من يضبط نظامه على تقليل الحركة يحصل على واجهة ساكنة دون
أن يفقد أي وظيفة. تُصفَّر المدد من مصدرها الواحد، فيسري
الأثر على كل انتقالات الموقع بلا استثناء ودون تكرار.

هذا يكمّل — ولا يلغي — قواعد prefers-reduced-motion
الموجودة أصلًا في base.css.

=========================================================
*/

@media (prefers-reduced-motion: reduce){

  :root{
    --motion-instant: .01ms;
    --motion-fast:    .01ms;
    --motion-base:    .01ms;
    --motion-slow:    .01ms;
    --motion-slower:  .01ms;
  }

}

/* =========================================================
   4.41 — الطباعة العربية
   =========================================================

   Manrope و Cormorant Garamond بلا حروف عربية إطلاقًا، فكان
   النص العربي يسقط إلى أيّ خط يقرره النظام: مختلف على كل
   جهاز، وغالبًا أثقل وأقل اتساقًا من بقية الصفحة.

   الاقتران مقصود:
     Amiri              نسخ كلاسيكي  ← يقابل Cormorant في العناوين
     IBM Plex Sans Arabic هندسي واضح ← يقابل Manrope في المتن

   والملفات لا تُنزَّل إلا عند وجود حرف عربي فعلًا: Google
   Fonts تُقسّم بـunicode-range، فالزائر الألماني لا يدفع
   بايتًا واحدًا مقابل هذه الإضافة.
   ========================================================= */

html[dir="rtl"] body,
html[lang="ar"] body{
  font-family:"IBM Plex Sans Arabic","Manrope",Arial,sans-serif;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{
  font-family:"Amiri","Cormorant Garamond",Georgia,serif;
}

/*
الأرقام تبقى لاتينية عمدًا: التواريخ وأحجام الملفات وأرقام
الصفحات تُقرأ أسرع بها، وهي الصيغة السائدة في النمسا حيث
يُستعمل الموقع.
*/
html[dir="rtl"] .vault-statistic-value,
html[dir="rtl"] .private-vault-stat-value,
html[dir="rtl"] time{
  font-family:"Manrope",Arial,sans-serif;
}