/* ============================================================================
   tokens.css — تنها منبعِ حقیقتِ قلم، رنگ، اندازه، شعاع و سایه.

   ── این فایل نیمی تولیدی است ───────────────────────────────────────────────
   بخشِ رنگ (بینِ دو نشانِ PALETTE:BEGIN و PALETTE:END) **با دست نوشته
   نمی‌شود**. از `src/tools/palette-build.cjs` می‌آید:

       node src/tools/palette-emit.cjs   →  همان بلوک را چاپ می‌کند
       node src/tools/palette-apply.cjs  →  همان‌جای این فایل را جایگزین می‌کند
       node src/tools/palette-build.cjs  →  نردبان‌ها و کنتراست‌ها را گزارش می‌دهد

   اگر رنگی باید عوض شود، **آن‌جا** عوضش کن؛ این‌جا را دست نزن، وگرنه
   اجرای بعدیِ apply رویش می‌نویسد.

   ── ساختار ────────────────────────────────────────────────────────────────
     ۱) قلم — چون بدونِ آن هیچ‌چیزِ دیگری درست دیده نمی‌شود.
     ۲) پالتِ خام — یازده پله × هفت خانواده، در دو تم.
     ۳) لایهٔ نقش — قاعده‌ای که همه‌چیز رویش سوار است.
     ۴) مقیاس — قلم، شعاع، حرکت، ارتفاعِ کنترل.
     ۵) نگاشتِ نام‌های قدیمی روی همان نقش‌ها.
     ۶) بازماندهٔ لایهٔ قدیمی.

   ── قاعدهٔ رنگ، در سه خط ───────────────────────────────────────────────────
   هر رنگ در OKLCH ساخته می‌شود، نه با دست. روشناییِ هر پله **حل** می‌شود
   تا بدترین خانوادهٔ فام هم به هدفِ کنتراستش برسد. و در تمِ تیره فقط
   یازده مقدارِ خام عوض می‌شوند — هیچ نامِ نقشی دو بار تعریف نمی‌شود.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   ۱. قلم.

   نسخهٔ FaNum است: ارقامِ لاتین را با شکلِ فارسی می‌کشد، پس عدد در همهٔ اپ
   یکدست می‌شود بی‌آنکه لازم باشد هر جا `fa()` صدا زده شود.
   `font-display: swap` تا متن در بارگذاری غیب نشود، و `woff` به‌عنوانِ
   تکیه‌گاهِ مرورگرهای قدیمی بعد از `woff2` می‌آید. **دو جا اعلامشان نکن.**
   ══════════════════════════════════════════════════════════════════════════ */

/* `@font-face`ای در
   هیچ شیتی نبود — فقط در بلیدِ PDF. یعنی کلِ اپ ماه‌ها روی Tahoma افتاده
   بود در حالی که فایل‌های woff2 بلااستفاده در `public/fonts/` نشسته بودند.
   این بلوک همان را وصل می‌کند.

   نسخهٔ FaNum است: ارقامِ لاتین را با شکلِ فارسی می‌کشد، پس عدد در همهٔ
   اپ یکدست می‌شود بی‌آنکه لازم باشد هر جا `fa()` صدا زده شود.

   `font-display: swap` تا متن در بارگذاری غیب نشود، و `woff` به‌عنوانِ
   تکیه‌گاهِ مرورگرهای قدیمی بعد از `woff2` می‌آید.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-Light.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-DemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IRANSansX";
    src: url("../fonts/Woff2/IRANSansXFaNum-Black.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Black.woff") format("woff");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ── همان قلم، ولی فقط برای حروفِ فارسی ───────────────────────────────────
   حالتِ انگلیسی داده‌های فارسی را از دست نمی‌دهد: نامِ شاگرد، نامِ مربی و
   نامِ برنامه همان‌اند که مربی نوشته. با پشتهٔ صرفاً لاتین، آن نام‌ها به هر
   قلمی می‌افتادند که سیستم برای عربی داشت.

   چرا خانوادهٔ دوم، و نه صرفاً افزودنِ `IRANSansX` به پشتهٔ انگلیسی: آن راه
   امتحان شد و ارقام را فارسی کرد. `Inter` یک قلمِ سیستمی است و روی خیلی از
   دستگاه‌ها اصلاً نصب نیست؛ آن‌جا IRANSansX اولین قلمِ *موجود* می‌شد و کلِ
   متنِ لاتین را هم برمی‌داشت — و چون نسخهٔ FaNum است، «Male 35 yrs» را
   «Male ۳۵ yrs» می‌نوشت. با `unicode-range` این ریسک از بین می‌رود: این
   خانواده حتی اگر اولِ پشته باشد، جز حرفِ فارسی چیزی را نمی‌کشد.

   دامنه: بلوکِ عربی (شاملِ ارقامِ ۰۶F۰ و نشانه‌گذاری)، نیم‌فاصله و پیوندِ
   صفرعرض، و دو بلوکِ فرم‌های نمایشی برای متنِ ازپیش‌شکل‌گرفته. */
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-Light.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-DemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IRANSansX Fa";
    src: url("../fonts/Woff2/IRANSansXFaNum-Black.woff2") format("woff2"),
         url("../fonts/Woff/IRANSansXFaNum-Black.woff") format("woff");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

/* ══════════════════════════════════════════════════════════════════════════
   ۲. پالتِ خام — تولیدی. دست نزن.
   ══════════════════════════════════════════════════════════════════════════ */

/* PALETTE:BEGIN — تولیدشده توسط src/tools/palette-emit.cjs */
/* ── مقادیرِ خام، تمِ روشن ───────────────────────────────────────────── */
:root {
    /* ── یازده پلهٔ خام × هفت خانواده ─────────────────────────────────── */
    /* brand */
    --myo-brand-50:          #f5faff;
    --myo-brand-100:         #edf6ff;
    --myo-brand-200:         #d5e9ff;
    --myo-brand-300:         #a6d1ff;
    --myo-brand-400:         #5daeff;
    --myo-brand-500:         #078ff3;
    --myo-brand-600:         #0077cc;
    --myo-brand-700:         #005696;
    --myo-brand-800:         #004073;
    --myo-brand-900:         #00325c;
    --myo-brand-950:         #001e3c;
    /* neutral */
    --myo-neutral-50:        #f8f9fb;
    --myo-neutral-100:       #f2f5f8;
    --myo-neutral-200:       #e2e7ed;
    --myo-neutral-300:       #c6ced7;
    --myo-neutral-400:       #a0abb7;
    --myo-neutral-500:       #808e9d;
    --myo-neutral-600:       #687586;
    --myo-neutral-700:       #495563;
    --myo-neutral-800:       #35404c;
    --myo-neutral-900:       #29323c;
    --myo-neutral-950:       #181e25;
    /* ok */
    --myo-ok-50:             #f2fcf4;
    --myo-ok-100:            #e7fbeb;
    --myo-ok-200:            #d0f1d7;
    --myo-ok-300:            #a9dcb5;
    --myo-ok-400:            #71bd87;
    --myo-ok-500:            #3ca461;
    --myo-ok-600:            #008743;
    --myo-ok-700:            #006631;
    --myo-ok-800:            #004d23;
    --myo-ok-900:            #003d1a;
    --myo-ok-950:            #00250d;
    /* warn */
    --myo-warn-50:           #fff8f2;
    --myo-warn-100:          #fff2e8;
    --myo-warn-200:          #ffe0c8;
    --myo-warn-300:          #f2c29c;
    --myo-warn-400:          #dc985f;
    --myo-warn-500:          #c87521;
    --myo-warn-600:          #af6000;
    --myo-warn-700:          #7d4300;
    --myo-warn-800:          #5f3100;
    --myo-warn-900:          #4c2600;
    --myo-warn-950:          #301500;
    /* danger */
    --myo-danger-50:         #fff7f6;
    --myo-danger-100:        #fff1ef;
    --myo-danger-200:        #ffdeda;
    --myo-danger-300:        #ffb8b0;
    --myo-danger-400:        #f68379;
    --myo-danger-500:        #e5554f;
    --myo-danger-600:        #d63937;
    --myo-danger-700:        #a10012;
    --myo-danger-800:        #7b000b;
    --myo-danger-900:        #630007;
    --myo-danger-950:        #400002;
    /* info */
    --myo-info-50:           #f0fcfd;
    --myo-info-100:          #e3fafc;
    --myo-info-200:          #c9eff3;
    --myo-info-300:          #9cd9e0;
    --myo-info-400:          #5abac5;
    --myo-info-500:          #009fac;
    --myo-info-600:          #00818c;
    --myo-info-700:          #006068;
    --myo-info-800:          #00484e;
    --myo-info-900:          #00393e;
    --myo-info-950:          #002327;
    /* accent */
    --myo-accent-50:         #fdf7ff;
    --myo-accent-100:        #fbf0ff;
    --myo-accent-200:        #f7dcff;
    --myo-accent-300:        #e6baf4;
    --myo-accent-400:        #cd8de0;
    --myo-accent-500:        #b666ce;
    --myo-accent-600:        #a74ec0;
    --myo-accent-700:        #792790;
    --myo-accent-800:        #5e1472;
    --myo-accent-900:        #4c0c5c;
    --myo-accent-950:        #30043c;

    /* ── سطح‌ها ───────────────────────────────────────────────────────
       تنها جایی که جهتِ نردبان در دو تم برعکس می‌شود، پس صریح‌اند. */
    --myo-canvas:            #f1f5f9;
    --myo-paper:             #ffffff;
    --myo-surface:           #f7fbff;
    --myo-surface-2:         #ebeff3;
    --myo-surface-3:         #e0e4e8;
    --myo-scrim:             #202326;
    /* پردهٔ پشتِ پاپ‌آپ. تیره‌کردنِ صفحه کارِ پاپ‌آپ نیست — کارتِ شناور
       خودش سایه و کنتراست دارد. پرده فقط باید بگوید «پشتِ این دست نزن»،
       پس یک لایهٔ بسیار نازک + کمی تاری، نه یک سایهٔ سنگین. */
    --myo-veil:              rgba(32, 35, 38, .12);
    --myo-veil-blur:         2px;

    /* متنِ روی پُرِ رنگی. در تمِ تیره پُر روشن می‌شود پس متن تیره است. */
    --myo-on-fill:           #ffffff;
    /* کم‌رنگ‌ترین متنِ مجاز — پلهٔ نردبان نیست، برای بدترین سطح حل شده. */
    --myo-ink-faint:         #596775;

    /* ── سطحِ همیشه‌تیره ───────────────────────────────────────────────
       سرنوار، پوستر و هر جایی که «تیره» خودش معنی دارد. این‌ها نمی‌توانند
       پلهٔ نردبان باشند: نردبان در تمِ تیره وارونه می‌شود و آن‌وقت سرنوارِ
       سرمه‌ای در دارک‌مود سفید می‌شد و متنِ سفیدش ناپیدا. پس در هر تم
       صریح‌اند — در روشن سرمه‌ایِ عمیق، در تیره یک سطحِ بالاتر از کارت. */
    --myo-deep:              #1d242c;
    --myo-deep-2:            #10161c;
    --myo-deep-soft:         #edf6ff;
    --myo-on-deep:           #ffffff;

    /* ── سایه و حلقهٔ فوکوس ───────────────────────────────────────────
       سایه در تمِ روشن یک خاکستریِ هم‌فام با شفافیتِ کم است؛ در تمِ تیره
       باید سیاه و پررنگ‌تر باشد، وگرنه روی زمینهٔ تیره اصلاً دیده نمی‌شود. */
    --myo-el-1:              0 1px 2px rgba(53, 64, 76, .06);
    --myo-el-card:           0 1px 2px rgba(53, 64, 76, .04), 0 2px 8px rgba(53, 64, 76, .05);
    --myo-el-2:              0 2px 4px rgba(53, 64, 76, .05), 0 4px 12px rgba(53, 64, 76, .08);
    --myo-el-3:              0 4px 20px rgba(53, 64, 76, .16), 0 2px 6px rgba(53, 64, 76, .08);
    --myo-ring:              0 0 0 3px rgba(0, 119, 204, .30);
    --myo-ring-deep:         0 0 0 3px rgba(29, 36, 44, .28);
    --myo-el-brand:          0 4px 12px rgba(0, 119, 204, .24);
    --myo-el-deep:           0 4px 12px rgba(29, 36, 44, .20);

    /* ── پالتِ دسته‌بندی: شش فام با فاصلهٔ ۶۰ درجه، یک روشنایی ──────── */
    --myo-cat-1:             #007e7b;   /* h 192 */
    --myo-cat-2:             #6e5bb8;   /* h 290 */
    --myo-cat-3:             #005066;   /* h 224 */
    --myo-cat-4:             #6b2176;   /* h 322 */
    --myo-cat-5:             #2b599c;   /* h 258 */
    --myo-cat-6:             #a84573;   /* h 354 */
}

/* ── مقادیرِ خام، تمِ تیره ───────────────────────────────────────────────
   *فقط* همین مقادیر عوض می‌شوند. هیچ نامِ نقشی این‌جا تعریف نمی‌شود —
   نقش‌ها یک بار تعریف شده‌اند و در هر دو تم یکی‌اند. */
html[data-theme="dark"] {
    /* ── یازده پلهٔ خام × هفت خانواده ─────────────────────────────────── */
    /* brand */
    --myo-brand-50:          #1c3146;
    --myo-brand-100:         #203e5b;
    --myo-brand-200:         #224e78;
    --myo-brand-300:         #20629f;
    --myo-brand-400:         #0677cb;
    --myo-brand-500:         #008aed;
    --myo-brand-600:         #008aeb;
    --myo-brand-700:         #84c1ff;
    --myo-brand-800:         #acd5ff;
    --myo-brand-900:         #cce5ff;
    --myo-brand-950:         #e5f2ff;
    /* neutral */
    --myo-neutral-50:        #2d2f33;
    --myo-neutral-100:       #383c41;
    --myo-neutral-200:       #464c52;
    --myo-neutral-300:       #59616a;
    --myo-neutral-400:       #6a7582;
    --myo-neutral-500:       #7c8999;
    --myo-neutral-600:       #798798;
    --myo-neutral-700:       #b0bdcc;
    --myo-neutral-800:       #c7d1de;
    --myo-neutral-900:       #dce3eb;
    --myo-neutral-950:       #edf0f4;
    /* ok */
    --myo-ok-50:             #213426;
    --myo-ok-100:            #28432f;
    --myo-ok-200:            #2d5539;
    --myo-ok-300:            #336e46;
    --myo-ok-400:            #318850;
    --myo-ok-500:            #319f5b;
    --myo-ok-600:            #1b9951;
    --myo-ok-700:            #75d491;
    --myo-ok-800:            #9de4af;
    --myo-ok-900:            #c2efcd;
    --myo-ok-950:            #e2f6e6;
    /* warn */
    --myo-warn-50:           #3d2b1c;
    --myo-warn-100:          #4e3521;
    --myo-warn-200:          #654224;
    --myo-warn-300:          #855225;
    --myo-warn-400:          #a6611a;
    --myo-warn-500:          #c46f0f;
    --myo-warn-600:          #c97000;
    --myo-warn-700:          #f9a65e;
    --myo-warn-800:          #ffc290;
    --myo-warn-900:          #ffdabc;
    --myo-warn-950:          #ffecde;
    /* danger */
    --myo-danger-50:         #442523;
    --myo-danger-100:        #582e2a;
    --myo-danger-200:        #733632;
    --myo-danger-300:        #97413b;
    --myo-danger-400:        #be4641;
    --myo-danger-500:        #e14d48;
    --myo-danger-600:        #ec4e4a;
    --myo-danger-700:        #ff9d93;
    --myo-danger-800:        #ffbdb6;
    --myo-danger-900:        #ffd7d2;
    --myo-danger-950:        #ffebe8;
    /* info */
    --myo-info-50:           #1c3436;
    --myo-info-100:          #204246;
    --myo-info-200:          #205459;
    --myo-info-300:          #1b6c74;
    --myo-info-400:          #00848f;
    --myo-info-500:          #009aa6;
    --myo-info-600:          #0094a1;
    --myo-info-700:          #54d0dd;
    --myo-info-800:          #8ae1eb;
    --myo-info-900:          #b8edf3;
    --myo-info-950:          #def5f8;
    /* accent */
    --myo-accent-50:         #39283e;
    --myo-accent-100:        #493150;
    --myo-accent-200:        #5d3c68;
    --myo-accent-300:        #794988;
    --myo-accent-400:        #9754ab;
    --myo-accent-500:        #b25fcb;
    --myo-accent-600:        #ba61d4;
    --myo-accent-700:        #e698ff;
    --myo-accent-800:        #eebaff;
    --myo-accent-900:        #f5d4ff;
    --myo-accent-950:        #faeaff;

    /* ── سطح‌ها ───────────────────────────────────────────────────────
       تنها جایی که جهتِ نردبان در دو تم برعکس می‌شود، پس صریح‌اند. */
    --myo-canvas:            #12161b;
    --myo-paper:             #20252a;
    --myo-surface:           #191e23;
    --myo-surface-2:         #2b3035;
    --myo-surface-3:         #363c41;
    --myo-scrim:             #05080c;
    /* روی بومِ تیره، پردهٔ تیره کمتر دیده می‌شود؛ کمی بیشتر — ولی هنوز پرده
       است نه شب. */
    --myo-veil:              rgba(5, 8, 12, .26);
    --myo-veil-blur:         2px;

    /* متنِ روی پُرِ رنگی. در تمِ تیره پُر روشن می‌شود پس متن تیره است. */
    --myo-on-fill:           #0b0d12;
    /* کم‌رنگ‌ترین متنِ مجاز — پلهٔ نردبان نیست، برای بدترین سطح حل شده. */
    --myo-ink-faint:         #99a7b6;

    /* ── سطحِ همیشه‌تیره ───────────────────────────────────────────────
       سرنوار، پوستر و هر جایی که «تیره» خودش معنی دارد. این‌ها نمی‌توانند
       پلهٔ نردبان باشند: نردبان در تمِ تیره وارونه می‌شود و آن‌وقت سرنوارِ
       سرمه‌ای در دارک‌مود سفید می‌شد و متنِ سفیدش ناپیدا. پس در هر تم
       صریح‌اند — در روشن سرمه‌ایِ عمیق، در تیره یک سطحِ بالاتر از کارت. */
    --myo-deep:              #363c41;
    --myo-deep-2:            #2b3035;
    --myo-deep-soft:         #1c3146;
    --myo-on-deep:           #edf0f4;

    /* ── سایه و حلقهٔ فوکوس ───────────────────────────────────────────
       سایه در تمِ روشن یک خاکستریِ هم‌فام با شفافیتِ کم است؛ در تمِ تیره
       باید سیاه و پررنگ‌تر باشد، وگرنه روی زمینهٔ تیره اصلاً دیده نمی‌شود. */
    --myo-el-1:              0 1px 2px rgba(0, 0, 0, .40);
    --myo-el-card:           0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .28);
    --myo-el-2:              0 2px 4px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .40);
    --myo-el-3:              0 4px 20px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
    --myo-ring:              0 0 0 3px rgba(0, 138, 235, .45);
    --myo-ring-deep:         0 0 0 3px rgba(176, 189, 204, .45);
    --myo-el-brand:          0 4px 12px rgba(0, 0, 0, .45);
    --myo-el-deep:           0 4px 12px rgba(0, 0, 0, .45);

    /* ── پالتِ دسته‌بندی: شش فام با فاصلهٔ ۶۰ درجه، یک روشنایی ──────── */
    --myo-cat-1:             #00bab6;   /* h 192 */
    --myo-cat-2:             #a193ed;   /* h 290 */
    --myo-cat-3:             #52d4ff;   /* h 224 */
    --myo-cat-4:             #eba4f6;   /* h 322 */
    --myo-cat-5:             #85b3f9;   /* h 258 */
    --myo-cat-6:             #e07ea8;   /* h 354 */
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        /* ── یازده پلهٔ خام × هفت خانواده ─────────────────────────────────── */
        /* brand */
        --myo-brand-50:          #1c3146;
        --myo-brand-100:         #203e5b;
        --myo-brand-200:         #224e78;
        --myo-brand-300:         #20629f;
        --myo-brand-400:         #0677cb;
        --myo-brand-500:         #008aed;
        --myo-brand-600:         #008aeb;
        --myo-brand-700:         #84c1ff;
        --myo-brand-800:         #acd5ff;
        --myo-brand-900:         #cce5ff;
        --myo-brand-950:         #e5f2ff;
        /* neutral */
        --myo-neutral-50:        #2d2f33;
        --myo-neutral-100:       #383c41;
        --myo-neutral-200:       #464c52;
        --myo-neutral-300:       #59616a;
        --myo-neutral-400:       #6a7582;
        --myo-neutral-500:       #7c8999;
        --myo-neutral-600:       #798798;
        --myo-neutral-700:       #b0bdcc;
        --myo-neutral-800:       #c7d1de;
        --myo-neutral-900:       #dce3eb;
        --myo-neutral-950:       #edf0f4;
        /* ok */
        --myo-ok-50:             #213426;
        --myo-ok-100:            #28432f;
        --myo-ok-200:            #2d5539;
        --myo-ok-300:            #336e46;
        --myo-ok-400:            #318850;
        --myo-ok-500:            #319f5b;
        --myo-ok-600:            #1b9951;
        --myo-ok-700:            #75d491;
        --myo-ok-800:            #9de4af;
        --myo-ok-900:            #c2efcd;
        --myo-ok-950:            #e2f6e6;
        /* warn */
        --myo-warn-50:           #3d2b1c;
        --myo-warn-100:          #4e3521;
        --myo-warn-200:          #654224;
        --myo-warn-300:          #855225;
        --myo-warn-400:          #a6611a;
        --myo-warn-500:          #c46f0f;
        --myo-warn-600:          #c97000;
        --myo-warn-700:          #f9a65e;
        --myo-warn-800:          #ffc290;
        --myo-warn-900:          #ffdabc;
        --myo-warn-950:          #ffecde;
        /* danger */
        --myo-danger-50:         #442523;
        --myo-danger-100:        #582e2a;
        --myo-danger-200:        #733632;
        --myo-danger-300:        #97413b;
        --myo-danger-400:        #be4641;
        --myo-danger-500:        #e14d48;
        --myo-danger-600:        #ec4e4a;
        --myo-danger-700:        #ff9d93;
        --myo-danger-800:        #ffbdb6;
        --myo-danger-900:        #ffd7d2;
        --myo-danger-950:        #ffebe8;
        /* info */
        --myo-info-50:           #1c3436;
        --myo-info-100:          #204246;
        --myo-info-200:          #205459;
        --myo-info-300:          #1b6c74;
        --myo-info-400:          #00848f;
        --myo-info-500:          #009aa6;
        --myo-info-600:          #0094a1;
        --myo-info-700:          #54d0dd;
        --myo-info-800:          #8ae1eb;
        --myo-info-900:          #b8edf3;
        --myo-info-950:          #def5f8;
        /* accent */
        --myo-accent-50:         #39283e;
        --myo-accent-100:        #493150;
        --myo-accent-200:        #5d3c68;
        --myo-accent-300:        #794988;
        --myo-accent-400:        #9754ab;
        --myo-accent-500:        #b25fcb;
        --myo-accent-600:        #ba61d4;
        --myo-accent-700:        #e698ff;
        --myo-accent-800:        #eebaff;
        --myo-accent-900:        #f5d4ff;
        --myo-accent-950:        #faeaff;

        /* ── سطح‌ها ───────────────────────────────────────────────────────
           تنها جایی که جهتِ نردبان در دو تم برعکس می‌شود، پس صریح‌اند. */
        --myo-canvas:            #12161b;
        --myo-paper:             #20252a;
        --myo-surface:           #191e23;
        --myo-surface-2:         #2b3035;
        --myo-surface-3:         #363c41;
        --myo-scrim:             #05080c;
        --myo-veil:              rgba(5, 8, 12, .26);
        --myo-veil-blur:         2px;

        /* متنِ روی پُرِ رنگی. در تمِ تیره پُر روشن می‌شود پس متن تیره است. */
        --myo-on-fill:           #0b0d12;
        /* کم‌رنگ‌ترین متنِ مجاز — پلهٔ نردبان نیست، برای بدترین سطح حل شده. */
        --myo-ink-faint:         #99a7b6;

        /* ── سطحِ همیشه‌تیره ───────────────────────────────────────────────
           سرنوار، پوستر و هر جایی که «تیره» خودش معنی دارد. این‌ها نمی‌توانند
           پلهٔ نردبان باشند: نردبان در تمِ تیره وارونه می‌شود و آن‌وقت سرنوارِ
           سرمه‌ای در دارک‌مود سفید می‌شد و متنِ سفیدش ناپیدا. پس در هر تم
           صریح‌اند — در روشن سرمه‌ایِ عمیق، در تیره یک سطحِ بالاتر از کارت. */
        --myo-deep:              #363c41;
        --myo-deep-2:            #2b3035;
        --myo-deep-soft:         #1c3146;
        --myo-on-deep:           #edf0f4;

        /* ── سایه و حلقهٔ فوکوس ───────────────────────────────────────────
           سایه در تمِ روشن یک خاکستریِ هم‌فام با شفافیتِ کم است؛ در تمِ تیره
           باید سیاه و پررنگ‌تر باشد، وگرنه روی زمینهٔ تیره اصلاً دیده نمی‌شود. */
        --myo-el-1:              0 1px 2px rgba(0, 0, 0, .40);
        --myo-el-card:           0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .28);
        --myo-el-2:              0 2px 4px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .40);
        --myo-el-3:              0 4px 20px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
        --myo-ring:              0 0 0 3px rgba(0, 138, 235, .45);
        --myo-ring-deep:         0 0 0 3px rgba(176, 189, 204, .45);
        --myo-el-brand:          0 4px 12px rgba(0, 0, 0, .45);
        --myo-el-deep:           0 4px 12px rgba(0, 0, 0, .45);

        /* ── پالتِ دسته‌بندی: شش فام با فاصلهٔ ۶۰ درجه، یک روشنایی ──────── */
        --myo-cat-1:             #00bab6;   /* h 192 */
        --myo-cat-2:             #a193ed;   /* h 290 */
        --myo-cat-3:             #52d4ff;   /* h 224 */
        --myo-cat-4:             #eba4f6;   /* h 322 */
        --myo-cat-5:             #85b3f9;   /* h 258 */
        --myo-cat-6:             #e07ea8;   /* h 354 */
    }
}
/* PALETTE:END */

/* ══════════════════════════════════════════════════════════════════════════
   ۳. لایهٔ نقش — و این همان «قاعده»ای است که کلِ پالت رویش سوار است.

   هیچ جای سورس نباید یک پلهٔ خام (`--myo-brand-600`) را صدا بزند. هر چیزی
   نقشی دارد و نقش است که صدا زده می‌شود. هر هفت خانواده **دقیقاً همان هفت
   شکاف** را می‌گیرند، بی‌استثنا:

       -soft         ۵۰   زمینهٔ نرم: قرص، چیپ، نوارِ پیام
       -soft-2      ۱۰۰   همان، در حالتِ هاور
       -line        ۲۰۰   خطِ دورِ همان سطحِ نرم
       -line-strong ۴۰۰   خطی که باید ۳:۱ بدهد (مرزِ کنترل)
       -icon        ۵۰۰   آیکن روی زمینهٔ روشن
       -fill        ۶۰۰   پُر، با `--myo-on-fill` رویش
       -ink         ۷۰۰   متن روی زمینهٔ روشن — و پُرِ هاور

   «پُرِ هاور» و «متن» عمداً یک مقدارند: در تمِ روشن پلهٔ ۷۰۰ تیره‌تر از
   ۶۰۰ است (هاور باید تیره‌تر شود) و در تمِ تیره روشن‌تر (هاور باید روشن‌تر
   شود). یک مقدار، دو نقش، و در هر دو تم درست.

   چون نردبان در تمِ تیره وارونه است، **این بلوک در دو تم یکی است.** هیچ
   نامِ نقشی دو بار تعریف نمی‌شود؛ فقط یازده مقدارِ خامِ بالا عوض می‌شوند.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── برند ───────────────────────────────────────────────────────────── */
    --myo-brand-soft:        var(--myo-brand-50);
    --myo-brand-soft-2:      var(--myo-brand-100);
    --myo-brand-line:        var(--myo-brand-200);
    --myo-brand-line-strong: var(--myo-brand-400);
    --myo-brand-icon:        var(--myo-brand-500);
    --myo-brand-fill:        var(--myo-brand-600);
    --myo-brand-ink:         var(--myo-brand-700);
    --myo-brand:             var(--myo-brand-fill);
    --myo-brand-hover:       var(--myo-brand-ink);
    --myo-brand-vivid:       var(--myo-brand-icon);
    --myo-brand-muted:       var(--myo-brand-line-strong);
    --myo-on-brand:          var(--myo-on-fill);

    /* ── تأیید ──────────────────────────────────────────────────────────── */
    --myo-ok-soft:           var(--myo-ok-50);
    --myo-ok-soft-2:         var(--myo-ok-100);
    --myo-ok-line:           var(--myo-ok-200);
    --myo-ok-line-strong:    var(--myo-ok-400);
    --myo-ok-icon:           var(--myo-ok-500);
    --myo-ok-fill:           var(--myo-ok-600);
    --myo-ok-ink:            var(--myo-ok-700);
    --myo-ok:                var(--myo-ok-ink);
    --myo-on-ok:             var(--myo-on-fill);

    /* ── هشدار ──────────────────────────────────────────────────────────── */
    --myo-warn-soft:         var(--myo-warn-50);
    --myo-warn-soft-2:       var(--myo-warn-100);
    --myo-warn-line:         var(--myo-warn-200);
    --myo-warn-line-strong:  var(--myo-warn-400);
    --myo-warn-icon:         var(--myo-warn-500);
    --myo-warn-fill:         var(--myo-warn-600);
    --myo-warn-ink:          var(--myo-warn-700);
    --myo-warn:              var(--myo-warn-ink);
    --myo-on-warn:           var(--myo-on-fill);

    /* ── خطر ────────────────────────────────────────────────────────────── */
    --myo-danger-soft:       var(--myo-danger-50);
    --myo-danger-soft-2:     var(--myo-danger-100);
    --myo-danger-line:       var(--myo-danger-200);
    --myo-danger-line-strong:var(--myo-danger-400);
    --myo-danger-icon:       var(--myo-danger-500);
    --myo-danger-fill:       var(--myo-danger-600);
    --myo-danger-ink:        var(--myo-danger-700);
    --myo-danger:            var(--myo-danger-ink);
    --myo-on-danger:         var(--myo-on-fill);

    /* ── اطلاع ──────────────────────────────────────────────────────────
       این بار رنگِ *خودش* را دارد و به برند تا نخورده. در دورِ قبل برند
       فیروزه بود و «اطلاعِ فیروزه‌ای» فقط نویز می‌شد؛ حالا برند آبیِ ۲۶۲
       است و اطلاع فیروزهٔ ۲۰۵ — ۵۷ درجه فاصله، یعنی نوارِ «توجه» با دکمهٔ
       «ثبت» اشتباه گرفته نمی‌شود. */
    --myo-info-soft:         var(--myo-info-50);
    --myo-info-soft-2:       var(--myo-info-100);
    --myo-info-line:         var(--myo-info-200);
    --myo-info-line-strong:  var(--myo-info-400);
    --myo-info-icon:         var(--myo-info-500);
    --myo-info-fill:         var(--myo-info-600);
    --myo-info-ink:          var(--myo-info-700);
    --myo-info:              var(--myo-info-ink);
    --myo-on-info:           var(--myo-on-fill);

    /* ── ارغوانی — لهجهٔ دوم ─────────────────────────────────────────────
       نه وضعیت است نه اقدام: جایی که باید «فرق داشته باشد» ولی قضاوتی در
       کار نیست. فازِ کاردیو و لهجه‌های ثانویه. */
    --myo-accent-soft:       var(--myo-accent-50);
    --myo-accent-soft-2:     var(--myo-accent-100);
    --myo-accent-line:       var(--myo-accent-200);
    --myo-accent-line-strong:var(--myo-accent-400);
    --myo-accent-icon:       var(--myo-accent-500);
    --myo-accent-fill:       var(--myo-accent-600);
    --myo-accent-ink:        var(--myo-accent-700);
    --myo-accent-alt:        var(--myo-accent-ink);
    --myo-accent-alt-soft:   var(--myo-accent-soft);
    --myo-on-accent:         var(--myo-on-fill);

    /* ── متن ────────────────────────────────────────────────────────────
       چهار پله و بس. `ink-faint` پلهٔ نردبان نیست و جداگانه حل شده، چون
       قراردادش این است که روی *هر* سطحِ اپ ۴.۵ بدهد — از جمله `surface-3`
       که پلهٔ ۶۰۰ رویش ۴.۱۲ می‌داد.
       `ink-disabled` عمداً زیرِ آستانه است: متنِ غیرفعال از ۱.۴.۳ معاف
       است و اگر خوانا باشد «غیرفعال» دیده نمی‌شود. */
    --myo-ink:               var(--myo-neutral-950);
    --myo-ink-2:             var(--myo-neutral-800);
    --myo-ink-muted:         var(--myo-neutral-700);
    --myo-ink-disabled:      var(--myo-neutral-500);
    --myo-on-dark:           var(--myo-on-deep);

    /* ── خط ─────────────────────────────────────────────────────────────
       در طراحیِ فلت، خط جای سایه را می‌گیرد. `line-3` تنها پله‌ای است که
       ۳:۱ می‌دهد و مالِ مرزِ کنترل‌هاست (۱.۴.۱۱)، نه جداکنندهٔ تزیینی. */
    --myo-line:              var(--myo-neutral-200);
    --myo-line-2:            var(--myo-neutral-300);
    --myo-line-3:            var(--myo-neutral-500);

    /* ── نوارِ کمیت ──────────────────────────────────────────────────────
       نه رنگِ برند می‌گیرد (کمیت است، نه قضاوت — قضاوتش کارِ کارتِ MEV/MRV
       است) و نه رنگِ متن: رنگِ متن روی نوارِ ۵پیکسلی یک خطِ سیاه می‌کشید. */
    --myo-bar:               var(--myo-neutral-500);

    /* ── فازِ جلسه ───────────────────────────────────────────────────────
       قرمز در این اپ یک معنی دارد و آن خطر است، پس کاردیو ارغوانی است.
       فازِ «اصلی» پیش‌فرضِ هر جلسه است و پیش‌فرض رنگ لازم ندارد. */
    --myo-phase-warm:        var(--myo-warn-ink);   --myo-phase-warm-bg:   var(--myo-warn-soft);
    --myo-phase-main:        var(--myo-ink-2);      --myo-phase-main-bg:   var(--myo-surface-2);
    --myo-phase-cardio:      var(--myo-accent-ink); --myo-phase-cardio-bg: var(--myo-accent-soft);
    --myo-phase-cool:        var(--myo-info-ink);   --myo-phase-cool-bg:   var(--myo-info-soft);

    /* ── «نیوی» ──────────────────────────────────────────────────────────
       نامِ `navy` تاریخی است و ~۹۰ جای استفاده رویش سوارند. **خانوادهٔ
       جوهر است، نه سطحِ تیره** — و این تفاوت تا پیش از دارک‌مود دیده
       نمی‌شد، چون `--myo-ink` و `--myo-navy` یک مقدار داشتند.

       در دارک‌مود از هم جدا می‌شوند: جوهر روشن می‌شود، سطحِ تیره تیره
       می‌ماند. با نگاشتِ اشتباه، عنوانِ `navy-d` روی زمینهٔ تیره کنتراستِ
       ۱.۱۵ می‌داد — یعنی نامرئی. سنجیده شد، حدس نبود.

       آن چند جایی که واقعاً *سطحِ تیره* می‌خواهند (سرنوارِ ذخیره، توست،
       دکمهٔ نیوی) صریحاً `--myo-deep` را صدا می‌زنند. */
    --myo-navy:              var(--myo-ink-2);
    --myo-navy-deep:         var(--myo-ink);
    --myo-navy-soft:         var(--myo-surface-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   ۴. مقیاس — قلم، شعاع، سایه، حرکت، ارتفاعِ کنترل.
   این‌ها رنگ نیستند و با تم عوض نمی‌شوند (سایه استثناست و بالا تعریف شده).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── مقیاسِ قلم: پایه ۱۳، هفت پله ─────────────────────────────────── */
    --myo-fs-xs: 11px;
    --myo-fs-sm: 12px;
    --myo-fs-base: 13px;
    --myo-fs-md: 14px;
    --myo-fs-lg: 16px;
    --myo-fs-xl: 20px;
    --myo-fs-2xl: 26px;
    /* پلهٔ هشتم، فقط برای تابلوِ عددِ میزکار. جای دیگری بازش نکن — با آن،
       «کامپکت» معنایش را از دست می‌دهد. */
    --myo-fs-3xl: 32px;

    /* ── شعاع ───────────────────────────────────────────────────────────
       از ۴/۶/۸/۱۰/۱۲ به ۸/۱۰/۱۲/۱۶/۲۰ رفت. قاعدهٔ قبلی «فلت، شعاعِ کم»
       بود و همان چیزی است که شهاب «سفت و سخت» خواند.

       اعداد از mui.com خوانده شدند نه از سلیقه: `MuiPaper` شعاعِ ۱۲،
       دکمه ۱۰، چیپ ۱۶، و کنترل‌های ریز ۷ تا ۸ دارند. پس ۱۲ پلهٔ «کارت»
       است (`lg`)، ۱۰ پلهٔ «دکمه» (`md`) و ۸ کفِ کنترل‌های ریز (`sm`). */
    --myo-r-sm: 8px;
    --myo-r-md: 10px;
    --myo-r-lg: 12px;
    --myo-r-xl: 16px;
    --myo-r-2xl: 20px;
    --myo-r-3xl: 24px;
    --myo-r-pill: 999px;

    /* ── حرکت ──────────────────────────────────────────────────────────── */
    --myo-ez: cubic-bezier(.22, 1, .36, 1);
    --myo-ez-in: cubic-bezier(.4, 0, .2, 1);
    --myo-ez-spring: cubic-bezier(.34, 1.56, .64, 1);
    --myo-d-1: 120ms;
    --myo-d-2: 200ms;
    --myo-d-3: 320ms;
    --myo-d-4: 520ms;

    /* ── ارتفاعِ کنترل‌ها ────────────────────────────────────────────────
       کامپکت‌بودن یک عدد لازم دارد، نه سلیقهٔ هر مؤلفه. یک پله بالا رفت
       (۲۶/۳۰/۳۴ → ۲۸/۳۳/۳۸): کنترلِ ۲۶پیکسلی کنارِ شعاعِ ۱۰ فشرده دیده
       می‌شود و همان حسِ «سفت» را می‌دهد.

       **این عدد سقف دارد و سقفش ویزارد است:** پنج پنلِ ویزارد باید بدونِ
       اسکرول در یک نما جا شوند ([[wizard-nofit-scroll-priority]]). پس از
       هر تغییرِ این سه عدد، `clientHeight == scrollHeight` هر پنج پنل را
       بسنج. ۴۰ امتحان شد و مرحلهٔ پنج را سرریز کرد. */
    --myo-h-sm: 28px;
    --myo-h-md: 33px;
    --myo-h-lg: 38px;

    /* سه قلمِ ایموجی **پیش از** `sans-serif` می‌آیند، نه بعدش. خانوادهٔ
       عامِ `sans-serif` به یک قلمِ مشخصِ سیستم حل می‌شود و صف همان‌جا
       تمام می‌شود — پس هر نامی که بعد از آن نوشته شود هرگز خوانده
       نمی‌شود. با ترتیبِ قبلی 👋ِ سرِ میزکار یک مربعِ خالی بود، با آنکه
       هر سه قلم در فهرست نوشته شده بودند. رقم و حرف از آن‌ها نمی‌آید:
       قلم‌های قبلی همه را دارند و صف زودتر تمام می‌شود. */
    --myo-font: "IRANSansX", Tahoma, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   قلمِ حالتِ انگلیسی.

   قلمِ اپ نسخهٔ **FaNum** است و این یعنی ارقامِ لاتین را با گلیفِ فارسی
   می‌کشد — عمدی، تا عدد در فارسی یکدست باشد. ولی در حالتِ انگلیسی همان
   ویژگی یک باگ است: `fa()` رشتهٔ «20» می‌دهد و صفحه «۲۰» نشان می‌دهد، و
   هیچ اسکریپتی هم پیدایش نمی‌کند چون متنِ DOM درست است. با چشم دیده شد،
   نه با grep.

   پس در انگلیسی کلِ قلم عوض می‌شود، نه فقط ارقام: نسخهٔ بدونِ FaNum در
   `public/fonts/` نیست، و لاتینِ IRANSansX هم قلمِ رابطِ انگلیسی نیست.
   همان پشتهٔ سایتِ عمومی (`site.css`) — یک منبع، دو مصرف‌کننده.

   ولی اولِ پشته `IRANSansX Fa` می‌نشیند — همان قلم با `unicode-range`ِ
   محدود به حروفِ فارسی (بالاتر در همین فایل). متنِ فارسیِ داده‌ای در حالتِ
   انگلیسی هم هست و باید قلمِ خودش را بگیرد؛ رقم و حرفِ لاتین دست‌نخورده به
   Inter و پشتِ‌سرش می‌رسند.
   ══════════════════════════════════════════════════════════════════════════ */
html[lang="en"] {
    --myo-font: "IRANSansX Fa", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   ۵. نگاشتِ نام‌های قدیمی.

   هیچ مقدارِ تازه‌ای این‌جا ساخته نمی‌شود — هر نامِ قدیمی فقط به یک *نقش*
   اشاره می‌کند. به همین دلیل کلِ سورس با عوض‌شدنِ پالت همراه می‌شود بدونِ
   اینکه لازم باشد ۳۴۰۰ قاعده بازنویسی شود، و دارک‌مود هم مجانی به همه‌جا
   می‌رسد: نام‌های قدیمی هم از همان یازده پله می‌خوانند.

   نام‌های `orange` تاریخی‌اند و عمداً مانده‌اند؛ مقدارشان آبیِ برند است.
   تغییرِ نامشان هیچ پیکسلی را بهتر نمی‌کند و ~۲۴۰۰ جای استفاده رویشان
   سوار است.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* متن */
    --t1: var(--myo-ink);          --ink: var(--myo-ink);         --cs-ink: var(--myo-ink);       --sd-ink: var(--myo-ink);
    --t2: var(--myo-ink-2);        --ink-2: var(--myo-ink-2);     --sd-ink-2: var(--myo-ink-2);
    --t3: var(--myo-ink-muted);    --muted: var(--myo-ink-muted); --cs-muted: var(--myo-ink-muted);
    --sd-ink-3: var(--myo-ink-muted); --pr-muted: var(--myo-ink-muted);
    --t4: var(--myo-ink-disabled); --cs-faint: var(--myo-ink-faint); --sd-ink-4: var(--myo-ink-faint);

    /* سطح */
    --paper: var(--myo-paper);     --s1: var(--myo-paper);        --cs-panel: var(--myo-paper);   --sd-panel: var(--myo-paper);
    --s2: var(--myo-surface);      --wash: var(--myo-surface);    --sd-inset: var(--myo-surface); --cs-soft: var(--myo-surface);
    --s3: var(--myo-surface-2);    --wash-2: var(--myo-surface-2);--sd-inset-2: var(--myo-surface-2);
    --cs-soft-2: var(--myo-surface-2); --pr-canvas: var(--myo-surface-2);
    --s4: var(--myo-surface-3);
    --s5: var(--myo-line-2);
    --bg: var(--myo-canvas);       --sd-canvas: var(--myo-canvas);--cs-canvas: var(--myo-canvas); --sd-canvas-2: var(--myo-surface);

    /* خط — `--b1/2/3` قبلاً rgba بودند. حالا رنگِ مات‌اند: روی زمینهٔ تیره
       خطِ نیمه‌شفافِ سیاه ناپیدا می‌شود و دارک‌مود را بی‌مرز می‌کرد. */
    --line: var(--myo-line);       --sd-line: var(--myo-line);    --cs-line: var(--myo-line);     --pr-line: var(--myo-line);
    --line-2: var(--myo-line-2);   --sd-line-2: var(--myo-line-2);--cs-line-strong: var(--myo-line-2);
    --b1: var(--myo-line);         --b2: var(--myo-line-2);       --b3: var(--myo-line-3);

    /* برند */
    --acc: var(--myo-brand);       --cs-orange: var(--myo-brand); --sd-orange: var(--myo-brand);
    --pr-orange: var(--myo-brand); --orange-500: var(--myo-brand);
    --acc-d: var(--myo-brand-ink); --sd-orange-2: var(--myo-brand-ink); --cs-orange-deep: var(--myo-brand-ink);
    --orange-600: var(--myo-brand-ink); --orange-700: var(--myo-brand-ink); --sd-orange-fill: var(--myo-brand-ink);
    --acc-v: var(--myo-brand-vivid); --acc-l: var(--myo-brand-line);
    --acc-w: var(--myo-brand-soft);--orange-100: var(--myo-brand-soft); --cs-orange-soft: var(--myo-brand-soft);
    --sd-orange-soft: var(--myo-brand-soft); --pr-orange-soft: var(--myo-brand-soft);

    /* تیره */
    --navy: var(--myo-navy);       --cs-navy: var(--myo-navy);    --sd-navy: var(--myo-navy);     --navy-800: var(--myo-navy);
    --navy-700: var(--myo-navy);   --lime: var(--myo-navy);
    --navy-d: var(--myo-navy-deep);--cs-navy-deep: var(--myo-navy-deep); --sd-navy-2: var(--myo-navy-deep);
    --navy-900: var(--myo-navy-deep); --navy-950: var(--myo-navy-deep);
    --pr-navy: var(--myo-navy-deep); --pr-navy-deep: var(--myo-navy-deep);
    --navy-100: var(--myo-navy-soft); --sd-navy-soft: var(--myo-navy-soft);
    --cyan: var(--myo-info-ink);

    /* معنایی */
    --ok: var(--myo-ok);           --mint: var(--myo-ok);         --sd-green: var(--myo-ok);      --cs-green: var(--myo-ok);
    --ok-w: var(--myo-ok-soft);    --sd-green-soft: var(--myo-ok-soft); --cs-green-soft: var(--myo-ok-soft);
    --warn: var(--myo-warn);       --amber: var(--myo-warn);      --sd-amber: var(--myo-warn);
    --warn-w: var(--myo-warn-soft);--sd-amber-soft: var(--myo-warn-soft);
    --coral: var(--myo-danger);    --sd-red: var(--myo-danger);
    --sd-red-soft: var(--myo-danger-soft);
    --violet: var(--myo-accent-alt); --ss-accent: var(--myo-accent-alt);
    --ex-accent: var(--myo-info);

    /* فاز */
    --phase-warm: var(--myo-phase-warm);     --phase-warm-bg: var(--myo-phase-warm-bg);
    --phase-main: var(--myo-phase-main);     --phase-main-bg: var(--myo-phase-main-bg);
    --phase-cardio: var(--myo-phase-cardio); --phase-cardio-bg: var(--myo-phase-cardio-bg);
    --phase-cool: var(--myo-phase-cool);     --phase-cool-bg: var(--myo-phase-cool-bg);

    /* شعاع */
    --r1: var(--myo-r-sm);   --r2: var(--myo-r-md);  --r3: var(--myo-r-lg);  --r4: var(--myo-r-xl);
    --rd-1: var(--myo-r-sm); --rd-2: var(--myo-r-md);--rd-3: var(--myo-r-lg);--rd-4: var(--myo-r-xl);
    --rd-5: var(--myo-r-2xl); --rd-pill: var(--myo-r-pill);
    --r-sm: var(--myo-r-sm); --r-md: var(--myo-r-md);--r-lg: var(--myo-r-lg);

    /* سایه و حلقهٔ فوکوس */
    --el-1: var(--myo-el-1); --el-2: var(--myo-el-2); --el-3: var(--myo-el-3);
    --el-card: var(--myo-el-card);
    --shadow-1: var(--myo-el-1); --shadow-2: var(--myo-el-3);
    --el-orange: var(--myo-el-brand);
    --el-navy: var(--myo-el-deep);
    --ring-orange: var(--myo-ring); --ring-navy: var(--myo-ring-deep);
    --focus: var(--myo-ring);

    /* حرکت */
    --ez: var(--myo-ez); --ui-ease: var(--myo-ez); --ez-in: var(--myo-ez-in);
    --ez-bounce: var(--myo-ez-spring); --ui-spring: var(--myo-ez-spring);
    --d-1: var(--myo-d-1); --d-2: var(--myo-d-2); --d-3: var(--myo-d-3); --d-4: var(--myo-d-4);
    --ui-fast: var(--myo-d-1); --ui-base: var(--myo-d-2); --ui-slow: var(--myo-d-3);

    /* کنترل‌ها */
    --ui-sw-off: var(--myo-line-3); --ui-sw-off-hover: var(--myo-ink-muted);
    --ui-sw-on: var(--myo-brand); --ui-sw-on-hover: var(--myo-brand-ink); --ui-sw-knob: var(--myo-paper);
    --ui-idle-line: var(--myo-line-3); --ui-idle-line-hover: var(--myo-ink-muted);

    --f: var(--myo-font);
}

/* سه صفحه توکنِ محلیِ ID-دار داشتند که بر :root می‌چربید؛ همان نام‌ها
   این‌جا دوباره — و این بار روی همان پالتِ واحد — تعریف می‌شوند.
   ویزارد از همین راه رنگ می‌گیرد: هیچ توکنِ `--myo-`ی نمی‌شناسد و فقط
   نام‌های قدیمی را صدا می‌زند. */
#scrWizard, #scrPlansList{
    --ink: var(--myo-ink);           --ink-2: var(--myo-ink-2);       --muted: var(--myo-ink-muted);
    --line: var(--myo-line);         --line-2: var(--myo-line-2);     --paper: var(--myo-paper);
    --wash: var(--myo-surface);      --wash-2: var(--myo-surface-2);
    --navy: var(--myo-navy);         --navy-d: var(--myo-navy-deep);
    --acc: var(--myo-brand);         --acc-d: var(--myo-brand-ink);   --acc-w: var(--myo-brand-soft);
    --ok: var(--myo-ok);             --ok-w: var(--myo-ok-soft);
    --warn: var(--myo-warn);         --warn-w: var(--myo-warn-soft);
    --r-lg: var(--myo-r-lg);         --r-md: var(--myo-r-md);         --r-sm: var(--myo-r-sm);
    --ez: var(--myo-ez);

    --cs-canvas: var(--myo-canvas);  --cs-panel: var(--myo-paper);    --cs-soft: var(--myo-surface);
    --cs-soft-2: var(--myo-surface-2); --cs-line: var(--myo-line);    --cs-line-strong: var(--myo-line-2);
    --cs-ink: var(--myo-ink);        --cs-muted: var(--myo-ink-muted);--cs-faint: var(--myo-ink-faint);
    --cs-navy: var(--myo-navy);      --cs-navy-deep: var(--myo-navy-deep);
    --cs-orange: var(--myo-brand);   --cs-orange-deep: var(--myo-brand-ink);
    --cs-orange-soft: var(--myo-brand-soft);
    --cs-green: var(--myo-ok);       --cs-green-soft: var(--myo-ok-soft);

    --pr-navy: var(--myo-navy-deep); --pr-navy-deep: var(--myo-navy-deep);
    --pr-orange: var(--myo-brand);   --pr-orange-soft: var(--myo-brand-soft);
    --pr-canvas: var(--myo-surface-2); --pr-line: var(--myo-line);    --pr-muted: var(--myo-ink-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   ۶. بازماندهٔ لایهٔ قدیمی.
   ══════════════════════════════════════════════════════════════════════════ */

/* ورودی‌ها هیچ‌وقت نباید زیرِ ۱۳px باشند: در iOS زیرِ ۱۶px زوم می‌کند و
   زیرِ ۱۳px تایپِ فارسی واقعاً سخت می‌شود. */
input, select, textarea { font-size: 13px; }

/* کفِ اندازه برای دو بازماندهٔ زنده — عمداً مقدارِ صریح، نه max(...,1em):
   در font-size واحدِ em به اندازهٔ *والد* اشاره می‌کند و max() متنِ ریز را
   تا اندازهٔ والد باد می‌کرد. */

/* ══ قاعدهٔ «یک رنگ برای انتخاب‌شده» ═══════════════════════════════════════
   آبیِ برند = چیزی که کاربر انتخاب کرده / جای فعالِ او.
   گرافیت = سرصفحه و ساختار، نه انتخاب.
   تنها مصرف‌کنندهٔ باقی‌مانده‌اش ویزارد است. */
#scrWizard .st-sw.is-on {
    background: var(--myo-brand);
    color: var(--myo-on-fill);
    box-shadow: none;
}
.daydots u.on { background: var(--myo-brand); }

/* برچسب‌های ۱۴پیکسلیِ روی پُرِ برند ضخیم می‌مانند تا آستانهٔ کنتراست
   برقرار بماند. */
.wz-step-n, .wkd.is-on, .st-sw.is-on .st-sw-t b { font-weight: 800; }


/* ══════════════════════════════════════════════════════════════════════════
   ۷. گوشی — بازتعریفِ همان مقیاس، نه یک مقیاسِ دوم.

   اپ روی دسکتاپ عمداً کامپکت است: قلمِ پایه ۱۳ و کنترلِ ۳۸ پیکسلی. روی
   گوشی هر دو عدد کوچک‌اند — نه فقط برای چشم، که برای *انگشت*: هدفِ لمس
   زیرِ ۴۴ پیکسل خطا می‌دهد و هر ورودیِ زیرِ ۱۶ پیکسل در iOS باعثِ زومِ
   خودکارِ صفحه می‌شود (و بعد از زوم، سافاری خودش برنمی‌گرداند).

   پس به‌جای نوشتنِ استثنا در ده فایل، همان توکن‌ها در ≤۷۲۰px یک پله بالا
   می‌روند. هر فایلی که از توکن خوانده باشد خودبه‌خود درست می‌شود؛ هر جایی
   که عددِ خام نوشته باشد باید جداگانه دیده شود.

   ۷۲۰ مرزِ انتخابی است چون همان مرزی است که تاپ‌بار و گریدهای فرم از قبل
   داشتند — مرزِ تازه یعنی دو جای شکستن.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    :root {
        --myo-fs-xs: 12px;
        --myo-fs-sm: 13px;
        --myo-fs-base: 14px;
        --myo-fs-md: 15px;
        --myo-fs-lg: 17px;
        --myo-fs-xl: 21px;
        --myo-fs-2xl: 25px;
        --myo-fs-3xl: 29px;

        /* ۳۴/۴۰/۴۴ — ۴۴ کفِ توصیه‌شدهٔ هدفِ لمس است و `lg` همان اندازه‌ای
           است که ورودی‌ها و دکمه‌های اصلی می‌گیرند. `sm` زیرِ آن می‌ماند
           چون چیپ و نشان است، نه هدفِ لمس؛ هر جا که *بشود* زدش، در
           myo-ds.css کفِ جداگانه دارد. */
        --myo-h-sm: 34px;
        --myo-h-md: 40px;
        --myo-h-lg: 44px;
    }

    /* زومِ خودکارِ iOS دقیقاً زیرِ ۱۶px راه می‌افتد — ۱۵ هم کافی نیست.
       این تنها جایی است که عددِ خام از توکن جلو می‌زند، و عمدی است:
       توکنِ `md` ممکن است روزی عوض شود، این عدد نباید. */
    input, select, textarea { font-size: 16px; }

    /* هایلایتِ آبیِ لمس در اندروید روی هر دکمه‌ای می‌افتد و با حالتِ
       `:active`ِ خودِ سیستمِ طراحی دوتا می‌شود. */
    button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
}