/* ============================================================
   توکن‌های طراحی — تنها منبع رنگ/فاصله/شعاع سایت عمومی.
   هیچ مقدار hex/px مستقیم در Blade یا site.css نوشته نمی‌شود؛ فقط var().
   استثنا: رنگ‌هایی که از داده می‌آیند ($color->hex).
   ============================================================ */
:root {
    --bg: #0f1216;
    --surface: #171c22;
    --surface-2: #1f262e;
    --border: #2b333c;
    --text: #e7ebef;
    --muted: #97a1ab;
    --accent: #ff8a3d;
    --accent-soft: rgba(255, 138, 61, .12);
    --ok: #3ddc84;
    --ok-soft: rgba(61, 220, 132, .14);
    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, .14);
    /* آبیِ اطلاعاتی — چهارمین رنگِ معناداری که قلمِ ۹ (داشبوردِ کاربر) لازم داشت
       (شمارندهٔ «تیکت‌های باز»)؛ سه تونِ قبلی (ok/danger/gold) هیچ‌کدام معنایش را نمی‌دادند. */
    --info: #5b9bf0;
    --info-soft: rgba(91, 155, 240, .14);
    /* نشانِ طلاییِ staff — عمداً جدا از accent (نارنجیِ اکشن/CTA) تا حسِ «مدال»
       بدهد نه هشدار/دکمه؛ community سبز می‌ماند (تمایزِ الزامیِ CLAUDE.md) */
    --gold: #e3b341;
    --gold-soft: rgba(227, 179, 65, .16);
    --radius: 14px;
    --radius-sm: 10px;
    --sidebar-w: 288px;
    --header-h: 90px;

    /* مقیاسِ فاصله — تنها منبعِ مجازِ فاصله‌گذاری (فاز ۵؛ CSSِ جدید فقط از این‌ها) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 22px;
    --space-6: 32px;
    --shadow: rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .5);

    /* رنگ‌های نقشی که پیش‌تر هاردکد بودند (fix فاز ۱) */
    --on-accent: #17110a;                 /* متن روی دکمه‌ی accent */
    /* متنِ رویِ پس‌زمینهٔ --ok. در تمِ تیره --ok روشن است (#3ddc84)، پس متنش تیره می‌شود
       (۱۰٫۵۰) — و در تمِ روشن دقیقاً برعکس. یک توکن، دو قطبِ مخالف. */
    --on-ok: #17110a;
    --on-danger: #ffffff;                 /* متن روی زمینهٔ danger (بنرِ ورود به حسابِ خودی، قلمِ ۷) */
    --imp-scrim: rgba(0, 0, 0, .2);       /* لایهٔ تیرهٔ چیپ/دکمهٔ بنرِ ورود به حساب */
    --imp-scrim-strong: rgba(0, 0, 0, .3);/* همان، در حالتِ hover/خروج */
    --img-bg: #eef1f5;                    /* پس‌زمینه‌ی جای عکس (کارت/کاروسل) */
    --seller-bg: #ffffff;                 /* کاشی لوگوی فروشنده (لوگو زمینه‌ی روشن می‌خواهد) */
    --seller-fg: #111111;                 /* متن/آیکن داخل کاشی فروشنده */
    --settings-dot: #22e3ff;              /* نقطه‌ی نورانی «تنظیمات موجود» */
    --settings-glow: rgba(34, 227, 255, .55);
    --promo-muted: #C9A98A;               /* متنِ مکتومِ کارتِ پرومویِ خدماتِ پرینت (زمینه‌ی گرم) */

    /* رنگ محورهای SVG حجم چاپ (صفحه‌ی دستگاه) */
    --axis-x: #3ddc84;
    --axis-y: #f5b53d;
    --axis-z: #4c8bf5;

    /* مقیاسِ اندازهٔ آیکونِ بزرگِ solid (فازِ آیکون‌ها) */
    --icon-size-sm: 24px;
    --icon-size-md: 40px;
    --icon-size-lg: 64px;

    /* مقیاسِ اندازهٔ آیکونِ ریزِ خطی (Lucide، لایهٔ ۲) */
    --icon-ui-size-sm: 16px;
    --icon-ui-size-md: 20px;
    --icon-ui-size-lg: 24px;

    /*
     * ═══ کارتِ مشخصاتِ فنی — طرحِ `docs/design/design_handoff_filament_specs_card/` ═══
     *
     * طرح **high-fidelity** است («Colors, type, spacing, radii, and row metrics
     * below are final»)، پس مقدارِ نهایی این‌جا می‌نشیند نه گِردشدهٔ آن — همان
     * حکمی که برایِ نشان‌هایِ کارگاه زده شد.
     *
     * 🔴 **و سه مقدار عمداً *همان طرح نیستند*، چون زیرِ AA بودند.** سنجش رویِ
     * زمینهٔ کارت (`#171B22` طرح ≡ `--surface` ما، اختلاف ۱٫۰۱):
     *
     *   طرح `#1677FF` تونِ فیلامنت  →  ۴٫۲۱  ✗   ⇒ `--info` (۶٫۰۸)
     *   طرح `#6B7480` مکتوم/شمارش   →  ۳٫۶۵  ✗   ⇒ `--muted` (۶٫۵۸)
     *   طرح `#FFFFFF` عنوان         → ۱۷٫۲۷  ✓   ⇒ `--text` (۱۴٫۴۱، سفیدِ خالص در پالتِ ما نیست)
     *
     * ⚠ و «۱۳px با وزنِ ۷۰۰» متنِ بزرگ حساب نمی‌شود (آستانهٔ WCAG برایِ بولد
     * ‏۱۸٫۶۶px است) ⇒ آستانه ۴٫۵ است نه ۳٫۰. اعداد در
     * `FilamentSpecsCardTest` قفل شده‌اند، نه فقط این‌جا نوشته.
     *
     * ✅ و دو تونِ دیگر عیناً از طرح‌اند، چون AA را می‌گذرانند: `#FAAD14`
     * ‏(۹٫۰۹) و `#52C41A` (۷٫۶۲).
     */
    --spec-hairline: rgba(255, 255, 255, .08);   /* لبهٔ کارت و پنلِ گروه */
    --spec-strip: rgba(255, 255, 255, .035);     /* نوارِ سرِ گروه */
    --spec-rule: rgba(255, 255, 255, .05);       /* خطِ بینِ ردیف‌ها */
    --spec-zebra: rgba(255, 255, 255, .018);     /* نوارِ یک‌درمیان */
    --spec-label: #A7B0BA;                       /* برچسبِ ردیف — عیناً طرح (۷٫۸۶) */
    --spec-tone-filament: var(--info);
    --spec-tone-print: #FAAD14;
    --spec-tone-mech: #52C41A;
    /* 🔴 **تُنِ چهارم — در طرح نیست و ما افزودیمش** (`catalog.md §۶.۳۳`).

       طرح سه گروه دارد چون از عکسِ صفحهٔ خودمان کشیده شده و آن روز صفحه سه
       گروه نشان می‌داد. ثباتِ پارامترها **چهار** دسته دارد، و ۱۸ ردیفِ
       شیمیایی/فیزیکی زیرِ عنوانِ «مشخصاتِ چاپ» می‌نشستند.

       ⚠ **انتخاب با سنجش، نه چشم:** سه تُنِ موجود رویِ کارت ۶٫۰۸ / ۹٫۰۹ /
       ۷٫۶۲ کنتراست دارند. بنفشِ تیره‌تر (#9254DE) ۳٫۷۴ می‌داد — بیرون از
       خانواده. این یکی ۵٫۸۸ است، درست کنارِ آبیِ ۶٫۰۸. */
    --spec-tone-chem: #B37FEB;   /* ۵٫۸۸ رویِ کارت · ۶٫۳۹ رویِ پس‌زمینه */
    --spec-tone-physical: #13C2C2;   /* ۷٫۸۳ رویِ کارت */
    /* 🔴 **سبزِ خطِ «تأیید شده توسط …» — حکمِ صاحب پروژه: «که حس اعتماد هم بدهد».**

       ⚠ **عمداً `--spec-tone-mech` (#52C41A) نیست:** آن برچسبِ گروهِ مکانیکی رویِ
       همین صفحه است، و رنگِ مشترک یعنی خطِ تأییدِ سازنده مثلِ یک عنوانِ گروه
       خوانده شود.
       ⚠ **و `--ok` (#3ddc84) هم نیست:** آن سبزِ نعنایی/آبی‌مایل است و برایِ
       حالتِ موفقیت رزرو شده.

       ⇒ سبزِ زردمایل و روشن‌تر از هر دو، پس در نگاهِ اول از هیچ‌کدام
       اشتباه گرفته نمی‌شود. */
    --tone-verified: #95DE64;   /* ۱۰٫۶۱ رویِ کارت — در برابرِ ۷٫۶۲ِ مکانیکی و ۹٫۶۸ِ ok */
    /* 🔴 **نارنجیِ کم‌رنگِ برچسبِ انگلیسیِ زیرِ هر ردیف — حکمِ صاحب پروژه ۰۹‑۰۲:**
       «رنگ متن انگلیسی نارنجی کمرنگ بشه».

       ⚠ **عمداً `--accent` (#ff8a3d) نیست:** آن نارنجیِ اشباعِ خودِ سایت است
       و رویِ فلش‌هایِ اسلایدرِ همین صفحه می‌نشیند ⇒ برچسبِ فرعی نباید
       هم‌وزنِ عنصرِ تعاملی خوانده شود. این یکی **کم‌اشباع و روشن‌تر** است.

       ⚠ **و `opacity: .65`ِ قبلی برداشته شد، نه اینکه رویش بماند:** شفافیت
       رویِ رنگ یعنی کنتراستِ واقعی از عددِ توکن جدا می‌شود و این ستون دیگر
       سنجیدنی نیست. کم‌رنگی حالا **در خودِ مقدار** است. */
    --spec-label-en: #FFBB96;   /* ۱۰٫۴۴ رویِ کارت — در برابرِ ۷٫۳۱ِ accent */
    --spec-row-h: 40px;
    --spec-pad-x: 14px;
    --spec-strip-pad-y: 10px;
    --spec-card-radius: 8px;
    --spec-radius: 6px;
    --spec-dot: 7px;

    /*
     * ═══ اسلایدرِ رنگ — طرحِ `docs/design/design_handoff_filament_color_slider/` ═══
     *
     * high-fidelity، پس عددها نهایی‌اند. آنچه از `--spec-*` مشترک است
     * دوباره تعریف نمی‌شود (خطِ مو، شعاع، زمینهٔ کارت).
     *
     * ⚠ **و `accent` در خودِ طرح یک prop است، نه ثابت** («Optional props:
     * `accent` … default `#FAAD14`، alternates `#EF394E` / `#1677FF` /
     * `#52C41A`») ⇒ `--accent`ِ سایت گذاشته شد، نه رنگِ چهارمِ روی صفحه.
     * **این انحراف نیست؛ استفاده از همان چیزی است که طرح باز گذاشته.**
     */
    --slider-stage: #F5F5F5;                  /* سکویِ عکس — عیناً طرح */
    --slider-stage-h: 380px;
    --slider-ctrl: 32px;                      /* دکمهٔ فلش */
    --slider-ctrl-border: rgba(255, 255, 255, .14);
    --slider-ctrl-ink: #C9D1D9;
    --slider-scrim: rgba(0, 0, 0, .72);       /* پلاکِ نامِ رنگ رویِ عکس */
    --slider-swatch-ring: rgba(255, 255, 255, .12);
    --slider-dot-ring: rgba(255, 255, 255, .22);
    --slider-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    --slider-cell-min: 88px;                  /* ⇒ در عرضِ ۶۴۰pxِ طرح دقیقاً شش‌تا در ردیف */
    --slider-gap: 12px;

    /* منحنیِ استانداردِ Ant که طرح صریح نامش را برده، و دو مدتِ آن. */
    --slider-curve: cubic-bezier(.645, .045, .355, 1);
    --slider-ctrl-ms: 200ms;
    --slider-roll-ms: 520ms;

    /*
     * ═══ کارتِ فیلامنت — طرحِ `docs/design/design_handoff_product_card_2a/` ═══
     *
     * high-fidelity. آنچه از `--spec-*` مشترک است دوباره تعریف نمی‌شود.
     *
     * ✅ **و این‌بار هیچ رنگی به‌خاطرِ AA عوض نشد** — هر سه رنگِ متنیِ طرح
     * رویِ زمینهٔ کارت می‌گذرانند: `#C9D1D9` (۱۱٫۴۵) · `#8A949E` (۵٫۶۰) ·
     * `#52C41A` (۷٫۶۲). خودِ README هم دو تایِ آخر را سنجیده بود.
     */
    --card-tint-material: rgba(239, 57, 78, .14);   /* چیپِ جنس */
    --card-ink-material: #F76174;
    --card-tint-brand: rgba(250, 173, 20, .14);     /* چیپِ برند */
    --card-ink-brand: #FAAD14;
    --card-hover-edge: rgba(250, 173, 20, .5);
    --card-wash: rgba(255, 255, 255, .02);          /* نوارِ رنگ و پاورقی */
    --card-count-ink: #C9D1D9;
    --card-band-h: 220px;
    --card-dot: 14px;
    --card-dot-overlap: -5px;
    --card-pad: 14px;

    /*
     * پردهٔ پاپ‌آپِ عکس — عمداً سنگین‌تر از `--scrim`ِ عمومی.
     *
     * ⚠ با پردهٔ سبک، هدرِ سایت از پشت خوانده می‌شد و **دکمهٔ بستن کنارِ
     * کلیدِ تم می‌نشست** — از نظرِ کاربر دو دکمهٔ هم‌جنس، درحالی‌که یکی
     * مالِ پاپ‌آپ است و یکی مالِ صفحه.
     */
    --lightbox-scrim: rgba(0, 0, 0, .85);
}
:root[data-theme="light"] {
    --bg: #f5f7f9;
    --surface: #ffffff;
    --surface-2: #eef1f4;
    --border: #dde3e9;
    --text: #1a2027;
    --muted: #5b6673;
    --accent: #ef7a1f;
    --accent-soft: rgba(239, 122, 31, .13);

    /*
     * وضعیت‌ها در تمِ روشن — کنتراستِ AA رویِ هر سه پس‌زمینه (--bg · --surface · --surface-2).
     *
     * 🔴 چرا لازم شد: این بلاک `--ok` و `--info` را **کلاً جا انداخته بود**، پس هر دو از
     * `:root`ِ تیره می‌آمدند: #3ddc84 = ۱٫۷۸ و #5b9bf0 = ۲٫۸۴ رویِ سفید. یعنی متنِ «تأییدشده»
     * رویِ کارتِ سفید عملاً محو بود. `--danger`ِ روشن هم رویِ دو پس‌زمینه از سه‌تا زیرِ AA بود.
     *
     * آستانه ۴٫۵ است نه ۳٫۰، چون `--ok` در ۵۲ جا **متنِ ریز** است (`.verified` با ۰٫۷۸rem،
     * `.trust-badge.community`، `.notes-count`) — قاعدهٔ متنِ بزرگ این‌جا صدق نمی‌کند.
     * اعداد در `TokenContrastTest` قفل شده‌اند، نه فقط این‌جا نوشته.
     */
    --ok: #147a44;              /* ۵٫۰۲ · ۵٫۳۹ · ۴٫۷۵ */
    --ok-soft: rgba(20, 122, 68, .12);
    --info: #2a63bd;            /* ۵٫۴۰ · ۵٫۸۰ · ۵٫۱۲ */
    --info-soft: rgba(42, 99, 189, .12);
    --danger: #c02626;          /* ۵٫۵۱ · ۵٫۹۲ · ۵٫۲۲ */
    --danger-soft: rgba(192, 38, 38, .12);

    /*
     * 🔴 متنِ رویِ پس‌زمینهٔ `--ok`. چرا توکنِ جدا لازم است: `--ok` دو نقشِ **متضاد** دارد —
     * گاهی خودش متن است (باید تیره باشد تا رویِ سفید خوانده شود) و گاهی پس‌زمینه است
     * (آن‌وقت متنِ رویش باید روشن باشد). با یک رنگ نمی‌شود هر دو را داشت.
     *
     * سیاه رویِ سبزِ تیرهٔ قدیم = ۱۰٫۵۰ ✓ | سیاه رویِ سبزِ روشنِ نو = ۳٫۴۸ ✗ | سفید رویش = ۵٫۳۹ ✓
     * یعنی بی‌این توکن، **خودِ رفعِ دسترسی‌پذیری سه دکمه را از AA می‌انداخت**.
     */
    --on-ok: #ffffff;

    /* ⚠ --gold روشن (#a6740a = ۴٫۱۰ رویِ سفید) هم زیرِ AA است — معوقِ جدا، در این تغییر دست نخورد. */
    --gold: #a6740a;
    --gold-soft: rgba(166, 116, 10, .14);
    --shadow: rgba(20, 30, 45, .18);
    --scrim: rgba(20, 30, 45, .35);
    --promo-muted: #A15D24;

    /*
     * ═══ نشان‌هایِ کارگاه — طرحِ تأییدشدهٔ `docs/design/design_handoff_workshop_badges/` ═══
     *
     * 🔴 **اصلِ طرح: رنگ = دسته، نه سطح.**
     *   آبی  = «ما سند دیده‌ایم»       (verified · brand · pro)
     *   سبز  = «از رفتارِ کارگاه آمده» (active · tenure)
     *
     * ⚠ **و هیچ نسخهٔ خاکستری/قفل‌شده/کم‌رنگ ساخته نمی‌شود** — نه این‌جا توکنش هست،
     * نه در کامپوننت. کارگاهی که نشان را ندارد، فقط آن را نشان نمی‌دهد.
     * 🔑 این همان ADR ردیفِ ۳ از سمتِ بصری است: نشانِ خاکستری یعنی «این را نداری»،
     * و همان اتهامی است که تازه‌وارد را از اولین کارش محروم می‌کند.
     *
     * 📌 **نام‌ها از خودِ طرح آمده‌اند، نه از نقشِ ما** (حکمِ ۰۸‑۲۱) — تا روزی که
     * طراح نسخهٔ دوم بدهد، تطبیق یک نگاه باشد نه یک ترجمه.
     *
     * ⚠ و این هفت رنگ عمداً از پالتِ سایت جدا می‌مانند: پلاکِ نشان یک **سطحِ تیره**
     * است که رویِ کارتِ روشن می‌نشیند، پس `--surface`/`--text` را نمی‌خواند.
     */
    --badge-plate: #22272D;         /* بدنهٔ پلاک، ثابت در هر پنج */
    --badge-edge: #333A42;          /* لبهٔ ۱px */
    --badge-verified-bar: #4C87FF;  /* نوارِ پایین — دستهٔ «سند دیده‌ایم» */
    --badge-verified-ink: #7FA9FF;  /* استروکِ آیکونِ همان دسته */
    --badge-earned-bar: #17A184;    /* نوارِ پایین — دستهٔ «از رفتار آمده» */
    --badge-earned-ink: #3BC6A6;    /* استروکِ آیکونِ همان دسته */
    --badge-card-ink: #4B5563;      /* نامِ نشان رویِ کارتِ روشن (۲۲px) */

    /* دو فاصلهٔ خودِ طرح (`gap:7px` ردیف · `gap:6px` داخلِ آیتم). عمداً توکن شدند
     * و به `--space-2` گرد نشدند: طرح high-fidelity است و «عیناً بازسازی شود».
     * ⇒ همان حکمی که برایِ هفت رنگ زده شد — توکن دقیقاً جایی است که مقدارِ
     * نهاییِ طرح می‌نشیند، نه جایی که مقدارِ ما گرد می‌شود. */
    --badge-gap: 7px;
    --badge-item-gap: 6px;

    /* اندازهٔ پلاک در **ستونِ کناریِ** پروفایل (حکمِ ۰۸‑۲۲: گالری از ردیفِ افقیِ
     * تمام‌عرض به ریلِ باریک رفت). طرح ۵۶px را برایِ گالریِ تمام‌عرض داده؛ در ریلِ
     * ~۳۰۰px دو ستونِ ۵۶px لبه‌به‌لبه می‌شد. ⇒ توکن، نه عددِ درجا — همان دلیلِ دو
     * فاصلهٔ بالا: مقدارِ نهایی جایی می‌نشیند که بتوان یک‌جا عوضش کرد. */
    --badge-plate-side: 48px;

    /*
     * ═══ کارتِ مشخصاتِ فنی، در تمِ روشن ═══
     *
     * 🔴 **طرح فقط تمِ تیره را داده، و سایت هر دو را دارد** (کلیدِ تم در
     * `layouts/app.blade.php:200`). ⇒ اگر مقدارهایِ طرح این‌جا تکرار شوند،
     * **کارت در تمِ روشن ناخواناست، بی هیچ خطایی**:
     *
     *   `#FAAD14` ۱٫۹۰ ✗ · `#52C41A` ۲٫۲۷ ✗ · `#A7B0BA` ۲٫۲۰ ✗  (رویِ سفید)
     *
     * ⚠ و خطِ مویِ سفیدِ نیمه‌شفاف رویِ زمینهٔ سفید **اصلاً دیده نمی‌شود** —
     * یعنی کلِ اسکلتِ کارت غیب می‌شود. ⇒ سیاهِ نیمه‌شفاف، نه سفید.
     *
     * 🔑 **پس این بلاک ترجمهٔ طرح نیست، معادلِ نقشی‌اش است:** هر توکن به
     * همان توکنِ معناییِ روشنِ خودمان می‌رود که از قبل AA را می‌گذراند.
     *
     * ⚠ **یک شکافِ از پیش موجود که این‌جا رفع نشد:** `--gold`ِ روشن
     * ‏(`#a6740a` = ۴٫۱۰) زیرِ AA است — همان معوقی که بالاتر در همین فایل ثبت
     * شده. این کارت آن را **وارث** می‌شود، نه اینکه بسازدش.
     */
    --spec-hairline: rgba(20, 30, 45, .12);
    --spec-strip: rgba(20, 30, 45, .035);
    --spec-rule: rgba(20, 30, 45, .07);
    --spec-zebra: rgba(20, 30, 45, .02);
    --spec-label: var(--muted);
    --spec-tone-print: var(--gold);
    --spec-tone-mech: var(--ok);
    /* تُنِ چهارم در تمِ روشن — طرح تمِ روشن ندارد، پس این مقدار **نوشتهٔ
       ماست**. سنجیده: از هر سه تُنِ روشنِ موجود (۴٫۱ تا ۵٫۸) بالاتر است. */
    --spec-tone-chem: #722ED1;   /* ۶٫۹۴ رویِ سفید · ۶٫۴۶ رویِ پس‌زمینه · ۶٫۱۲ رویِ سطحِ دوم */
    --spec-tone-physical: #006D75;   /* ۶٫۱۰ رویِ سفید · ۵٫۶۸ رویِ پس‌زمینه · ۵٫۳۸ رویِ سطحِ دوم */
    /* در تمِ روشن سبزِ روشن دیده نمی‌شود، پس تیره می‌شود — همان الگویِ `--ok`.
       و از `--ok`ِ روشن (#147a44، ۵٫۰۲) عمداً فاصله دارد. */
    --tone-verified: #237804;   /* ۵٫۵۹ رویِ سفید · ۵٫۲۰ رویِ پس‌زمینه */
    /* در تمِ روشن «نارنجیِ کم‌رنگ» رویِ سفید اصلاً دیده نمی‌شود ⇒ نقشش
       وارونه می‌شود و تیره می‌ماند — همان الگویِ `--tone-verified` و `--ok`.
       ⚠ و از `--accent`ِ روشن (#ef7a1f) عمداً فاصله دارد. */
    --spec-label-en: #AD4E00;   /* ۵٫۴۳ رویِ سفید · ۵٫۱۱ رویِ پس‌زمینه */

    /* اسلایدرِ رنگ در تمِ روشن — همان دلیلِ بالا: سفیدِ نیمه‌شفاف رویِ سفید
       دیده نمی‌شود، و پلاکِ نامِ رنگ رویِ **عکس** می‌نشیند نه رویِ کارت، پس
       سیاه می‌ماند و فقط متنش سفید است. */
    /* ⚠ در تمِ روشن سکو **از طرح فاصله می‌گیرد، عمداً**: `#F5F5F5` رویِ کارتِ
       سفید تقریباً نامرئی است و مرزِ سکو گم می‌شود. طرح فقط تمِ تیره را دیده. */
    --slider-stage: var(--img-bg);
    --slider-ctrl-border: rgba(20, 30, 45, .18);
    --slider-ctrl-ink: var(--muted);
    --slider-swatch-ring: rgba(20, 30, 45, .14);
    --slider-dot-ring: rgba(20, 30, 45, .22);
    --slider-shadow: 0 2px 8px rgba(20, 30, 45, .16);
    --lightbox-scrim: rgba(20, 30, 45, .8);

    /* کفِ عرضِ ستون در گریدهایِ `auto-fit`. توکن است نه عددِ درجا، چون گاردِ
     * `SectionStylesExistTest` هر `px`ِ بیرونِ tokens.css را می‌گیرد — و درست
     * می‌گیرد: عددی که در CSS بنشیند، بی‌سروصدا از بقیهٔ گریدها دور می‌شود. */
    --grid-card-min: 240px;
}