/* صورة خلفية الموقع — ملفات محلية داخل المشروع، بلا أي رابط خارجي.
 *
 * وُلِّد هذا الملف بالأمر: node tools/set-background.mjs <الصورة>
 * ولا يُشير إلا إلى ملفات موجودة فعلًا في assets/، فلا ينتج أي خطأ ٤٠٤.
 *
 * مقاسان: الجوال يحمّل النسخة الصغيرة، والشاشات الكبيرة النسخة الكبيرة —
 * فلا يدفع الهاتف ثمن صورة سطح مكتب.
 *
 * ⚠ مزلق CSS مقصود التعامل معه: الروابط النسبية داخل **الخصائص المخصّصة**
 * (custom properties) تُحلّ مقابل **عنوان المستند** لا مقابل ملف الأنماط الذي
 * عُرّفت فيه. لذلك تُكتب المسارات كما يراها index.html بالضبط (./assets/…).
 */

:root {
  --bg-image: image-set(
    url('./assets/background-sm.webp') type('image/webp'),
    url('./assets/background-sm.jpg') type('image/jpeg')
  );
}

@media (min-width: 701px) {
  :root {
    --bg-image: image-set(
    url('./assets/background-lg.webp') type('image/webp'),
    url('./assets/background-lg.jpg') type('image/jpeg')
  );
  }
}

/* بديل للمتصفحات التي لا تدعم image-set بلا بادئة. */
@supports not (background-image: image-set(url('./assets/background-lg.jpg') type('image/jpeg'))) {
  :root {
    --bg-image: url('./assets/background-lg.jpg');
  }
}