/* ============================================================
   محاسب ۳۶۵ — دیزاین سیستم | لایه ۱: توکن‌ها (Design Tokens)
   ------------------------------------------------------------
   این فایل هیچ کامپوننتی تعریف نمی‌کند. فقط «مقدارهای پایه»:
   رنگ، فونت، فاصله، شعاع، سایه، لایه، حرکت، بریک‌پوینت.
   هر فایل CSS دیگری فقط از var(--gd-*) استفاده می‌کند و
   هیچ‌وقت مقدار خام (hex / px) نمی‌نویسد.

   ترتیب لود:
       gd-tokens.css  →  gd-components.css  →  <Page>.css
   ============================================================ */

/* ============================================================
   ۱. رنگ — نردبان‌های خام (Color ramps)
   این‌ها «رنگ خام» هستند و مستقیم در کامپوننت استفاده نمی‌شوند.
   همیشه از توکن‌های معنایی بخش ۲ استفاده کن.
   ============================================================ */
:root {
    /* آبی سازمانی — پایه: --gd-blue-600 = #2563eb */
    --gd-blue-50:  #eff6ff;
    --gd-blue-100: #dbeafe;
    --gd-blue-200: #bfdbfe;
    --gd-blue-300: #93c5fd;
    --gd-blue-400: #60a5fa;
    --gd-blue-500: #3b82f6;
    --gd-blue-600: #2563eb;   /* ★ رنگ برند */
    --gd-blue-700: #1d4ed8;
    --gd-blue-800: #1e40af;
    --gd-blue-900: #1e3a8a;

    /* نارنجی/زرد سازمانی — پایه: --gd-amber-400 = #facc15 */
    --gd-amber-50:  #fefce8;
    --gd-amber-100: #fef9c3;
    --gd-amber-200: #fef08a;
    --gd-amber-300: #fde047;
    --gd-amber-400: #facc15;  /* ★ رنگ برند — فقط به‌عنوان سطح */
    --gd-amber-500: #eab308;
    --gd-amber-600: #ca8a04;
    --gd-amber-700: #a16207;  /* ★ نسخه‌ی متنی، AA روی سفید */
    --gd-amber-800: #854d0e;
    --gd-amber-900: #713f12;

    /* خاکستری خنثی (Neutral) */
    --gd-gray-0:   #ffffff;
    --gd-gray-50:  #f8fafc;
    --gd-gray-100: #f1f5f9;
    --gd-gray-200: #e2e8f0;
    --gd-gray-300: #cbd5e1;
    --gd-gray-400: #94a3b8;
    --gd-gray-500: #64748b;
    --gd-gray-600: #475569;
    --gd-gray-700: #334155;
    --gd-gray-800: #1e293b;
    --gd-gray-900: #0f172a;

    /* رنگ‌های وضعیت (State colors) */
    --gd-green-50:  #f0fdf4;
    --gd-green-500: #22c55e;
    --gd-green-600: #16a34a;
    --gd-green-700: #15803d;

    --gd-red-50:    #fef2f2;
    --gd-red-500:   #ef4444;
    --gd-red-600:   #dc2626;
    --gd-red-700:   #b91c1c;

    --gd-orange-50: #fff7ed;
    --gd-orange-500: #f97316;
    --gd-orange-600: #ea580c;
    --gd-orange-700: #c2410c;
}

/* ============================================================
   ۲. رنگ — توکن‌های معنایی (Semantic tokens)
   در کامپوننت‌ها فقط این‌ها را صدا بزن.
   قاعده‌ی ثابت: هر رنگِ پس‌زمینه یک جفت --gd-on-* دارد که
   رنگ متنِ روی آن است. هیچ‌وقت خودت حدس نزن.
   ============================================================ */
:root {
    color-scheme: light;

    /* برند */
    --gd-primary:        var(--gd-blue-600);
    --gd-primary-hover:  var(--gd-blue-700);
    --gd-primary-active: var(--gd-blue-800);
    --gd-primary-soft:   var(--gd-blue-50);    /* پس‌زمینه‌ی ملایم */
    --gd-primary-border: var(--gd-blue-200);
    --gd-on-primary:     #ffffff;              /* کنتراست ۵.۲۲:۱ ✓ AA */

    /* لهجه (Accent) — زرد/نارنجی برند */
    --gd-accent:         var(--gd-amber-400);  /* فقط سطح، نه متن */
    --gd-accent-hover:   var(--gd-amber-500);
    --gd-accent-active:  var(--gd-amber-600);
    --gd-accent-soft:    var(--gd-amber-50);
    --gd-accent-border:  var(--gd-amber-200);
    --gd-on-accent:      var(--gd-gray-900);   /* کنتراست ۹.۵:۱ ✓ AAA */
    --gd-accent-text:    var(--gd-amber-700);  /* ⚠ برای متن روی سفید، ۴.۹۷:۱ ✓ AA */

    /* متن — با مشخصات برند روی Claude Design یکی شد (۲۰۲۶-۰۸-۱۱).
       سه پله بیشتر نیست: اصلی / فرعی / کم‌رنگ. تأکید از وزن می‌آید نه از رنگ،
       پس --gd-ink-strong عمداً همان --gd-ink است و فقط برای خوانایی کد مانده. */
    --gd-ink:            var(--gd-gray-900);   /* متن اصلی — ۱۷.۴:۱ ✓ AAA */
    --gd-ink-strong:     var(--gd-gray-900);   /* عنوان — همان رنگ، وزن متفاوت */
    --gd-muted:          var(--gd-gray-600);   /* متن فرعی — ۷.۵:۱ ✓ AAA */
    --gd-ink-disabled:   var(--gd-gray-400);   /* کم‌رنگ — فقط متن غیرفعال */
    --gd-ink-inverse:    #ffffff;

    /* سطح‌ها (Surfaces) */
    --gd-bg:             var(--gd-gray-0);     /* بوم صفحه */
    --gd-surface:        var(--gd-gray-0);     /* کارت */
    --gd-surface-soft:   var(--gd-gray-50);    /* بخش متمایز */
    --gd-surface-sunken: var(--gd-gray-100);   /* فرورفته، مثل input غیرفعال */
    --gd-surface-hover:  var(--gd-gray-50);

    /* خط و مرز */
    --gd-line:           var(--gd-gray-200);   /* مرز پیش‌فرض */
    --gd-line-strong:    var(--gd-gray-300);   /* مرز فرم */
    --gd-line-subtle:    var(--gd-gray-100);   /* جداکننده‌ی داخلی */

    /* وضعیت‌ها */
    --gd-success:        var(--gd-green-600);
    --gd-success-soft:   var(--gd-green-50);
    --gd-on-success:     #ffffff;

    --gd-danger:         var(--gd-red-600);
    --gd-danger-hover:   var(--gd-red-700);
    --gd-danger-soft:    var(--gd-red-50);
    --gd-on-danger:      #ffffff;

    --gd-warning:        var(--gd-orange-600);
    --gd-warning-soft:   var(--gd-orange-50);
    --gd-on-warning:     #ffffff;

    --gd-info:           var(--gd-blue-600);
    --gd-info-soft:      var(--gd-blue-50);
    --gd-on-info:        #ffffff;

    /* نقش‌های فروشگاهی (Commerce) */
    --gd-price:          var(--gd-ink-strong);
    --gd-price-old:      var(--gd-muted);
    --gd-discount-bg:    var(--gd-red-600);
    --gd-discount-fg:    #ffffff;
    --gd-instock:        var(--gd-green-600);
    --gd-outofstock:     var(--gd-gray-400);
}

/* ============================================================
   ۳. تایپوگرافی (Typography)
   فونت: کلمه (Kalameh) با فالبک وزیرمتن (Vazirmatn).
   ⚠ فونت باید هم‌مبدأ باشد — سرور nginx است و هدر CORS نمی‌دهد،
     پس @font-face از erp.ganjdanesh.com بلاک می‌شود.
     فایل‌ها باید در ganjdanesh.com/public_html/assets/fonts/ باشند.
   ============================================================ */
/* کلمه (Kalameh) — فقط اگر روی خود دستگاه نصب باشد.
   ⚠ روی ERP هم @font-face کلمه به‌صورت src: local(...) نوشته شده، یعنی هیچ فایل
   وب‌فونتی وجود ندارد. برای بازدیدکننده‌ای که کلمه نصب ندارد (یعنی تقریباً همه)
   این خط بی‌اثر است و مرورگر می‌رود سراغ فونت بعدی. */
@font-face {
    font-family: "Kalameh";
    src: local("Kalameh"), local("KalamehWeb"), local("Kalameh Regular");
    font-display: swap;
}

/* وزیرمتن (Vazirmatn) — فونت واقعیِ سرو‌شده. چهار وزن، و اینجا تنها جای
   تعریفشان است: هر صفحه‌ای که gd-tokens.css را لود کند فونت را دارد.
   ⚠ وزن ۸۰۰ لازم است — دیزاین سیستم برای نشان برند و قیمت درشت از آن استفاده
   می‌کند و بدونش مرورگر ۷۰۰ را مصنوعی چاق می‌کند (faux bold).
   ⚠ هم‌مبدأ اجباری: سرور nginx است و هدر CORS نمی‌دهد، پس @font-face از
   erp.ganjdanesh.com بلاک می‌شود. فایل‌ها با این دستور کپی شده‌اند:
       python tools/erp.py --host site sync Design_System/assets/fonts assets/fonts --apply */
@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

/* وزیر قدیمی که از قبل در ریشه‌ی سایت هست — تور نجات تا وزیرمتن آپلود شود */
@font-face {
    font-family: "Vazir";
    src: url("/Vazir.woff") format("woff");
    font-display: swap;
}

:root {
    --gd-font: "Kalameh", "Vazirmatn", "Vazir", system-ui, "Segoe UI", sans-serif;
    --gd-font-num: "Kalameh", "Vazirmatn", "Vazir", system-ui, sans-serif;

    /* وزن‌ها — فقط همین سه‌تا. وزن دلخواه ممنوع. */
    --gd-fw-regular: 400;
    --gd-fw-medium:  500;
    --gd-fw-bold:    700;

    /* اندازه‌ها — سیال (Fluid) با clamp()
       مقدار وسط بر حسب vw است، پس بین موبایل و دسکتاپ نرم تغییر می‌کند
       و لازم نیست در هر بریک‌پوینت دستی بازنویسی شود. */
    --gd-text-2xs: 0.6875rem;                             /* 11px — ثابت */
    --gd-text-xs:  0.75rem;                               /* 12px — ثابت */
    --gd-text-sm:  0.8125rem;                             /* 13px — ثابت */
    --gd-text-md:  clamp(0.875rem, 0.83rem + 0.20vw, 1rem);        /* 14 → 16 */
    --gd-text-lg:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);    /* 16 → 18 */
    --gd-text-xl:  clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);    /* 18 → 22 */
    --gd-text-2xl: clamp(1.375rem, 1.24rem + 0.60vw, 1.75rem);     /* 22 → 28 */
    --gd-text-3xl: clamp(1.625rem, 1.40rem + 1.00vw, 2.25rem);     /* 26 → 36 */
    --gd-text-4xl: clamp(2rem,     1.60rem + 1.75vw, 3rem);        /* 32 → 48 */

    /* ارتفاع خط — فارسی به فضای بیشتری از لاتین نیاز دارد */
    --gd-lh-tight:   1.35;   /* عنوان بزرگ */
    --gd-lh-snug:    1.55;   /* عنوان کوچک، دکمه */
    --gd-lh-normal:  1.75;   /* متن جاری */
    --gd-lh-relaxed: 2;      /* پاراگراف بلند */

    --gd-tracking: 0;        /* فارسی letter-spacing نمی‌خواهد — صفر بماند */
}

/* ============================================================
   ۴. فاصله‌گذاری (Spacing) — مقیاس ۴ پیکسلی
   فقط از این پله‌ها استفاده کن. عدد وسط‌راه مثل 13px ممنوع.
   ============================================================ */
:root {
    --gd-space-0:  0;
    --gd-space-1:  0.25rem;   /*  4px */
    --gd-space-2:  0.5rem;    /*  8px */
    --gd-space-3:  0.75rem;   /* 12px */
    --gd-space-4:  1rem;      /* 16px */
    --gd-space-5:  1.25rem;   /* 20px */
    --gd-space-6:  1.5rem;    /* 24px */
    --gd-space-8:  2rem;      /* 32px */
    --gd-space-10: 2.5rem;    /* 40px */
    --gd-space-12: 3rem;      /* 48px */
    --gd-space-16: 4rem;      /* 64px */
    --gd-space-20: 5rem;      /* 80px */
    --gd-space-24: 6rem;      /* 96px */

    /* فاصله‌ی عمودی بین بخش‌های صفحه — سیال */
    --gd-section-y: clamp(2rem, 1.4rem + 3vw, 4.5rem);
}

/* ============================================================
   ۵. شعاع، سایه، لایه، حرکت
   ============================================================ */
:root {
    --gd-radius-sm:   6px;
    --gd-radius:      12px;   /* پیش‌فرض */
    --gd-radius-lg:   16px;
    --gd-radius-xl:   24px;
    --gd-radius-full: 999px;

    /* ارتفاع (Elevation) — پنج پله، بیشتر نه */
    --gd-shadow-0: none;
    --gd-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --gd-shadow-2: 0 1px 3px rgba(15, 23, 42, .07), 0 6px 16px rgba(15, 23, 42, .05);
    --gd-shadow-3: 0 2px 6px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .07);
    --gd-shadow-4: 0 8px 20px rgba(15, 23, 42, .10), 0 24px 60px rgba(15, 23, 42, .12);

    /* حلقه‌ی فوکوس (Focus ring) — یکسان در کل سیستم، هرگز outline:none تنها */
    --gd-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);   /* آلفا با Claude Design یکی شد */
    --gd-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, .28);

    /* لایه‌بندی (z-index) — عدد خام در کامپوننت ننویس */
    --gd-z-base:     1;
    --gd-z-sticky:   40;   /* هدر چسبان */
    --gd-z-dropdown: 60;   /* مگامنو، منوی کشویی */
    --gd-z-overlay:  80;   /* پرده‌ی تیره */
    --gd-z-drawer:   90;
    --gd-z-modal:    100;
    --gd-z-toast:    120;

    /* حرکت (Motion) */
    --gd-dur-fast:   .12s;
    --gd-dur-base:   .2s;
    --gd-dur-slow:   .32s;
    --gd-ease:       cubic-bezier(.4, 0, .2, 1);
    --gd-ease-out:   cubic-bezier(0, 0, .2, 1);
}

/* ============================================================
   ۶. بریک‌پوینت‌ها و کانتینر (Breakpoints & container)
   ------------------------------------------------------------
   ⚠ نکته‌ی فنی: متغیر CSS داخل @media کار نمی‌کند. پس عددها در
   media query دستی نوشته می‌شوند و این جدول «سند مرجع» است.
   همیشه Mobile-first: حالت پایه موبایل است و @media فقط min-width.

   ⚠⚠ دو دستگاهِ عدد وجود دارد و قاطی کردنشان همان چیزی است که یک بار
   جعبه‌ی خرید صفحه‌ی محصول را انداخت زیر کالا:

       «مجازی» = عددی که طراح روی صفحه‌ی زوم‌شده می‌بیند (جدول دیزاین سیستم)
       «واقعی» = عددی که باید داخل @media نوشته شود

   زیر ۱۰۲۴ واقعی زوم نیست، پس واقعی = مجازی.
   از ۱۰۲۴ واقعی به بالا `zoom: 0.8` فعال است و واقعی = مجازی × ۰٫۸.

       نام    مجازی   واقعی (در @media)   دستگاه هدف
       ----   -----   -----------------   -------------------------------
       (پایه) 0       0                   ★ موبایل — گوشی عمودی ۳۲۰ تا ۶۳۹
       sm     640     640                 گوشی بزرگ / افقی
       md     768     768                 ★ تبلت (iPad ۷۶۸، اندروید ۸۰۰)
       xl     1280    1024                ★ لپ‌تاپ ۱۳ و ۱۴ اینچ
       2xl    1600    1280                ★ نمایشگر بزرگ (۱۹۲۰+)

   ★ چهار دسته‌ی خواسته‌شده = پایه، md، xl، 2xl. (sm فقط پله‌ی کمکی است.)

   ⚠ پله‌ی lg (۱۰۲۴ مجازی) عمداً حذف شد. معادل واقعی‌اش ۸۱۹ است که زیر شروع
     باند زوم می‌افتد، یعنی هیچ‌وقت فعال نمی‌شود: به محض رد شدن از ۱۰۲۴ واقعی
     مستقیم وارد پله‌ی xl می‌شوی. کانتینر ۹۶۰ که قبلاً برای lg بود مرده بود و
     تنها کاری که می‌کرد این بود که آدم عدد اشتباه بنویسد.

   ⚠ تله‌ی ۱۳ اینچ: نمایشگر ۱۲۸۰ منهای نوار اسکرول ≈ ۱۲۶۵ پیکسل.
     کانتینر ۱۳۲۰ پیکسلی صفحه‌ی فعلی آنجا اسکرول افقی می‌سازد.
     به همین دلیل کانتینر در xl روی ۱۲۰۰ بسته می‌شود.

   نگهبان: `python tools/css_zoom_lint.py` هر عددی جز ۱۰۲۴ و ۱۲۸۰ را داخل
   باند زوم قرمز می‌کند.
   ============================================================ */
:root {
    /* مجازی — فقط سند مرجع. متغیر CSS داخل @media کار نمی‌کند. */
    --gd-bp-sm:  640px;
    --gd-bp-md:  768px;
    --gd-bp-xl:  1280px;
    --gd-bp-2xl: 1600px;

    /* واقعی — همان عددی که پایین در @media نوشته شده */
    --gd-bp-xl-real:  1024px;
    --gd-bp-2xl-real: 1280px;

    --gd-container:   100%;
    /* کانتینر پهن — هدر عمداً از کانتینر معمولی پهن‌تر است */
    --gd-container-wide: 1560px;
    --gd-gutter:      var(--gd-space-4);   /* 16px */
    --gd-grid-gap:    var(--gd-space-4);
}

@media (min-width: 640px) {
    :root { --gd-container: 600px; }
}
@media (min-width: 768px) {
    :root {
        --gd-container: 720px;
        --gd-gutter:    var(--gd-space-5);   /* 20px */
        --gd-grid-gap:  var(--gd-space-5);
    }
}
/* ↓↓ از اینجا باند زوم شروع می‌شود. عددها «واقعی»اند، نه مجازی. ↓↓ */

/* پله‌ی xl طراحی (۱۲۸۰ مجازی) — لپ‌تاپ ۱۳ و ۱۴ اینچ */
@media (min-width: 1024px) {
    :root {
        --gd-container: 1200px;
        --gd-gutter:    var(--gd-space-6);   /* 24px */
        --gd-grid-gap:  var(--gd-space-6);
    }
}
/* پله‌ی 2xl طراحی (۱۶۰۰ مجازی) — نمایشگر بزرگ */
@media (min-width: 1280px) {
    :root { --gd-container: 1440px; }
}

/* ============================================================
   ۶.۱ مقیاس پایه‌ی دسکتاپ — «زوم ۸۰٪» به‌عنوان پیش‌فرض طراحی
   ------------------------------------------------------------
   کاربر صفحه را روی زوم ۸۰٪ می‌پسندد و همان باید پیش‌فرض باشد.

   ⚠ چرا `zoom` و نه `html { font-size: 80% }` — هر دو در مرورگر تست شد:
     ۱ کوچک کردن ریشه فقط چیزهای rem را کوچک می‌کند. هدر ۶۰px، سرچ ۷۰۰px،
       گالری ۴۰۰px، بندانگشتی ۶۴px و ده‌ها اندازه‌ی px دیگر سر جایشان
       می‌ماندند و نتیجه یک مقیاسِ نصفه‌نیمه بود، نه زوم.
     ۲ مرورگرها «کف اندازه‌ی فونت» دارند؛ روی همین سایت حتی
       `html{font-size:12.8px !important}` هم خروجی ۱۶px داد.
     `zoom` هیچ‌کدام از این دو مشکل را ندارد: px و rem و تصویر و حاشیه
     را یکنواخت ۸۰٪ می‌کند — یعنی دقیقاً همان کاری که زوم مرورگر می‌کند.

   موبایل و تبلت (زیر ۱۰۲۴) عمداً روی ۱۰۰٪ می‌مانند؛ متن ریز روی گوشی
   خواندنی نیست. فایرفاکس قدیمی‌تر از ۱۲۶ این را نادیده می‌گیرد و همان
   نمای ۱۰۰٪ فعلی را می‌بیند — افت نرم، نه شکستن.

   پله‌های کانتینر بالا در بخش ۶ نوشته شده‌اند و همان‌جا «واقعی»اند.
   قبلاً اینجا یک لایه‌ی دوم بود که همان‌ها را دوباره تعریف می‌کرد؛ نتیجه دو
   دسته عددِ رقیب بود (۱۰۲۴→۹۶۰ در یک بخش و ۱۰۲۴→۱۲۰۰ در بخش دیگر) که
   دومی برنده می‌شد و اولی فقط آدم را گمراه می‌کرد. حالا فقط یک جا تعریف
   می‌شوند. (در مرورگر روی ۱۲۸۰ و ۱۹۲۰ اندازه‌گیری و تأیید شد.)
   ============================================================ */
@media (min-width: 1024px) {
    :root { zoom: 0.8; }
}

/* ============================================================
   ۷. تم تیره (Dark theme) — اختیاری
   با گذاشتن data-theme="dark" روی <html> فعال می‌شود.
   فقط توکن‌های معنایی عوض می‌شوند؛ هیچ کامپوننتی نیاز به
   بازنویسی ندارد. عمداً به prefers-color-scheme وصل نشده تا
   سایت به‌طور ناخواسته تیره نشود.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --gd-primary:        var(--gd-blue-500);
    --gd-primary-hover:  var(--gd-blue-400);
    --gd-primary-active: var(--gd-blue-300);
    --gd-primary-soft:   rgba(59, 130, 246, .14);
    --gd-primary-border: rgba(59, 130, 246, .35);
    --gd-on-primary:     #0b1220;

    --gd-accent:         var(--gd-amber-400);
    --gd-accent-hover:   var(--gd-amber-300);
    --gd-accent-soft:    rgba(250, 204, 21, .12);
    --gd-accent-border:  rgba(250, 204, 21, .30);
    --gd-on-accent:      #1a1500;
    --gd-accent-text:    var(--gd-amber-300);

    --gd-ink:            var(--gd-gray-200);
    --gd-ink-strong:     #f8fafc;
    --gd-muted:          var(--gd-gray-400);
    --gd-ink-disabled:   var(--gd-gray-600);
    --gd-ink-inverse:    var(--gd-gray-900);

    --gd-bg:             #0b1220;
    --gd-surface:        #111a2b;
    --gd-surface-soft:   #162034;
    --gd-surface-sunken: #0e1626;
    --gd-surface-hover:  #1b2740;

    --gd-line:           #24314a;
    --gd-line-strong:    #33425f;
    --gd-line-subtle:    #1a2438;

    --gd-price:          #f8fafc;
    --gd-price-old:      var(--gd-gray-500);

    --gd-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --gd-shadow-2: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .4);
    --gd-shadow-3: 0 2px 6px rgba(0, 0, 0, .55), 0 12px 32px rgba(0, 0, 0, .45);
    --gd-shadow-4: 0 8px 20px rgba(0, 0, 0, .6), 0 24px 60px rgba(0, 0, 0, .55);

    --gd-focus-ring: 0 0 0 3px rgba(96, 165, 250, .45);
}

/* ============================================================
   ۸. احترام به تنظیمات کاربر (Reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --gd-dur-fast: .01ms;
        --gd-dur-base: .01ms;
        --gd-dur-slow: .01ms;
    }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}