/* ===========================================================
   Urealm — الرموز.

   نظامٌ واحد، وضعان: **ليل ونهار**. لا لوحات ولا أصباغ.

   ▸ **الأبيض والأسود هما التصميم، لا خلفيّته.** ما يفصل سطحًا عن سطح
     هنا هو الضوء والمسافة والخطّ — لا اللون. وهذا أصعب من التلوين
     وأبقى منه: واجهةٌ تصحّ بلا لون تصحّ بكل لون، والعكس لا.

   ▸ **الفعل الأوّل انقلابٌ لا صبغة.** الزرّ الأساسيّ حبرٌ على أرض
     الحبر: أسود على الفاتح، أبيض على الداكن. أقوى تباينٍ ممكن في
     الصفحة يذهب إلى الشيء الوحيد الذي نريد أن يُضغط. ولو صُبغ بلونٍ
     لصار واحدًا من ألوانٍ كثيرة تتزاحم.

   ▸ **ولونٌ واحد، ولا يزيّن.** `--accent` لا يظهر إلا حيث يحمل معنًى:
     التركيز، والتحديد، والرابط، والحالة الجارية. فحيثما رأيتَ لونًا
     في هذه الواجهة فثمّة شيءٌ يقوله.

   ▸ والدلالات الثلاث (نجاح · تنبيه · خطر) مخفوضة الإشباع عمدًا: هي
     معلومةٌ لا زينة، وتُقرأ مع أيقونةٍ أو كلمة لا باللون وحده.

   ▸ **الوضع الليليّ أسودُ حقيقيّ** `#000`. على شاشات OLED هو انطفاءٌ
     تامّ لا رماديّ داكن، والأسطح فوقه تُرفع بالضوء لا بالظلّ — لأن
     الظلّ لا يُرى على الأسود، والحدّ يُرى.
   =========================================================== */

:root {
  color-scheme: dark;

  /* ---------- السلّم أحاديّ اللون: الليل ----------
     من العدم إلى المرتفع. كل درجةٍ تُرى فوق التي تحتها بلا حدّ،
     والحدّ يُضاف حين يجب أن يُقرأ الفصل لا أن يُحسّ. */
  --bg-void: #000;
  --bg-base: #000;
  --bg-deep: #08080a;
  --bg-surface: #101012;
  --bg-surface-2: #17171a;
  --bg-elevated: #202024;
  --bg-inset: rgb(255 255 255 / 4%);
  /* زجاجٌ معتم فوق محتوى المساحة: المقبض واللوحات العائمة.
     كان مستعملًا بلا تعريف، فكان المقبض شفّافًا تمامًا. */
  --bg-frost: rgb(26 26 30 / 82%);
  --bg-sunken: #050506;

  /* ---------- الحبر ----------
     أربع درجات لا أكثر. من زاد عليها لم يعد يميّز بينها. */
  --fg: #fafafa;
  --fg-soft: #a3a3ab;
  --fg-mute: #92929d;
  --fg-faint: #777782;
  --fg-invert: #09090b;

  /* ---------- الخطوط والحالات ---------- */
  --line: rgb(255 255 255 / 12%);
  --line-strong: rgb(255 255 255 / 24%);
  --hover: rgb(255 255 255 / 7%);
  --active: rgb(255 255 255 / 11%);
  --selected: rgb(255 255 255 / 9%);
  /* حافّةٌ داخليّة تفصل السطح عمّا تحته بلا خطّ مرسوم.
     **ظلٌّ لا لون:** أحد عشر موضعًا تكتب `box-shadow: …, var(--rim)`،
     ولونٌ في مقام ظلّ يُسقط التصريح كلّه صامتًا. */
  --rim: inset 0 1px 0 rgb(255 255 255 / 6%);

  /* ---------- اللون الوحيد ----------
     أزرقٌ نظاميّ لا علامة تجارية: يُقرأ رابطًا وتركيزًا وتحديدًا في
     كل ثقافةٍ بلا تعليم. و`--accent` قيمةٌ سداسيّة صريحة لأن
     `state/look.js` يقرؤه ويحوّله إلى HSL — و`color-mix` يكسر ذلك. */
  --accent-h: 220;
  --accent: #5c93ff;
  --accent-hover: #85adff;
  --accent-fg: #a8c5ff;
  --accent-soft: rgb(92 147 255 / 14%);
  --accent-line: rgb(92 147 255 / 45%);
  --accent-contrast: #04060d;

  /* ---------- الدلالات ---------- */
  --success: #4ade80;
  --success-soft: rgb(74 222 128 / 13%);
  --warn: #fbbf24;
  --warn-soft: rgb(251 191 36 / 13%);
  --danger: #f87171;
  --danger-soft: rgb(248 113 113 / 13%);

  /* ---------- الأسطح المركّبة ---------- */
  --scrim: rgb(0 0 0 / 72%);
  --glass: rgb(10 10 12 / 88%);

  /* الظلّ لا يكاد يُرى على الأسود، فالارتفاع هنا حدٌّ داخليّ لا ظلّ.
     ثلاث درجاتٍ محفوظة للوضع النهاريّ حيث تعمل فعلًا. */
  --shadow-1: 0 0 0 1px rgb(255 255 255 / 6%);
  --shadow-2: 0 0 0 1px rgb(255 255 255 / 8%), 0 8px 24px -12px rgb(0 0 0 / 80%);
  --shadow-3: 0 0 0 1px rgb(255 255 255 / 10%), 0 24px 56px -20px rgb(0 0 0 / 90%);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 14%), 0 12px 32px -14px rgb(0 0 0 / 85%);

  /* ---------- أثرٌ بصريّ خفيف ---------- */
  --grain-opacity: 0;
  --ambient-strength: 0;
  --parallax: 1;
}

/* ---------- النهار ----------
   ليس عكسًا للّيل. الورق الأبيض يحتاج حدودًا أوضح وظلالًا حقيقية،
   والأزرق يُغمَق ليصمد عليه. عكسُ القيم آليًّا يعطي واجهةً باهتة
   حدودُها لا تُرى وظلالُها سُخام. */
:root[data-mode="day"] {
  color-scheme: light;

  --bg-void: #f4f4f5;
  --bg-base: #fff;
  --bg-deep: #fafafa;
  --bg-surface: #fff;
  --bg-surface-2: #f7f7f8;
  --bg-elevated: #fff;
  --bg-inset: rgb(9 9 11 / 4%);
  --bg-frost: rgb(255 255 255 / 86%);
  --bg-sunken: #f4f4f5;

  --fg: #09090b;
  --fg-soft: #52525b;
  --fg-mute: #52525b;
  --fg-faint: #65656f;
  --fg-invert: #fafafa;

  --line: rgb(9 9 11 / 10%);
  --line-strong: rgb(9 9 11 / 20%);
  --hover: rgb(9 9 11 / 4%);
  --active: rgb(9 9 11 / 8%);
  --selected: rgb(9 9 11 / 6%);
  --rim: inset 0 1px 0 rgb(255 255 255 / 90%);

  --accent-h: 224;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-fg: #1e3a8a;
  --accent-soft: rgb(29 78 216 / 9%);
  --accent-line: rgb(29 78 216 / 40%);
  --accent-contrast: #fff;

  --success: #15803d;
  --success-soft: rgb(21 128 61 / 10%);
  --warn: #a16207;
  --warn-soft: rgb(161 98 7 / 10%);
  --danger: #b91c1c;
  --danger-soft: rgb(185 28 28 / 9%);

  --scrim: rgb(9 9 11 / 40%);
  --glass: rgb(255 255 255 / 88%);

  --shadow-1: 0 1px 2px rgb(9 9 11 / 5%), 0 0 0 1px rgb(9 9 11 / 6%);
  --shadow-2: 0 2px 8px -2px rgb(9 9 11 / 8%), 0 0 0 1px rgb(9 9 11 / 7%);
  --shadow-3: 0 16px 48px -12px rgb(9 9 11 / 18%), 0 0 0 1px rgb(9 9 11 / 8%);
  --shadow-lift: 0 8px 24px -8px rgb(9 9 11 / 14%), 0 0 0 1px rgb(9 9 11 / 10%);
}

/* ===========================================================
   ما لا يتغيّر بالوضع
   =========================================================== */

:root {
  /* ---------- الخطوط: كما هي، ثلاثة أصوات ----------
     ألكسندريا للعرض · بلكس سانس أرابيك للمتن · بلكس مونو للبيانات.
     العربية تسبق الاحتياطيّ في وجه البيانات لأن مونو بلا عربية. */
  --font-display: "Alexandria", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SFMono-Regular", monospace;

  /* سلّمٌ بنسبة ١٫٢ في المتن، تتّسع إلى ١٫٣ في مقامات العرض. */
  --font-scale: 1;
  --t-2xs: calc(0.75rem * var(--font-scale));     /* 12 — تسمية */
  --t-xs: calc(0.8125rem * var(--font-scale));    /* 13 — بيانات */
  --t-sm: calc(0.875rem * var(--font-scale));     /* 14 — ثانوي */
  --t-base: calc(0.9375rem * var(--font-scale));  /* 15 — متن */
  --t-md: calc(1.0625rem * var(--font-scale));    /* 17 */
  --t-lg: calc(1.1875rem * var(--font-scale));    /* 19 */
  --t-xl: calc(1.5rem * var(--font-scale));       /* 24 */
  --t-2xl: calc(1.9375rem * var(--font-scale));   /* 31 */
  --t-3xl: calc(2.5rem * var(--font-scale));      /* 40 */
  --t-4xl: calc(3.25rem * var(--font-scale));     /* 52 */

  --lh-flat: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.7;

  /* التتبّع يضيق كلّما كبر الحجم، ويتّسع في التسميات الصغيرة. */
  --track-display: -0.02em;
  --track-tight: -0.01em;
  --track-label: 0.08em;

  /* الأوزان. */
  --w-normal: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black: 800;

  /* ---------- شبكة أربعة ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-12: 80px;
  --sp-16: 120px;

  /* ---------- الأنصاف ----------
     أضيق ممّا كان: التصميم الأحاديّ يحتاج حوافّ تُقرأ. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------- القياسات ---------- */
  --measure: 72ch;
  --measure-text: 66ch;
  --rail-w: 248px;
  --topbar-h: 56px;
  --keyboard: 0px;

  /* العلامة كقناع لا كصورة: تُطلى بلون الحبر فتنقلب مع الليل والنهار
     بلا نسختين. ويُشار إلى الملفّ نفسه لا إلى نسخةٍ مضمَّنة، فلا
     يفترقان حين يتغيّر الشعار. */
  --logo-mask: url("../assets/logo.svg");

  /* اتّجاه الإزاحة. الخصائص المنطقيّة تكفي الهوامش والحدود، لكنّ
     `translate` لا منطقيّ له — فيُقلب بإشارةٍ واحدة بدل تكرار كل
     قاعدةٍ مرّتين. */
  --flip: 1;

  /* ---------- الزمن ----------
     الخروج أسرع من الدخول: الواجهة تستجيب أسرع ممّا تُعلن. */
  --dur-1: 90ms;
  --dur-2: 150ms;
  --dur-3: 240ms;
  --dur-4: 380ms;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-gate: cubic-bezier(0.5, 0, 0, 1);

  /* ---------- الطبقات ---------- */
  --z-base: 0;
  --z-scene: 1;
  --z-sticky: 10;
  --z-rail: 20;
  --z-drawer: 30;
  --z-overlay: 40;
  --z-menu: 50;
  --z-modal: 60;
  --z-handle: 70;
  --z-toast: 80;

  /* ---------- حواف الجهاز ---------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---------- هوية العالم ----------
     يكتبها `state/look.js` على كل بطاقة/مشهد. القيم هنا احتياطٌ
     محايد فحسب، فلا يظهر عالمٌ بلا هوية مكسورًا. */
  --w: 0;
  --w-h: 0;
  --w-s: 0%;
  --w-l: 50%;
  --w-ink: var(--fg);
  --w-line: var(--line);
  --w-veil: var(--bg-surface);
  --w-dim: var(--fg-mute);
  --w-glow: transparent;
  --w-lift: var(--shadow-2);
}

/* ---------- الكثافة ----------
   ثلاث درجات تغيّر الإيقاع لا المقاس: المسافات تتنفّس أو تنضغط،
   والنصّ يبقى مقروءًا في الثلاث. */
:root { --density: 1; }
:root[data-density="compact"] { --density: 0.82; }
:root[data-density="spacious"] { --density: 1.18; }

/* ---------- تباينٌ عالٍ ----------
   لا يغيّر اللوحة بل يشدّ الخطوط والحبر الثانويّ. */
:root[data-contrast="high"] {
  --line: rgb(255 255 255 / 26%);
  --line-strong: rgb(255 255 255 / 46%);
  --fg-soft: #d4d4d8;
  --fg-mute: #a1a1aa;
  --fg-faint: #71717a;
}

:root[data-contrast="high"][data-mode="day"] {
  --line: rgb(9 9 11 / 30%);
  --line-strong: rgb(9 9 11 / 52%);
  --fg-soft: #27272a;
  --fg-mute: #3f3f46;
  --fg-faint: #52525b;
}

/* ---------- أهدافٌ أكبر ---------- */
:root[data-touch="large"] { --tap: 52px; }
:root { --tap: 44px; }

/* ---------- الاتّجاه ---------- */
:root[dir="rtl"] { --flip: -1; }
:root[dir="ltr"] { --flip: 1; }