/* ============================================================================
   خطوط الهوية — مستضافة محليًّا
   ============================================================================
   Lama Sans للعربية · Space Grotesk للاتينية والأرقام.
   يحلّان محلّ 42 عائلة خطّ كانت تُجلب من شبكة جوجل في 116 ملفًا.

   لماذا الاستضافة المحلية: رابط جوجل يحجب الرسم حتى يتمّ استعلام DNS واتصال
   TLS بمضيف خارجي، ثم يجلب ملف CSS ثم ملفات الخطّ. محليًّا يُجلب الخطّ من
   نفس الاتصال المفتوح أصلًا — وبلا تتبّع طرف ثالث.

   الأوزان المشحونة مختارة بالقياس لا بالتخمين: 700 (346 استعمالًا) و800 (264)
   يحملان 90% من الاستعمال، ثم 900 (36) و400 (11 وهو وزن النصّ الموروث).
   الوزنان 600 (30) و500 (13) غير مشحونين — يسقط عليهما المتصفّح للأقرب
   (600←700 · 500←400) وهو فرق لا يُلحظ، ويوفّر 86 ك.ب.

   صيغة woff2 وحدها: يدعمها كل متصفّح منذ 2016، وأصغر من otf/ttf بـ47-64%.
   الحجم الكلّي 240 ك.ب تُخزَّن في الكاش مرّةً واحدة.

   font-display: swap — النصّ يظهر فورًا بخطّ النظام ثم يُبدَّل. بلا هذا يبقى
   النصّ غير مرئي حتى يصل الخطّ (حجب الرسم من جديد).

   روابط الخطوط **نسبية** لا مطلقة: النسبيّة تُحلّ من موقع ملف CSS نفسه، فتعمل
   مخدومةً من الجذر (/assets/fonts/…) وتعمل أيضًا عند فتح ملف معاينة بالنقر
   المزدوج (file://). المطلقة تنكسر في الحالة الثانية لأنها تقصد جذر القرص.
   شرطها الوحيد أن يبقى brand.css في جذر المشروع — وهو مكانه.
   ========================================================================= */
@font-face {
    font-family: 'Lama Sans';
    src: url('assets/fonts/lama-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Lama Sans';
    src: url('assets/fonts/lama-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Lama Sans';
    src: url('assets/fonts/lama-800.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Lama Sans';
    src: url('assets/fonts/lama-900.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('assets/fonts/grotesk-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('assets/fonts/grotesk-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================================
   brand.css — هوية ساو تيك لايف اللونية · المصدر الواحد
   ============================================================================
   سمتان داكنتان لا ثالثة، والتبديل بينهما هو الخيار الوحيد:

       (الافتراضي)              ق — بنفسجي
       body[data-theme="peach"]  ظ — خوخي + لافندر

   ── القاعدة الحاكمة ────────────────────────────────────────────────────────
   سلّم واحد من ثماني درجات: **الأغمق لأكبر مساحة، والأفتح لأصغر تفصيل**.
       950 خلفية الصفحة · 900 البطاقات · 800 الحقول · 700 الحدود
       600 —            · 500 الهوية   · 400 نصّ ثانوي · 300 نصّ أساسي

   ── الأسماء القديمة ────────────────────────────────────────────────────────
   الكتلة الثانية في كل سمة تشتقّ أسماء اللوحة القديمة (--purple / --lux-rgb /
   --text-dim …) من السلّم. سببها أن dashboard.css وui.css وadmin.html تستعمل
   تلك الأسماء في آلاف المواضع، وأن نظام السمات القائم يعيد تعريفها. فاشتقاقها
   هنا يجعل كل ذلك يتبع الهوية الجديدة بلا لمس سطر واحد فيه.

   ── الدلالات ───────────────────────────────────────────────────────────────
   نجاح/خطر/تحذير/معلومة **لا تتبع السمة**: الأحمر يجب أن يبقى أحمر مهما كانت
   الهوية وإلا ضاع معناه. تُعرَّف مرّةً واحدة في آخر الملف.
   ========================================================================= */

/* ═══════════════════════ ق — بنفسجي (الافتراضي) ═══════════════════════ */
:root {
    --p-950: #1d0a33;   /* خلفية الصفحة */
    --p-900: #2b1049;   /* البطاقات */
    --p-800: #441a6d;   /* الحقول */
    --p-700: #5a1595;   /* الحدود */
    --p-600: #6f10b7;
    --p-500: #9c1fd8;   /* الهوية */
    --p-400: #c95ce8;   /* نصّ ثانوي */
    --p-300: #f0d5fb;   /* نصّ أساسي — تباين 13.7:1 */

    --muted: #7c658d;   /* نصّ خافت */
    --ink:   #130621;   /* داكن الزرّ الأساسي — أغمق من الخلفية فيبرز */

    /* ثلاثيّات rgb — تلزم لـ rgba(var(--x), .28)، ولا تُشتقّ من hex في CSS */
    --p-500-rgb: 156, 31, 216;
    --p-400-rgb: 201, 92, 232;
    --p-900-rgb: 43, 16, 73;
    --p-950-rgb: 29, 10, 51;    /* غلاف النوافذ */

}

/* ═══════════════════════ ظ — خوخي + لافندر ═══════════════════════════
   نفس الأدوار، سلّم آخر. الخوخي يحمل النصّ الثانوي واللافندر الهوية،
   فتبقى الصفحة دافئة بلا أن يصرخ لونٌ فوق آخر.                          */
body[data-theme="peach"] {
    --p-950: #2e2a52;
    --p-900: #4d4585;
    --p-800: #6b5fb0;
    --p-700: #9284ed;
    --p-600: #b8a4ed;
    --p-500: #dbc4f1;   /* الهوية — تباين 8.4:1 */
    --p-400: #efd9cb;   /* الخوخي */
    --p-300: #fdf6f1;   /* تباين 12.5:1 */

    --muted: #8b869a;
    --ink:   #1e1b35;

    /* هنا الهوية فاتحة أصلًا (8.4:1) فتصلح للنصّ الصغير بلا تفتيح */
    --accent-text: var(--p-500);

    --p-500-rgb: 219, 196, 241;
    --p-400-rgb: 239, 217, 203;
    --p-900-rgb: 77, 69, 133;
    --p-950-rgb: 46, 42, 82;
}

/* ═══════════ سمات الباقات القديمة (فضية/ذهبية/ماسية) ═══════════════════
   dashboard.css يعرّف ثلاث سمات مربوطة بالاشتراك، وكلٌّ منها يعيد تعريف
   --purple و--lux-rgb وأخواتهما بأولوية body[data-theme] — أعلى من body.
   فلولا التحييد لغلبت الهوية الجديدة عند كل مشترك.

   **الجميع يرى ق** — هي الهوية. لا سمةَ تُفرض على أحد بحسب باقته.
   (جُرّب ربط الماسية بـظ ليبقى للمشترك شكل مميّز، فرُفض: المالك اعتمد ق
    أساسيةً للكل، وفوجئ برؤية الخوخي بعد التحديث. ظ تبقى معرَّفة وتُفعَّل
    بـdata-theme="peach" حين نضيف منتقيًا.)

   التحييد يتمّ في كتلة الاشتقاق أدناه عبر تكرار المحدِّد بصيغة body[data-theme]:
   تساوي أولوية كتل الباقات وتغلبها بالترتيب — وbrand.css يُحمَّل بعد
   dashboard.css. ولذلك **يجب أن يبقى ترتيب الوسمين كما هو**.               */

/* ═══════════════════ اشتقاق الأسماء القديمة — على body لا :root ═══════
   لماذا body تحديدًا: قيمة المتغيّر تُحسم **عند العنصر الذي يعرّفها**، ثم
   تُورَّث محسومة. فلو كُتب `--input-bg: var(--p-800)` في :root لحُسم على
   <html> بلون السمة الافتراضية، وسمةُ ظ تعيد تعريف --p-800 على <body>
   فتأتي بعد فوات الأوان ⇒ الحقول لا تتغيّر لونها أبدًا. (وقعت فعلًا.)
   وكتابته على body تجعله يُحسم بعد أن تكون السمة قد بدّلت السلّم.
   الخلفية والبطاقات لم تتأثّر لأنها تستعمل var(--p-900) مباشرةً بلا وسيط.
   ملاحظة: هذي القاعدة تُلزمنا ألّا نعرّف أي رمز مشتقّ في :root — أي رمز
   قيمته var(...) على سلّم السمة مكانه هنا.

   ويُكرَّر المحدِّد بصيغة body[data-theme] كي يساوي أولوية كتل سمات الباقات
   في dashboard.css فيغلبها بالترتيب — وإلا بقيت تفرض ألوانها القديمة. */
body,
body[data-theme] {
    --purple:        var(--p-500);
    --purple-light:  var(--p-400);
    --purple-hi:     var(--p-600);
    --purple-dark:   var(--p-900);
    --gray:          var(--p-400);
    --dark:          var(--p-950);
    --darker:        var(--ink);
    --bg-deep:       var(--p-950);
    --text:          var(--p-300);
    --text-strong:   #ffffff;
    --text-dim:      var(--p-400);
    --text-muted:    var(--muted);
    --card-bg:       var(--p-900);
    --card-border:   var(--p-700);
    --input-bg:      var(--p-800);
    --input-border:  var(--p-700);
    --lux-rgb:       var(--p-500-rgb);
    --lux-light-rgb: var(--p-400-rgb);
    --c-dark-rgb:    var(--p-900-rgb);
    --btn-ink:       var(--ink);
    --gold:          var(--p-400);   /* اسم قديم — كان يعني الفاتح لا الذهبي */
    --shadow-md:     0 4px 15px rgba(var(--p-500-rgb), .30);

    /* زخارف سمات الباقات القديمة — تتبع الهوية بدل ألوانها المثبَّتة.
       --lux-frame كان تدرّج قوس قزح للماسية، و--lux-glow هالتها الزرقاء. */
    --lux-frame:     linear-gradient(135deg, var(--p-400), var(--p-500), var(--p-700));
    --lux-glow:      0 0 30px rgba(var(--p-500-rgb), .16);

    /* الهوية على نصّ صغير: في ق يعطي 500 تباين 3.1:1 — كافٍ للعناصر والنصّ
       الكبير (عتبة 3:1) لا للصغير (عتبة 4.5:1)، فالعناوين الصغيرة تأخذ 400.
       وفي ظ الهوية فاتحة أصلًا (8.4:1) فتصلح للصغير بلا تفتيح. */
    --accent-text:   var(--p-400);
}

/* ═══════════════════════ الدلالات — ثابتة عبر السمتين ═══════════════════ */
:root {
    --ok: #34d399;
    --ok-strong: #10e69a;
    --ok-soft: #99ffbb;
    --ok-rgb: 52, 211, 153;

    --danger: #ff6b6b;
    --danger-soft: #ff8888;
    --danger-strong: #ff5252;
    --danger-rgb: 255, 107, 107;
    --red: var(--danger);          /* اسم قديم */

    --warn: #fbbf24;
    --warn-soft: #e8d581;
    --warn-rgb: 251, 191, 36;

    --info: #7dd3fc;
    --info-strong: #0ea5e9;
    --info-rgb: 125, 211, 252;

    --green: var(--ok);            /* اسم قديم */
    --text-neutral: #9aa3b8;
    --text-neutral-soft: #cbd5e1;
}

/* ═══════════════════════ الشكل والخطوط والحركة ═══════════════════════ */
:root {
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 22px;
    --r-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, .45);

    /* الترتيب مقصود: 'Lama Sans' أولًا فيغطّي العربية، و'Space Grotesk' يليه
       فيلتقط اللاتينية والأرقام التي لا يغطّيها الأول — فيظهر كل نصٍّ بخطّه
       بلا الحاجة لوسم لغة أو صنف على كل عنصر. */
    --font-body: 'Lama Sans', 'Space Grotesk', system-ui, sans-serif;
    --font-lat:  'Space Grotesk', 'Lama Sans', system-ui, sans-serif;   /* أرقام وعناوين لاتينية */
    --font-mono: 'Cascadia Code', Consolas, ui-monospace, monospace;

    --t-fast: 120ms;
    --t-base: 160ms;
    --t-slow: 320ms;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════ الهالات الجوّية — تتبع الهوية ═══════════════════════════════
   دائرتان مموّهتان خلف المحتوى، تُعرَضان لمن عليه data-theme (زخرفة الباقات).
   كانت الأولى **زرقاء #2b6cff** — لون الماسية القديم، مثبَّتًا في رمز
   (--inf-58b) لا يتبع أي سمة، فبقي يظهر بعد توحيد الهوية.
   الأولوية: body[data-theme] .lux-aura.a1 تفوق .lux-aura.a1 في dashboard.css. */
body[data-theme] .lux-aura.a1 {
    background: radial-gradient(circle, var(--p-600), transparent 66%);
}
body[data-theme] .lux-aura.a2 {
    background: radial-gradient(circle, var(--p-500), transparent 66%);
}