/* ═══════════════════════════════════════════════════════════
   رزرونو — لایه‌ی سازگاریِ Design System (DS Bridge)
   هدف: هم‌ترازکردنِ کامپوننت‌های قدیمیِ اپ‌ها با Design System،
        بدونِ لمسِ markupِ صفحات (نه ری‌دیزاین).

   دو کار:
   ۱) نگاشتِ توکن‌های قدیمیِ هر اپ (--r-sm, --t, --blue...) به توکن‌های DS.
      → هر کلاسی که از توکنِ قدیمی استفاده می‌کند، خودکار مقدارِ DS می‌گیرد.
   ۲) هم‌ترازیِ کامپوننت‌های پایه (.btn, .inp) به استانداردِ DS.

   باید *بعد از* CSS اصلیِ هر اپ لود شود تا واگرایی را اصلاح کند.
   ═══════════════════════════════════════════════════════════ */

/* ── ۱) نگاشتِ توکن‌های قدیمی → DS (منبعِ واحدِ حقیقت) ── */
:root {
  /* شعاع: قدیمی → DS (کاملِ مقیاس، رفعِ واگراییِ r-xl=24→20، r-2xl=32→28) */
  --r-xs:  var(--radius-xs);
  --r-sm:  var(--radius-sm);
  --r-md:  var(--radius-md);
  --r:     var(--radius-md);
  --r-lg:  var(--radius-lg);
  --r-xl:  var(--radius-xl);
  --r-2xl: var(--radius-2xl);
  /* حرکت: قدیمی → DS (کامل، شاملِ t-slow=340→320 و spring) */
  --t:      var(--motion-base);
  --t-fast: var(--motion-fast);
  --t-slow: var(--motion-slow);
  --ease:   var(--ease-out);
  --spring: var(--ease-spring);
  /* برند: قدیمی → DS (حفظِ تمِ هر اپ، فقط یکدست‌سازیِ منبع) */
  --blue: var(--brand-500);
  /* توجه: سایه (--sh-*) عمداً نگاشت نمی‌شود — هر اپ سایه‌ی متناسب با تمِ خود دارد
     (مشتریِ دارک = سایه‌ی قوی‌تر با rgba بالا). نگاشتِ سراسریِ elevation روشن،
     سایه را در دارک‌مود نامرئی می‌کرد. این یک رگرسیونِ بصری بود که اصلاح شد. */
}

/* ── ۲) هم‌ترازیِ .btn به استانداردِ DS (رفعِ واگراییِ سه‌گانه) ──
   مقادیرِ یکدستِ توکنی، جایگزینِ 11px/10px و 14px/13px پراکنده. */
.btn {
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);   /* block+inline کامل — override کاملِ shorthand قدیمی */
  font-size: var(--fs-md);
  min-height: var(--touch-min);
  border-radius: var(--radius-md);
  /* DS-006 §۴ (۲۰۲۶-۰۹-۱۰): فشارِ دکمه با فنر، نه با ease-out.
     الگویِ برداشته‌شده: بازخوردِ لمسیِ دکمه در iOS/Instagram — فروترفتنِ
     محسوس هنگامِ فشار و برگشتِ فنری با کمی overshoot هنگامِ رهاکردن. چرا
     این و نه چیزِ دیگر: تنها حرکتی است که در هر ضربه‌ی کاربر تکرار می‌شود،
     پس بیشترین اثر بر «حسِ خوب» را با کمترین سطحِ تغییر دارد.
     مدت دست‌نخورده (130ms = بازه‌ی short/utility در M3: 50–200ms). فقط منحنیِ
     transform فنری شد؛ رنگ/سایه/شفافیت همان ease-out می‌مانند تا فنر روی
     چیزی جز هندسه اعمال نشود.
     reduced-motion: سیاستِ سراسریِ tokens.css:187 مدت را 0.01ms می‌کند (فنر
     حذف می‌شود). ⚠️ ولی app.css:534 که می‌خواست transform را هم خنثی کند،
     زیرِ همین فایل می‌بازد — چون ds-bridge آخر لود می‌شود و `.btn:active`
     اینجا با همان specificity دیرتر می‌آید. اندازه‌گیری (DS-006 §۴) نشان داد
     دکمه در reduced-motion هنوز ۴٪ جمع می‌شد، بی‌حرکت ولی جمع. پس نیتِ
     app.css:534 اینجا، در لایه‌ای که واقعاً برنده است، تکرار می‌شود (پایین). */
  transition: transform var(--motion-fast) var(--ease-spring),
              background var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
}
.btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  /* بازخوردِ فشار فقط از رنگ/سایه می‌آید؛ هیچ تغییرِ هندسه‌ای، حتی آنی. */
  .btn:active { transform: none; }
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ۳۶px زیرِ حداقلِ ۴۴px هر دو پلتفرم بود (WCAG 2.5.5). «کوچک» به عرض و وزنِ
   بصری برمی‌گردد، نه به کوچک‌کردنِ ناحیه‌ی لمس. */
.btn-sm { min-height: var(--touch-min); font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3); }
.btn-lg { min-height: 44px; font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-6); }

/* ── ۲ب) هم‌ترازیِ دکمه‌های آیکونیِ نوارِ بالا (.nav-icn) به --touch-min ──
   DS-007 §۶ (۲۰۲۶-۰۹-۱۰). app.css:482 آن‌ها را ۳۶×۳۶ تعریف می‌کند — زیرِ
   --touch-min (۴۴px، WCAG 2.5.5)، همان نقصی که برای .btn-sm بسته شد. دو
   مصرف‌کننده‌ی زنده: زنگِ اعلان و جست‌وجو/فرمان (index.html:81,85).
   ⚠️ چرا .nav-icn و نه یک .icon-btnِ تازه در foundation: نامِ .icon-btn در
   اپِ مشتری گرفته است (app.css:631 و :1026 — دو تعریف، هر دو زیرِ ۴۴) و
   استفاده می‌شود (chat.js)؛ اولیه‌ی هم‌نامِ متفاوت یا شکلِ چت را عوض می‌کرد
   یا زیرِ app.css بی‌اثر می‌ماند. LE این را پیش از تصادم گرفت.
   فقط ابعاد و حرکت؛ رنگ/شکلِ خودِ اپ دست‌نخورده. */
.nav-icn {
  width: var(--touch-min); height: var(--touch-min);
  transition: transform var(--motion-fast) var(--ease-spring),
              background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.nav-icn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .nav-icn:active { transform: none; } }

/* ── ۳) هم‌ترازیِ .inp (کلاسِ قدیمی) به استانداردِ .field-input ── */
.inp {
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);   /* توکنی — override کاملِ 12px/15px قدیمی */
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.inp:focus {
  border-color: var(--brand-500);
  box-shadow:0 0 0 3px rgba(79,70,229,0.15);
/* ⚠️ الگویِ عمدی — دو بار نوشتنِ یک ویژگی، اشتباه نیست (۲۰۲۶-۰۸-۲۴):
   خطِ اول مقدارِ ثابتِ rgba است، خطِ دوم همان با `color-mix()`.
   `color-mix` از Chrome 111 / Safari 16.2 / Firefox 113 پشتیبانی می‌شود؛
   مرورگرِ قدیمی‌تر آن اعلانِ نامعتبر را **کلاً دور می‌ریزد**. بدونِ خطِ اول،
   نتیجه «رنگِ کمی متفاوت» نبود بلکه نبودِ کاملِ آن ویژگی می‌شد: حلقه‌ی فوکوس
   ناپدید (افتِ دسترسی‌پذیری) و پس‌زمینه‌ی پدِ کشیدنی نامرئی (خرابیِ عملکردی).
   پس این دو خط را «تمیز» نکنید — ترتیبشان هم مهم است. */
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 15%, transparent);
}
.inp[aria-invalid="true"] { border-color: var(--danger); }

/* ── ۴) هم‌ترازیِ chip قدیمی (.opt) به استانداردِ .chip ── */
.opt {
  /* هم‌تراز با .chip — هر دو زیرِ --touch-min بودند. */
  min-height: var(--touch-min);
  border-radius: var(--radius-full);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.opt:focus-visible { box-shadow: var(--focus-ring); }

/* ── ۵) هم‌ترازیِ کارتِ قدیمی (.panel / .glass) به elevation یکدست ── */
.panel { border-radius: var(--radius-lg); }