/* ══ theme.css — ساخته‌شده از ui/design-tokens.json ═══════════════════════════
 *
 *   ⚠ دستی ویرایش نکنید. منبعِ حقیقت design-tokens.json است؛ این فایل را
 *     tools/build-theme.js می‌سازد (در بوتِ سرور، بعد از هر ذخیرهٔ اطلس،
 *     یا با `node tools/build-theme.js`). هر تغییرِ دستی با ساختِ بعدی
 *     پاک می‌شود — و تستِ قانونِ اساسی هم آن را قرمز می‌کند.
 *
 * قاعده
 *   ۱) هیچ فایلِ دیگری رنگِ خام ننویسد — نه CSS، نه JS.
 *   ۲) توکن‌ها معنایی‌اند نه ظاهری: `--surface` یعنی «سطحی که محتوا رویش
 *      می‌نشیند»، نه «سفید». اسمِ ظاهری در تاریکی دروغ می‌شود.
 *   ۳) نامِ توکن‌های قدیمی حفظ شده‌اند چون صدها ارجاع در کد به همان نام‌هاست.
 *   ۴) هیچ CSSِ صفحه‌ای حق ندارد نامی را که اینجا هست دوباره تعریف کند —
 *      چون بعد از این فایل بار می‌شود و در هر دو تم برنده می‌شود.
 */

:root {
  /* ═══ پالتِ تاریک — مقدارها، یک‌بار ═══ */
  /* جهت‌گیری عمداً خنثی است، نه سرمه‌ای: خاکستریِ نزدیک‌به‌خنثی با ته‌مایهٔ بسیار کمِ سرد، به‌علاوهٔ طبقه‌بندیِ ارتفاع (هرچه عنصر بالاتر، روشن‌تر). متن هرگز سفیدِ خالص نیست؛ #fff روی تیره می‌لرزد. */
  --d-bg: #111318;
  --d-surface: #1a1d24;
  --d-surface-2: #20242c;
  --d-surface-3: #262b35;
  --d-overlay: rgba(3, 5, 8, .72);
  --d-text: #eceef2;
  --d-text-2: #c9cdd4;
  /* پله‌بندی text > text-2 > muted > faint حفظ می‌شود و هر چهار تا از ۴٫۵ روی surface-3 رد می‌شوند. */
  --d-muted: #9ba2ae;
  --d-faint: #8b929e;
  --d-border: #2b303a;
  --d-border-soft: #252a33;
  --d-border-strong: #434a58;
  /* تأکید در تاریکی باید روشن‌تر و کمی کم‌اشباع‌تر باشد، وگرنه روی زمینهٔ تیره می‌سوزد. */
  --d-accent: #8b8cf9;
  --d-accent-2: #b39bfb;
  --d-accent-soft: #1c1d2e;
  --d-accent-text: #b4b5fb;
  /* در تاریکی تأکید روشن است و سفیدِ روی آن نسبتِ ۲٫۹ می‌دهد — پس مرکبِ روی تأکید تیره می‌شود. */
  --d-on-accent: #131622;
  --d-ok: #3ecf8e;
  --d-ok-soft: #10241c;
  --d-ok-text: #63dba5;
  --d-warn: #f5a524;
  --d-warn-soft: #2a1f0e;
  --d-warn-text: #f7bd5c;
  --d-danger: #f16a6a;
  --d-danger-soft: #2a1518;
  --d-danger-text: #f79191;
  --d-info: #5b9dff;
  --d-info-soft: #101f33;
  --d-info-text: #8ab9ff;
  --d-imp: #d16be0;
  --d-imp-soft: #241329;
  --d-imp-text: #e79bf1;
  --d-imp-border: var(--d-border-strong);
  --d-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --d-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .4);
  --d-shadow-lg: 0 18px 48px rgba(0, 0, 0, .65);
  --d-pl-band-tint: 22%;
  --d-user-color-mix: 55%;

  /* ═══ حالتِ روشن — پیش‌فرضِ صریح ═══ */
  color-scheme: light;
  --font: "Vazir", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, monospace;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #f2f3f6;
  --overlay: rgba(20, 22, 26, .38);
  --text: #1b1d22;
  --text-2: #3f444d;
  /* muted #58667a و faint #656f7d: هر دو از ۴٫۵ روی هر سه سطح رد می‌شوند (surface-3: ۵٫۳۳ / ۴٫۶۵) و پله‌بندی حفظ است. */
  --muted: #646a75;
  --faint: #6e7480;
  --border: #e3e5ea;
  --border-soft: #eef0f3;
  --border-strong: #d3d7de;
  --accent: #5b5bef;
  /* یک پله تیره‌تر از violet-500؛ سفید روی #8b5cf6 نسبتِ ۴٫۲۳ می‌داد و گوشهٔ هر دکمهٔ گرادیانی زیرِ کف می‌افتاد. #7c3aed → ۵٫۷. */
  --accent-2: #7c3aed;
  --accent-soft: #eef0ff;
  --accent-text: #4338ca;
  --on-accent: #ffffff;
  --ok: #10b981;
  --ok-soft: #e6f7f3;
  --ok-text: #0f766e;
  --warn: #f59e0b;
  --warn-soft: #fff4e3;
  --warn-text: #b45309;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-text: #b91c1c;
  --info: #2f6df0;
  --info-soft: #eef4fe;
  --info-text: #1d4ed8;
  --imp: #a21caf;
  --imp-soft: #faf5ff;
  --imp-text: #86198f;
  --imp-border: #e9d5ff;
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, .04);
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .06);
  --shadow-lg: 0 12px 32px rgba(20, 22, 26, .14), 0 2px 6px rgba(20, 22, 26, .06);
  /* شدتِ ته‌رنگِ نوارِ گروهِ ستون‌ها در جدول؛ در تاریکی باید پررنگ‌تر باشد وگرنه دیده نمی‌شود. */
  --pl-band-tint: 12%;
  /* رنگی که کاربر خودش انتخاب کرده *داده* است؛ در تاریکی فقط به‌اندازهٔ لازم به‌سمتِ رنگِ متن برده می‌شود تا خوانا بماند. */
  --user-color-mix: 100%;
  /* مرکبِ روی سطحی که در هر دو تم تیره است (توست، تولتیپ، هیروی سرمه‌ای). در هر دو تم یکی است چون سطحش هم در هر دو تم یکی است. */
  --on-dark: #f8fafc;

  /* ── نام‌های قدیمی که هنوز در کد ارجاع دارند ── */
  --panel: var(--surface);
  --accent-light: var(--accent-soft);
  --border-light: var(--border-soft);
  --success: var(--ok);
  --success-light: var(--ok-soft);
  --danger-light: var(--danger-soft);
  --warn-light: var(--warn-soft);
  --text-secondary: var(--text-2);

  /* ── مقیاس‌ها ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-0-5: 2px;
  --sp-1-5: 6px;
  --fs-xs: 12px;
  --lh-xs: 1.5;
  --fs-ctl-sm: 12.5px;
  --lh-ctl-sm: 1.5;
  --fs-sm: 13px;
  --lh-sm: 1.6;
  --fs-ctl: 13.5px;
  --lh-ctl: 1.5;
  --fs-md: 14px;
  --lh-md: 1.6;
  --fs-base: 15px;
  --lh-base: 1.7;
  --fs-lg: 16px;
  --lh-lg: 1.75;
  --fs-xl: 17px;
  --lh-xl: 1.55;
  --fs-2xl: 20px;
  --lh-2xl: 1.55;
  --fs-3xl: 24px;
  --lh-3xl: 1.5;
  --fs-4xl: 32px;
  --lh-4xl: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --ctl-h-sm: 28px;
  --ctl-h-md: 40px;
  --ctl-h-touch: 44px;
  --ctl-px-sm: 10px;
  --ctl-px-md: 14px;
  --ctl-px-lg: 18px;
  --icon-2xs: 12px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 500;
  --z-dropdown: 700;
  --z-modal: 900;
  --z-modal-2: 1000;
  --z-popover: 1100;
  --z-toast: 1200;
  --z-tip: 1300;
  --z-blocking: 1400;
  --z-top: 1500;
  --dur-fast: 150ms;
  --dur-normal: 220ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1.5);
  --max-text: 680px;
  --max-form: 560px;
  --max-page: 1440px;
  --max-wide: 880px;
  --max-full: 1480px;
  --max-dialog: 1120px;
  --gutter-desktop: 24px;
  --gutter-touch: 16px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
  --tbl-row-compact: 32px;
  --tbl-row-regular: 40px;
  --tbl-row-comfortable: 48px;
  --tbl-cell-px: 12px;

  /* ── گرادیانِ تزئینی ── */
  --grad-surface: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  --grad-raised: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  --grad-hero: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}

/* ═══ وصلِ پالتِ تاریک ═══
 * شرطِ `:not([data-theme="light"])` روی بلوکِ رسانه‌ای همان چیزی است که نبودنش
 * یک باگِ کلاسیک می‌سازد: کاربری که سیستمش تاریک است ولی صریح «روشن» را
 * انتخاب کرده، باز تاریک می‌بیند. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --surface-2: var(--d-surface-2);
    --surface-3: var(--d-surface-3);
    --overlay: var(--d-overlay);
    --text: var(--d-text);
    --text-2: var(--d-text-2);
    --muted: var(--d-muted);
    --faint: var(--d-faint);
    --border: var(--d-border);
    --border-soft: var(--d-border-soft);
    --border-strong: var(--d-border-strong);
    --accent: var(--d-accent);
    --accent-2: var(--d-accent-2);
    --accent-soft: var(--d-accent-soft);
    --accent-text: var(--d-accent-text);
    --on-accent: var(--d-on-accent);
    --ok: var(--d-ok);
    --ok-soft: var(--d-ok-soft);
    --ok-text: var(--d-ok-text);
    --warn: var(--d-warn);
    --warn-soft: var(--d-warn-soft);
    --warn-text: var(--d-warn-text);
    --danger: var(--d-danger);
    --danger-soft: var(--d-danger-soft);
    --danger-text: var(--d-danger-text);
    --info: var(--d-info);
    --info-soft: var(--d-info-soft);
    --info-text: var(--d-info-text);
    --imp: var(--d-imp);
    --imp-soft: var(--d-imp-soft);
    --imp-text: var(--d-imp-text);
    --imp-border: var(--d-imp-border);
    --shadow-sm: var(--d-shadow-sm);
    --shadow: var(--d-shadow);
    --shadow-lg: var(--d-shadow-lg);
    --pl-band-tint: var(--d-pl-band-tint);
    --user-color-mix: var(--d-user-color-mix);
    /* نام‌های مستعار عمداً اینجا تکرار می‌شوند: `:root[data-theme]` از `:root` خاص‌تر است و بر بازتعریفِ محلیِ صفحه‌ها می‌چربد. */
    --panel: var(--surface);
    --accent-light: var(--accent-soft);
    --border-light: var(--border-soft);
    --success: var(--ok);
    --success-light: var(--ok-soft);
    --danger-light: var(--danger-soft);
    --warn-light: var(--warn-soft);
    --text-secondary: var(--text-2);
    --sidebar-text-hover: var(--text);
    --sidebar-active: var(--accent-text);
    --sidebar-active-bg: var(--accent-soft);
    --sidebar-section-text: var(--muted);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --surface-2: var(--d-surface-2);
  --surface-3: var(--d-surface-3);
  --overlay: var(--d-overlay);
  --text: var(--d-text);
  --text-2: var(--d-text-2);
  --muted: var(--d-muted);
  --faint: var(--d-faint);
  --border: var(--d-border);
  --border-soft: var(--d-border-soft);
  --border-strong: var(--d-border-strong);
  --accent: var(--d-accent);
  --accent-2: var(--d-accent-2);
  --accent-soft: var(--d-accent-soft);
  --accent-text: var(--d-accent-text);
  --on-accent: var(--d-on-accent);
  --ok: var(--d-ok);
  --ok-soft: var(--d-ok-soft);
  --ok-text: var(--d-ok-text);
  --warn: var(--d-warn);
  --warn-soft: var(--d-warn-soft);
  --warn-text: var(--d-warn-text);
  --danger: var(--d-danger);
  --danger-soft: var(--d-danger-soft);
  --danger-text: var(--d-danger-text);
  --info: var(--d-info);
  --info-soft: var(--d-info-soft);
  --info-text: var(--d-info-text);
  --imp: var(--d-imp);
  --imp-soft: var(--d-imp-soft);
  --imp-text: var(--d-imp-text);
  --imp-border: var(--d-imp-border);
  --shadow-sm: var(--d-shadow-sm);
  --shadow: var(--d-shadow);
  --shadow-lg: var(--d-shadow-lg);
  --pl-band-tint: var(--d-pl-band-tint);
  --user-color-mix: var(--d-user-color-mix);
  /* نام‌های مستعار عمداً اینجا تکرار می‌شوند: `:root[data-theme]` از `:root` خاص‌تر است و بر بازتعریفِ محلیِ صفحه‌ها می‌چربد. */
  --panel: var(--surface);
  --accent-light: var(--accent-soft);
  --border-light: var(--border-soft);
  --success: var(--ok);
  --success-light: var(--ok-soft);
  --danger-light: var(--danger-soft);
  --warn-light: var(--warn-soft);
  --text-secondary: var(--text-2);
  --sidebar-text-hover: var(--text);
  --sidebar-active: var(--accent-text);
  --sidebar-active-bg: var(--accent-soft);
  --sidebar-section-text: var(--muted);
}

/* ══ دنبالهٔ غیرتوکنی — عیناً از ui/theme-tail.css ══ */
/* ⚠ `--panel` نام‌مستعارِ `--surface` است و چیزِ تازه‌ای نمی‌گوید — در هر دو
   تم دقیقاً همان رنگ. ۱۷۳ بار در ۳۳ فایل به کار رفته بود و همان‌جا جلوی
   مهاجرتِ کنترل‌های فرم به کیت را می‌گرفت: ابزار می‌دید رنگ «همانِ کیت نیست»،
   در حالی که بود. کاربردهایش برداشته شد؛ خودِ توکن می‌ماند تا کدِ بیرون از
   این مخزن نشکند، ولی کدِ تازه نباید بنویسدش (جغجغه‌اش در
   db/__tests__/panel-alias.test.js). */

/* ── پایهٔ مشترک ─────────────────────────────────────────────────────────
   بدونِ این، صفحه‌ای که پس‌زمینه‌اش را خودش تعریف نکرده در تاریکی سفید می‌ماند.
   `body` تنها عنصری است که همهٔ ۵۶ صفحه دارند. */
html[data-theme] { background: var(--bg); }
body { background: var(--bg); color: var(--text); }

/* عکس در تاریکی نباید بدرخشد؛ تا وقتی نگاهش نکرده‌ای کمی کم‌نور می‌ماند. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img:not([src*=".svg"]):not(.no-dim) {
    filter: brightness(.9);
    transition: filter .2s;
  }
  :root:not([data-theme="light"]) img:hover { filter: none; }
}
:root[data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) {
  filter: brightness(.9);
  transition: filter .2s;
}
:root[data-theme="dark"] img:hover { filter: none; }

/* تغییرِ تم نباید چشمک باشد، ولی انیمیشنِ طولانی هم آزار می‌دهد. */
:root[data-theme] body,
:root[data-theme] .top-nav,
:root[data-theme] .nav-sidebar {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
/* ولی سایدبار transitionِ خودش را هم دارد: باز/بسته‌شدنش یک
   `transform: translateX` است (nav.css). قاعدهٔ بالا پرزورتر است و کلِ
   `transition` را جایگزین می‌کند — پس تا امروز هر کاربری که یک‌بار تمِ روشن یا
   تاریک را انتخاب کرده بود (و بوت‌اسکریپت data-theme را می‌گذارد)، منویش
   به‌جای سُر خوردن می‌پَرید. transform به همان فهرست برمی‌گردد؛ رنگ‌ها
   دست‌نخورده‌اند، و بلوکِ prefers-reduced-motion که پایین‌تر می‌آید همچنان
   همه را خاموش می‌کند. */
:root[data-theme] .nav-sidebar {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
              transform .25s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] body,
  :root[data-theme] .top-nav,
  :root[data-theme] .nav-sidebar { transition: none; }
}

/* ── لحظهٔ سوییچ: همه‌چیز جز همان سه عنصر، بی‌انیمیشن ────────────────────────
   نرمیِ بالا عمدی است و برای سه عنصر نوشته شده. ولی هر عنصرِ دیگری هم که
   `transition` روی رنگ دارد، با عوض‌شدنِ توکن انیمیشنِ خودش را شروع می‌کند —
   در صفحهٔ گزارشِ PDF شمردم: ۱۷٬۶۹۵ انیمیشنِ هم‌زمان، همه روی ریسمانِ اصلی.
   نتیجه یک‌ونیم ثانیه صفحهٔ نیمه‌عوض‌شده بود.
   `theme-toggle.js` این صفت را فقط برای دو فریم می‌گذارد و برمی‌دارد. */
:root[data-theme-switching] *:not(body):not(.top-nav):not(.nav-sidebar),
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}

/* کلیدِ شناورِ تم به primitives.css رفت (بندِ ۶-ص). جایش آن‌جاست نه اینجا:
   جزءِ کیت است و کیت یک فایل دارد — و همان فایل هم به هر صفحه تزریق می‌شود،
   پس همان تضمینی که این بلوک لازم داشت، آن‌جا هم هست. */

.mb-theme-fab .nav-theme-core,
.mb-theme-host .nav-theme-core { fill: currentColor; transition: r .4s cubic-bezier(.4, 0, .2, 1); }
.mb-theme-fab .nav-theme-bite,
.mb-theme-host .nav-theme-bite { transition: cx .4s cubic-bezier(.4, 0, .2, 1), cy .4s cubic-bezier(.4, 0, .2, 1); }
.mb-theme-fab .nav-theme-rays,
.mb-theme-host .nav-theme-rays {
  stroke: currentColor; stroke-width: 2; transform-origin: 12px 12px;
  transition: opacity .3s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
.mb-theme-fab .nav-theme-btn.is-dark .nav-theme-core,
.mb-theme-host .nav-theme-btn.is-dark .nav-theme-core { r: 8; }
.mb-theme-fab .nav-theme-btn.is-dark .nav-theme-bite,
.mb-theme-host .nav-theme-btn.is-dark .nav-theme-bite { cx: 17; cy: 7; }
.mb-theme-fab .nav-theme-btn.is-dark .nav-theme-rays,
.mb-theme-host .nav-theme-btn.is-dark .nav-theme-rays { opacity: 0; transform: rotate(90deg) scale(.4); }
/* چرخشِ یک‌بارهٔ بعد از کلیک. `@keyframes` سراسری است، پس همین‌جا هم اعلام
   می‌شود تا صفحه‌های بدونِ nav.css هم داشته باشندش — با همان نام و همان
   مقدار، پس هرکدام آخر بیاید فرقی نمی‌کند. */
@keyframes nav-theme-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mb-theme-fab .nav-theme-btn.is-spinning .nav-theme-svg,
.mb-theme-host .nav-theme-btn.is-spinning .nav-theme-svg { animation: nav-theme-spin .5s cubic-bezier(.4, 0, .2, 1); }
/* پایه در طولِ چرخش صفر می‌ماند — دلیلش کنارِ همین کیفریم در nav.css. */
.mb-theme-fab .nav-theme-btn.is-spinning:hover .nav-theme-svg,
.mb-theme-host .nav-theme-btn.is-spinning:hover .nav-theme-svg { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mb-theme-fab .nav-theme-btn, .mb-theme-host .nav-theme-btn,
  .mb-theme-fab .nav-theme-svg, .mb-theme-host .nav-theme-svg,
  .mb-theme-fab .nav-theme-core, .mb-theme-host .nav-theme-core,
  .mb-theme-fab .nav-theme-bite, .mb-theme-host .nav-theme-bite,
  .mb-theme-fab .nav-theme-rays, .mb-theme-host .nav-theme-rays { transition: none; animation: none; }
  .mb-theme-fab .nav-theme-btn:hover .nav-theme-svg,
  .mb-theme-host .nav-theme-btn:hover .nav-theme-svg { transform: none; }
}