/* الوضع الداكن + أزرار اللغة والثيم. التحكم من assets/i18n.js:
 *   html[data-theme="dark"] = داكن بالإجبار · html[data-theme="light"] = فاتح بالإجبار · من غير attribute = حسب الجهاز.
 * الألوان كلها tokens (assets/style.css) فالتغيير هنا بس في القيم. نفس القيم متكررة مرتين (media + attribute) لأن CSS ملوش وراثة بين الاتنين. */

/* ===== الداكن حسب الجهاز (لو المستخدم ماختارش فاتح) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #0b1331;
    --cream-2: #121c42;
    --white: #172250;
    --text: #e3eaff;
    --muted: #a3b2dd;
    --fg: #eef3ff;
    --line: #6f86d9;
    --header-bg: rgba(11, 19, 49, .92);
    --soft: #262b57;
    --good-bg: #123a37;
    --bad-bg: #44203a;
    --hover-bg: #2c3566;
    --muted2: #a9b8e6;
    --danger: #ff8aa8;
    --ok: #5ee3a1;
    --track: #1d2a5c;
    --shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 24px 40px -18px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0b1331;
  --cream-2: #121c42;
  --white: #172250;
  --text: #e3eaff;
  --muted: #a3b2dd;
  --fg: #eef3ff;
  --line: #6f86d9;
  --header-bg: rgba(11, 19, 49, .92);
  --soft: #262b57;
  --good-bg: #123a37;
  --bad-bg: #44203a;
  --hover-bg: #2c3566;
  --muted2: #a9b8e6;
  --danger: #ff8aa8;
  --ok: #5ee3a1;
  --track: #1d2a5c;
  --shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 24px 40px -18px rgba(0, 0, 0, .6);
}

/* ===== تعديلات الداكن اللي مش tokens ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { background: radial-gradient(circle at 10% 15%, rgba(253, 200, 9, .14), transparent 38%), radial-gradient(circle at 92% 70%, rgba(23, 213, 240, .12), transparent 42%), var(--cream); }
  :root:not([data-theme="light"]) .hero-logo { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
  :root:not([data-theme="light"]) .ruby, :root:not([data-theme="light"]) .sky { -webkit-text-stroke-color: #031b54; }
  :root:not([data-theme="light"]) img.brand-img, :root:not([data-theme="light"]) .av { background-color: transparent; }
  :root:not([data-theme="light"]) .gem-counter { background: #031b54; color: #f3faff; border: 2px solid var(--line); }
  :root:not([data-theme="light"]) .kicker:not(.kicker-light):not(.kicker-sun) { background: rgba(252, 47, 101, .18); color: #ff8aa8; }
  :root:not([data-theme="light"]) .wave path, :root:not([data-theme="light"]) .wave polygon { fill: var(--cream-2); }
}
:root[data-theme="dark"] .hero { background: radial-gradient(circle at 10% 15%, rgba(253, 200, 9, .14), transparent 38%), radial-gradient(circle at 92% 70%, rgba(23, 213, 240, .12), transparent 42%), var(--cream); }
:root[data-theme="dark"] .hero-logo { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
:root[data-theme="dark"] .ruby, :root[data-theme="dark"] .sky { -webkit-text-stroke-color: #031b54; }
:root[data-theme="dark"] .gem-counter { background: #031b54; color: #f3faff; border: 2px solid var(--line); }
:root[data-theme="dark"] .kicker:not(.kicker-light):not(.kicker-sun) { background: rgba(252, 47, 101, .18); color: #ff8aa8; }
:root[data-theme="dark"] .wave path, :root[data-theme="dark"] .wave polygon { fill: var(--cream-2); }

/* ===== أزرار اللغة والثيم ===== */
.yy-prefs { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.site-header .yy-prefs { margin-inline-start: 4px; }
.yy-pref {
  min-width: 42px; height: 42px; padding: 0 .7em; display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1; color: var(--fg);
  background: var(--white); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line); cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.yy-pref:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--line); }
.yy-pref:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.yy-theme { font-size: 1.15rem; }
html[dir="ltr"] .lead-en { text-align: left; }

/* الموبايل: الشريط ضيّق، فنصغّر الأزرار */
@media (max-width: 560px) {
  .yy-pref { min-width: 38px; height: 38px; padding: 0 .5em; font-size: .85rem; }
  .yy-prefs { gap: 4px; }
}

/* الإنجليزي أطول: نقفل القايمة في الهامبرجر بدري شوية */
.nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1140px) {
  html[lang="en"] .nav-toggle { display: inline-flex; }
  html[lang="en"] .nav {
    position: absolute; top: 100%; inset-inline: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 3px solid var(--line); padding: 8px 16px 16px; display: none;
  }
  html[lang="en"] .nav.open { display: flex; }
  html[lang="en"] .nav a { padding: .8em 1em; }
}