/* HarmoniQ design tokens. Generated from tokens/ by scripts/build-tokens.mjs. Do not edit. */
:root, [data-theme="light"] {
  --hq-white: #ffffff; /** سفید. */
  --hq-black: #000000; /** سیاه خالص؛ فقط برای چاپ و سند تک‌رنگ، مثل نسخهٔ سیاه لوگو و آیکن‌ها. */
  --hq-cyan-10: #e5f6ff; /** خانوادهٔ اصلی (برند). IBM Cyan 10. */
  --hq-cyan-20: #bae6ff; /** خانوادهٔ اصلی (برند). IBM Cyan 20. */
  --hq-cyan-30: #82cfff; /** خانوادهٔ اصلی (برند). IBM Cyan 30. */
  --hq-cyan-40: #33b1ff; /** خانوادهٔ اصلی (برند). IBM Cyan 40. */
  --hq-cyan-50: #1192e8; /** خانوادهٔ اصلی (برند). IBM Cyan 50. */
  --hq-cyan-60: #0072c3; /** خانوادهٔ اصلی (برند). IBM Cyan 60. */
  --hq-cyan-70: #00539a; /** خانوادهٔ اصلی (برند). IBM Cyan 70. */
  --hq-cyan-80: #003a6d; /** خانوادهٔ اصلی (برند). IBM Cyan 80. */
  --hq-cyan-90: #012749; /** خانوادهٔ اصلی (برند). IBM Cyan 90. */
  --hq-cyan-100: #061727; /** خانوادهٔ اصلی (برند). IBM Cyan 100. */
  --hq-blue-10: #edf5ff; /** خانوادهٔ تاکید. IBM Blue 10. */
  --hq-blue-20: #d0e2ff; /** خانوادهٔ تاکید. IBM Blue 20. */
  --hq-blue-30: #a6c8ff; /** خانوادهٔ تاکید. IBM Blue 30. */
  --hq-blue-40: #78a9ff; /** خانوادهٔ تاکید. IBM Blue 40. */
  --hq-blue-50: #4589ff; /** خانوادهٔ تاکید. IBM Blue 50. */
  --hq-blue-60: #0f62fe; /** خانوادهٔ تاکید. IBM Blue 60. */
  --hq-blue-70: #0043ce; /** خانوادهٔ تاکید. IBM Blue 70. */
  --hq-blue-80: #002d9c; /** خانوادهٔ تاکید. IBM Blue 80. */
  --hq-blue-90: #001d6c; /** خانوادهٔ تاکید. IBM Blue 90. */
  --hq-blue-100: #001141; /** خانوادهٔ تاکید. IBM Blue 100. */
  --hq-gray-10: #f2f4f8; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 10. */
  --hq-gray-20: #dde1e6; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 20. */
  --hq-gray-30: #c1c7cd; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 30. */
  --hq-gray-40: #a2a9b0; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 40. */
  --hq-gray-50: #878d96; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 50. */
  --hq-gray-60: #697077; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 60. */
  --hq-gray-70: #4d5358; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 70. */
  --hq-gray-80: #343a3f; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 80. */
  --hq-gray-90: #21272a; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 90. */
  --hq-gray-100: #121619; /** خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 100. */
  --hq-red-10: #fff1f1; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 10. */
  --hq-red-20: #ffd7d9; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 20. */
  --hq-red-30: #ffb3b8; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 30. */
  --hq-red-40: #ff8389; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 40. */
  --hq-red-50: #fa4d56; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 50. */
  --hq-red-60: #da1e28; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 60. */
  --hq-red-70: #a2191f; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 70. */
  --hq-red-80: #750e13; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 80. */
  --hq-red-90: #520408; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 90. */
  --hq-red-100: #2d0709; /** کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 100. */
  --hq-teal-10: #d9fbfb; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 10. */
  --hq-teal-20: #9ef0f0; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 20. */
  --hq-teal-30: #3ddbd9; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 30. */
  --hq-teal-40: #08bdba; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 40. */
  --hq-teal-50: #009d9a; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 50. */
  --hq-teal-60: #007d79; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 60. */
  --hq-teal-70: #005d5d; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 70. */
  --hq-teal-80: #004144; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 80. */
  --hq-teal-90: #022b30; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 90. */
  --hq-teal-100: #081a1c; /** کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 100. */
  --hq-yellow-10: #fcf4d6; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 10. */
  --hq-yellow-20: #fddc69; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 20. */
  --hq-yellow-30: #f1c21b; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 30. */
  --hq-yellow-40: #d2a106; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 40. */
  --hq-yellow-50: #b28600; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 50. */
  --hq-yellow-60: #8e6a00; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 60. */
  --hq-yellow-70: #684e00; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 70. */
  --hq-yellow-80: #483700; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 80. */
  --hq-yellow-90: #302400; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 90. */
  --hq-yellow-100: #1c1500; /** کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 100. */
  --hq-purple-10: #f6f2ff; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 10. */
  --hq-purple-20: #e8daff; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 20. */
  --hq-purple-30: #d4bbff; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 30. */
  --hq-purple-40: #be95ff; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 40. */
  --hq-purple-50: #a56eff; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 50. */
  --hq-purple-60: #8a3ffc; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 60. */
  --hq-purple-70: #6929c4; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 70. */
  --hq-purple-80: #491d8b; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 80. */
  --hq-purple-90: #31135e; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 90. */
  --hq-purple-100: #1c0f30; /** کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 100. */
  --hq-space-1: 8px; /** آیکن تا برچسب، گلوله تا متن. */
  --hq-space-2: 16px; /** عنوان تا متن داخل کارت. */
  --hq-space-3: 24px; /** بین آیتم‌های فهرست و پاراگراف‌ها. */
  --hq-space-4: 32px; /** فاصلهٔ داخلی کارت. */
  --hq-space-6: 48px; /** فاصلهٔ ستون‌ها و بین کارت‌ها. */
  --hq-space-8: 64px; /** ناحیهٔ عنوان تا محتوا. */
  --hq-space-12: 96px; /** حاشیهٔ چپ و راست اسلاید. */
  --hq-radius-sm: 8px; /** کاشی‌های کوچک، کادر برجسته در جدول، تصویرهای کوچک. */
  --hq-radius-md: 16px; /** کارت‌ها و تصویرهای قاب‌دار. */
  --hq-radius-pill: 999px; /** برچسب‌ها (pill). */
  --hq-grid-slide-columns: 12; /** تعداد ستون‌ها در هر اسلاید. */
  --hq-grid-slide-column: 100px; /** پهنای هر ستون. */
  --hq-grid-slide-gutter: 48px; /** فاصلهٔ بین ستون‌ها. */
  --hq-grid-slide-margin: 96px; /** حاشیهٔ چپ و راست؛ ناحیهٔ محتوا ۱۷۲۸ پیکسل. */
  --hq-grid-slide-content-top: 264px; /** شروع محتوا زیر ناحیهٔ عنوان. */
  --hq-grid-web-sm-breakpoint: 0px; /** موبایل: از صفر. */
  --hq-grid-web-sm-columns: 4; /** ۴ ستون. */
  --hq-grid-web-md-breakpoint: 672px; /** تبلت: از ۶۷۲ پیکسل. */
  --hq-grid-web-md-columns: 8; /** ۸ ستون. */
  --hq-grid-web-lg-breakpoint: 1056px; /** دسکتاپ: از ۱۰۵۶ پیکسل. */
  --hq-grid-web-lg-columns: 12; /** ۱۲ ستون، هم‌خوان با گرید اسلاید. */
  --hq-grid-web-xl-breakpoint: 1312px; /** دسکتاپ بزرگ: از ۱۳۱۲ پیکسل. */
  --hq-grid-web-xl-columns: 12; /** ۱۲ ستون. */
  --hq-grid-web-max-width: 1584px; /** بیشینهٔ پهنای ظرف صفحه، با حاشیه‌ها. بالاتر از این، محتوا وسط صفحه می‌ماند. */
  --hq-size-control-sm: 32px; /** کنترل کوچک، برای جدول‌ها و نوارابزارها. */
  --hq-size-control-md: 40px; /** کنترل متوسط، برای فرم‌های فشرده. */
  --hq-size-control-lg: 48px; /** کنترل پیش‌فرض. */
  --hq-font-fa: Ravi, Vazirmatn, Tahoma, sans-serif; /** فارسی: راوی، با جایگزین‌های وزیرمتن و Tahoma. */
  --hq-font-serif: 'IBM Plex Serif', Georgia, serif; /** عنوان‌های انگلیسی و حروف لوگو. */
  --hq-font-sans: 'IBM Plex Sans', Arial, sans-serif; /** متن انگلیسی و اجزای لاتین در متن فارسی. */
  --hq-font-mono: 'IBM Plex Mono', Ravi, Menlo, monospace; /** کد و داده‌های جدولی. متن فارسی درون کد با راوی. */
  --hq-type-display-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** تیتر اصلی صفحه‌های معرفی (hero). در موبایل ۴۰ پیکسل. */
  --hq-type-display-font-size: 56px; /** تیتر اصلی صفحه‌های معرفی (hero). در موبایل ۴۰ پیکسل. */
  --hq-type-display-font-weight: 700; /** تیتر اصلی صفحه‌های معرفی (hero). در موبایل ۴۰ پیکسل. */
  --hq-type-display-line-height: 1.2; /** تیتر اصلی صفحه‌های معرفی (hero). در موبایل ۴۰ پیکسل. */
  --hq-type-h1-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان صفحه. در موبایل ۳۲ پیکسل. */
  --hq-type-h1-font-size: 40px; /** عنوان صفحه. در موبایل ۳۲ پیکسل. */
  --hq-type-h1-font-weight: 700; /** عنوان صفحه. در موبایل ۳۲ پیکسل. */
  --hq-type-h1-line-height: 1.25; /** عنوان صفحه. در موبایل ۳۲ پیکسل. */
  --hq-type-h2-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان بخش. در موبایل ۲۶ پیکسل. */
  --hq-type-h2-font-size: 32px; /** عنوان بخش. در موبایل ۲۶ پیکسل. */
  --hq-type-h2-font-weight: 700; /** عنوان بخش. در موبایل ۲۶ پیکسل. */
  --hq-type-h2-line-height: 1.3; /** عنوان بخش. در موبایل ۲۶ پیکسل. */
  --hq-type-h3-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** زیرعنوان و عنوان کارت. در موبایل ۲۰ پیکسل. */
  --hq-type-h3-font-size: 24px; /** زیرعنوان و عنوان کارت. در موبایل ۲۰ پیکسل. */
  --hq-type-h3-font-weight: 600; /** زیرعنوان و عنوان کارت. در موبایل ۲۰ پیکسل. */
  --hq-type-h3-line-height: 1.4; /** زیرعنوان و عنوان کارت. در موبایل ۲۰ پیکسل. */
  --hq-type-lead-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** پاراگراف آغازین. در موبایل ۱۸ پیکسل. */
  --hq-type-lead-font-size: 20px; /** پاراگراف آغازین. در موبایل ۱۸ پیکسل. */
  --hq-type-lead-font-weight: 400; /** پاراگراف آغازین. در موبایل ۱۸ پیکسل. */
  --hq-type-lead-line-height: 1.7; /** پاراگراف آغازین. در موبایل ۱۸ پیکسل. */
  --hq-type-body-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** متن اصلی؛ هرگز کمتر از ۱۶ پیکسل، برای مقاله‌های بلند ۱۸ پیکسل. */
  --hq-type-body-font-size: 16px; /** متن اصلی؛ هرگز کمتر از ۱۶ پیکسل، برای مقاله‌های بلند ۱۸ پیکسل. */
  --hq-type-body-font-weight: 400; /** متن اصلی؛ هرگز کمتر از ۱۶ پیکسل، برای مقاله‌های بلند ۱۸ پیکسل. */
  --hq-type-body-line-height: 1.8; /** متن اصلی؛ هرگز کمتر از ۱۶ پیکسل، برای مقاله‌های بلند ۱۸ پیکسل. */
  --hq-type-body-compact-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** رابط کاربری فشرده، جدول و فهرست. */
  --hq-type-body-compact-font-size: 14px; /** رابط کاربری فشرده، جدول و فهرست. */
  --hq-type-body-compact-font-weight: 400; /** رابط کاربری فشرده، جدول و فهرست. */
  --hq-type-body-compact-line-height: 1.7; /** رابط کاربری فشرده، جدول و فهرست. */
  --hq-type-caption-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** زیرنویس، برچسب و منبع. */
  --hq-type-caption-font-size: 12px; /** زیرنویس، برچسب و منبع. */
  --hq-type-caption-font-weight: 500; /** زیرنویس، برچسب و منبع. */
  --hq-type-caption-line-height: 1.6; /** زیرنویس، برچسب و منبع. */
  --hq-type-slide-display-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان جلد و بخش. پاورپوینت ۵۰pt. */
  --hq-type-slide-display-font-size: 100px; /** عنوان جلد و بخش. پاورپوینت ۵۰pt. */
  --hq-type-slide-display-font-weight: 700; /** عنوان جلد و بخش. پاورپوینت ۵۰pt. */
  --hq-type-slide-display-line-height: 120px; /** عنوان جلد و بخش. پاورپوینت ۵۰pt. */
  --hq-type-slide-stat-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عددهای کلیدی با راوی Black. پاورپوینت ۴۳pt. */
  --hq-type-slide-stat-font-size: 86px; /** عددهای کلیدی با راوی Black. پاورپوینت ۴۳pt. */
  --hq-type-slide-stat-font-weight: 900; /** عددهای کلیدی با راوی Black. پاورپوینت ۴۳pt. */
  --hq-type-slide-stat-line-height: 92px; /** عددهای کلیدی با راوی Black. پاورپوینت ۴۳pt. */
  --hq-type-slide-title-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان اسلاید، بالا راست. پاورپوینت ۳۳pt. */
  --hq-type-slide-title-font-size: 66px; /** عنوان اسلاید، بالا راست. پاورپوینت ۳۳pt. */
  --hq-type-slide-title-font-weight: 700; /** عنوان اسلاید، بالا راست. پاورپوینت ۳۳pt. */
  --hq-type-slide-title-line-height: 82px; /** عنوان اسلاید، بالا راست. پاورپوینت ۳۳pt. */
  --hq-type-slide-heading-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان کارت و ستون. پاورپوینت ۱۶pt. */
  --hq-type-slide-heading-font-size: 32px; /** عنوان کارت و ستون. پاورپوینت ۱۶pt. */
  --hq-type-slide-heading-font-weight: 700; /** عنوان کارت و ستون. پاورپوینت ۱۶pt. */
  --hq-type-slide-heading-line-height: 44px; /** عنوان کارت و ستون. پاورپوینت ۱۶pt. */
  --hq-type-slide-lead-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** جملهٔ آغازین. پاورپوینت ۱۶pt. */
  --hq-type-slide-lead-font-size: 32px; /** جملهٔ آغازین. پاورپوینت ۱۶pt. */
  --hq-type-slide-lead-font-weight: 400; /** جملهٔ آغازین. پاورپوینت ۱۶pt. */
  --hq-type-slide-lead-line-height: 52px; /** جملهٔ آغازین. پاورپوینت ۱۶pt. */
  --hq-type-slide-body-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** متن اصلی اسلاید. پاورپوینت ۱۲pt. */
  --hq-type-slide-body-font-size: 24px; /** متن اصلی اسلاید. پاورپوینت ۱۲pt. */
  --hq-type-slide-body-font-weight: 400; /** متن اصلی اسلاید. پاورپوینت ۱۲pt. */
  --hq-type-slide-body-line-height: 40px; /** متن اصلی اسلاید. پاورپوینت ۱۲pt. */
  --hq-type-slide-small-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** توضیح و خانهٔ جدول. پاورپوینت ۱۰pt. */
  --hq-type-slide-small-font-size: 20px; /** توضیح و خانهٔ جدول. پاورپوینت ۱۰pt. */
  --hq-type-slide-small-font-weight: 400; /** توضیح و خانهٔ جدول. پاورپوینت ۱۰pt. */
  --hq-type-slide-small-line-height: 34px; /** توضیح و خانهٔ جدول. پاورپوینت ۱۰pt. */
  --hq-type-slide-caption-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** منبع، پانویس و برچسب. پاورپوینت ۸pt. */
  --hq-type-slide-caption-font-size: 16px; /** منبع، پانویس و برچسب. پاورپوینت ۸pt. */
  --hq-type-slide-caption-font-weight: 400; /** منبع، پانویس و برچسب. پاورپوینت ۸pt. */
  --hq-type-slide-caption-line-height: 26px; /** منبع، پانویس و برچسب. پاورپوینت ۸pt. */
  --hq-type-doc-title-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان سند. لاتین: IBM Plex Serif 25pt. */
  --hq-type-doc-title-font-size: 28px; /** عنوان سند. لاتین: IBM Plex Serif 25pt. */
  --hq-type-doc-title-font-weight: 700; /** عنوان سند. لاتین: IBM Plex Serif 25pt. */
  --hq-type-doc-title-line-height: 1.3; /** عنوان سند. لاتین: IBM Plex Serif 25pt. */
  --hq-type-doc-h1-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان سطح ۱. لاتین: Plex Serif 16pt. */
  --hq-type-doc-h1-font-size: 18px; /** عنوان سطح ۱. لاتین: Plex Serif 16pt. */
  --hq-type-doc-h1-font-weight: 700; /** عنوان سطح ۱. لاتین: Plex Serif 16pt. */
  --hq-type-doc-h1-line-height: 1.4; /** عنوان سطح ۱. لاتین: Plex Serif 16pt. */
  --hq-type-doc-h2-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان سطح ۲. لاتین: Plex Sans 12.5pt. */
  --hq-type-doc-h2-font-size: 14px; /** عنوان سطح ۲. لاتین: Plex Sans 12.5pt. */
  --hq-type-doc-h2-font-weight: 700; /** عنوان سطح ۲. لاتین: Plex Sans 12.5pt. */
  --hq-type-doc-h2-line-height: 1.5; /** عنوان سطح ۲. لاتین: Plex Sans 12.5pt. */
  --hq-type-doc-h3-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** عنوان سطح ۳. لاتین: Plex Sans 11pt. */
  --hq-type-doc-h3-font-size: 12px; /** عنوان سطح ۳. لاتین: Plex Sans 11pt. */
  --hq-type-doc-h3-font-weight: 600; /** عنوان سطح ۳. لاتین: Plex Sans 11pt. */
  --hq-type-doc-h3-line-height: 1.5; /** عنوان سطح ۳. لاتین: Plex Sans 11pt. */
  --hq-type-doc-body-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** متن اصلی سند. لاتین: Plex Sans 10pt. حاشیه‌ها ۲۰ تا ۲۵ میلی‌متر. */
  --hq-type-doc-body-font-size: 11px; /** متن اصلی سند. لاتین: Plex Sans 10pt. حاشیه‌ها ۲۰ تا ۲۵ میلی‌متر. */
  --hq-type-doc-body-font-weight: 400; /** متن اصلی سند. لاتین: Plex Sans 10pt. حاشیه‌ها ۲۰ تا ۲۵ میلی‌متر. */
  --hq-type-doc-body-line-height: 1.8; /** متن اصلی سند. لاتین: Plex Sans 10pt. حاشیه‌ها ۲۰ تا ۲۵ میلی‌متر. */
  --hq-type-doc-compact-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** جدول و فهرست‌های فشرده. لاتین 8.5pt. */
  --hq-type-doc-compact-font-size: 9.5px; /** جدول و فهرست‌های فشرده. لاتین 8.5pt. */
  --hq-type-doc-compact-font-weight: 400; /** جدول و فهرست‌های فشرده. لاتین 8.5pt. */
  --hq-type-doc-compact-line-height: 1.6; /** جدول و فهرست‌های فشرده. لاتین 8.5pt. */
  --hq-type-doc-footnote-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** پانویس و زیرنویس تصویر. لاتین 7.5pt. */
  --hq-type-doc-footnote-font-size: 8.5px; /** پانویس و زیرنویس تصویر. لاتین 7.5pt. */
  --hq-type-doc-footnote-font-weight: 400; /** پانویس و زیرنویس تصویر. لاتین 7.5pt. */
  --hq-type-doc-footnote-line-height: 1.6; /** پانویس و زیرنویس تصویر. لاتین 7.5pt. */
  --hq-type-doc-header-font-family: Ravi, Vazirmatn, Tahoma, sans-serif; /** سربرگ و پابرگ تکرارشونده. لاتین 7pt. */
  --hq-type-doc-header-font-size: 8px; /** سربرگ و پابرگ تکرارشونده. لاتین 7pt. */
  --hq-type-doc-header-font-weight: 400; /** سربرگ و پابرگ تکرارشونده. لاتین 7pt. */
  --hq-type-doc-header-line-height: 1.5; /** سربرگ و پابرگ تکرارشونده. لاتین 7pt. */
  --hq-type-en-title-font-family: 'IBM Plex Serif', Georgia, serif; /** عنوان‌های انگلیسی و حروف لوگو: IBM Plex Serif Bold. */
  --hq-type-en-title-font-size: 40px; /** عنوان‌های انگلیسی و حروف لوگو: IBM Plex Serif Bold. */
  --hq-type-en-title-font-weight: 700; /** عنوان‌های انگلیسی و حروف لوگو: IBM Plex Serif Bold. */
  --hq-type-en-title-line-height: 1.25; /** عنوان‌های انگلیسی و حروف لوگو: IBM Plex Serif Bold. */
  --hq-type-en-ghost-font-family: 'IBM Plex Serif', Georgia, serif; /** عنوان انگلیسی کم‌رنگ اسلاید (Cool Gray 20 روی روشن، Cyan 70 روی تیره). */
  --hq-type-en-ghost-font-size: 66px; /** عنوان انگلیسی کم‌رنگ اسلاید (Cool Gray 20 روی روشن، Cyan 70 روی تیره). */
  --hq-type-en-ghost-font-weight: 700; /** عنوان انگلیسی کم‌رنگ اسلاید (Cool Gray 20 روی روشن، Cyan 70 روی تیره). */
  --hq-type-en-ghost-line-height: 82px; /** عنوان انگلیسی کم‌رنگ اسلاید (Cool Gray 20 روی روشن، Cyan 70 روی تیره). */
  --hq-type-en-body-font-family: 'IBM Plex Sans', Arial, sans-serif; /** متن انگلیسی: IBM Plex Sans. */
  --hq-type-en-body-font-size: 16px; /** متن انگلیسی: IBM Plex Sans. */
  --hq-type-en-body-font-weight: 400; /** متن انگلیسی: IBM Plex Sans. */
  --hq-type-en-body-line-height: 1.6; /** متن انگلیسی: IBM Plex Sans. */
  --hq-type-en-label-font-family: 'IBM Plex Sans', Arial, sans-serif; /** برچسب‌های تمام‌حروف‌بزرگ انگلیسی؛ تا ۱۰٪ فاصلهٔ حروف. فارسی هرگز فاصلهٔ حروف نمی‌گیرد. */
  --hq-type-en-label-font-size: 12px; /** برچسب‌های تمام‌حروف‌بزرگ انگلیسی؛ تا ۱۰٪ فاصلهٔ حروف. فارسی هرگز فاصلهٔ حروف نمی‌گیرد. */
  --hq-type-en-label-font-weight: 600; /** برچسب‌های تمام‌حروف‌بزرگ انگلیسی؛ تا ۱۰٪ فاصلهٔ حروف. فارسی هرگز فاصلهٔ حروف نمی‌گیرد. */
  --hq-type-en-label-line-height: 1.5; /** برچسب‌های تمام‌حروف‌بزرگ انگلیسی؛ تا ۱۰٪ فاصلهٔ حروف. فارسی هرگز فاصلهٔ حروف نمی‌گیرد. */
  --hq-surface: var(--hq-white); /** پس‌زمینهٔ پیش‌فرض صفحه. در حالت تیره Cyan 100، سرمه‌ای عمیق برند. */
  --hq-surface-alt: var(--hq-gray-10); /** پس‌زمینهٔ جایگزین برای بخش‌ها و پنل‌ها (Cool Gray 10). در حالت تیره Cyan 90. */
  --hq-surface-raised: var(--hq-white); /** کارت‌ها و کاشی‌ها. در حالت روشن، کارت سفید با خط مرزی روی surface-alt. */
  --hq-surface-inverse: var(--hq-cyan-100); /** بلوک معکوس: پنل سرمه‌ای روی صفحهٔ روشن، مثل جمع‌بندی یا کارت برگزیده. */
  --hq-field: var(--hq-white); /** زمینهٔ فیلدهای فرم. */
  --hq-ink: var(--hq-cyan-90); /** تیترها، عنوان‌ها، عددهای کلیدی و برچسب‌های مهم. */
  --hq-text: var(--hq-gray-80); /** متن اصلی روی همهٔ سطح‌ها. */
  --hq-text-secondary: var(--hq-gray-60); /** زیرعنوان، توضیح و متن با اهمیت کمتر. */
  --hq-text-muted: var(--hq-gray-50); /** فقط زیرنویس، منبع و پانویس. در حالت روشن کنتراست ۳٫۴:۱ دارد و برای متن ضروری مناسب نیست. */
  --hq-text-on-inverse: var(--hq-white); /** متن روی surface-inverse. */
  --hq-border: var(--hq-gray-20); /** خط‌های مویی، دور کارت و خط‌های جدول. */
  --hq-border-strong: var(--hq-gray-30); /** خط زیر سرستون جدول و جداکننده‌هایی که وزن بیشتری لازم دارند. */
  --hq-border-control: var(--hq-gray-50); /** خط دور کنترل‌های فرم (فیلد، چک‌باکس، رادیو). دست‌کم ۳:۱ با زمینه، طبق WCAG برای اجزای رابط. */
  --hq-brand: var(--hq-cyan-40); /** فیروزه‌ای امضای هارمونیک: Q لوگو، موج و عددها روی زمینهٔ تیره. روی سفید فقط پرکننده یا متن ۲۴ پیکسل و بزرگ‌تر. */
  --hq-brand-deep: var(--hq-cyan-100); /** رنگ لوگو و شروع گرادیان تیرهٔ برند. هرگز تغییر نمی‌کند. */
  --hq-accent: var(--hq-blue-60); /** تنها تاکید در هر صفحه: لینک، سری برجسته، مرحلهٔ جاری یا واژهٔ کلیدی. */
  --hq-accent-subtle: var(--hq-blue-10); /** پس‌زمینهٔ کارت برجسته، مرحلهٔ جاری یا ردیف انتخاب‌شده. */
  --hq-on-accent: var(--hq-white); /** متن روی پرکنندهٔ accent. */
  --hq-focus: var(--hq-blue-60); /** حلقهٔ فوکوس: ۲ پیکسل توپر با فاصلهٔ ۲ پیکسل. */
  --hq-accent-hover: var(--hq-blue-70); /** رنگ accent هنگام قرار گرفتن نشانگر روی دکمه یا لینک. */
  --hq-accent-active: var(--hq-blue-80); /** رنگ accent هنگام فشردن. */
  --hq-disabled: var(--hq-gray-20); /** پرکنندهٔ کنترل غیرفعال. */
  --hq-on-disabled: var(--hq-gray-50); /** متن کنترل غیرفعال. کنتراست کم عمدی است؛ کنترل غیرفعال قابل استفاده نیست. */
  --hq-positive: var(--hq-teal-70); /** وضعیت مثبت و نشان «انجام بده». سبزآبی به جای سبز. همیشه همراه واژه یا آیکن. */
  --hq-positive-subtle: var(--hq-teal-10); /** پس‌زمینهٔ برچسب‌ها و فراخوان‌های مثبت. */
  --hq-warning: var(--hq-yellow-30); /** نشان‌ها و پرکننده‌های هشدار. هرگز رنگ متن روی سفید نیست (۱٫۷:۱)؛ روی آن از ink استفاده کنید. */
  --hq-warning-subtle: var(--hq-yellow-10); /** پس‌زمینهٔ اعلان‌ها و فراخوان‌های هشدار. */
  --hq-negative: var(--hq-red-60); /** وضعیت منفی، نشان «انجام نده» و فراخوان‌های ریسک. همیشه همراه واژه یا آیکن. */
  --hq-negative-hover: var(--hq-red-70); /** رنگ negative هنگام قرار گرفتن نشانگر روی دکمهٔ خطرناک. */
  --hq-on-negative: var(--hq-white); /** متن روی پرکنندهٔ negative. */
  --hq-negative-subtle: var(--hq-red-10); /** پس‌زمینهٔ برچسب‌ها و فراخوان‌های منفی. */
  --hq-info: var(--hq-blue-60); /** وضعیت اطلاع‌رسانی. */
  --hq-info-subtle: var(--hq-blue-10); /** پس‌زمینهٔ اعلان‌های اطلاع‌رسانی. */
  --hq-neutral-status: var(--hq-gray-50); /** نشان وضعیت خنثی یا بدون تغییر. */
  --hq-chart-1: var(--hq-cyan-50); /** سری ۱ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. */
  --hq-chart-2: var(--hq-yellow-60); /** سری ۲ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. */
  --hq-chart-3: var(--hq-blue-60); /** سری ۳ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. */
  --hq-chart-4: var(--hq-teal-50); /** سری ۴ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. */
  --hq-chart-5: var(--hq-purple-60); /** سری ۵ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. */
  --hq-chart-other: var(--hq-gray-30); /** سری «سایر»، داده‌های کم‌اهمیت و زمینه. */
  --hq-chart-seq-1: var(--hq-cyan-40); /** گام ۱ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-chart-seq-2: var(--hq-cyan-50); /** گام ۲ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-chart-seq-3: var(--hq-cyan-60); /** گام ۳ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-chart-seq-4: var(--hq-cyan-70); /** گام ۴ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-chart-seq-5: var(--hq-cyan-80); /** گام ۵ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-chart-seq-6: var(--hq-cyan-90); /** گام ۶ از ۶ در طیف ترتیبی (Cyan 40 تا 90). */
  --hq-sos-field: var(--hq-red-60); /** زمینهٔ امضای SOS، فقط در صفحه‌های تمام‌عرض محصول. */
  --hq-sos-ink: var(--hq-white); /** متن روی sos-field (۵:۱). */
  --hq-scalelab-field: var(--hq-cyan-40); /** زمینهٔ امضای ScaleLab، فقط در صفحه‌های تمام‌عرض محصول. */
  --hq-scalelab-ink: var(--hq-cyan-100); /** متن روی scalelab-field (۷٫۷:۱). متن سفید روی Cyan 40 مردود است (۲٫۴:۱). */
  --hq-grid-web-sm-gutter: var(--hq-space-2); /** فاصلهٔ ستون‌ها در موبایل. */
  --hq-grid-web-sm-margin: var(--hq-space-2); /** حاشیهٔ صفحه در موبایل. */
  --hq-grid-web-md-gutter: var(--hq-space-3); /** فاصلهٔ ستون‌ها در تبلت. */
  --hq-grid-web-md-margin: var(--hq-space-4); /** حاشیهٔ صفحه در تبلت. */
  --hq-grid-web-lg-gutter: var(--hq-space-4); /** فاصلهٔ ستون‌ها در دسکتاپ. */
  --hq-grid-web-lg-margin: var(--hq-space-6); /** حاشیهٔ صفحه در دسکتاپ. */
  --hq-grid-web-xl-gutter: var(--hq-space-6); /** فاصلهٔ ستون‌ها در دسکتاپ بزرگ؛ همان فاصلهٔ ستون اسلاید. */
  --hq-grid-web-xl-margin: var(--hq-space-8); /** حاشیهٔ صفحه در دسکتاپ بزرگ. */
}

[data-theme="dark"] {
  --hq-surface: var(--hq-cyan-100); /** پس‌زمینهٔ پیش‌فرض صفحه. در حالت تیره Cyan 100، سرمه‌ای عمیق برند. */
  --hq-surface-alt: var(--hq-cyan-90); /** پس‌زمینهٔ جایگزین برای بخش‌ها و پنل‌ها (Cool Gray 10). در حالت تیره Cyan 90. */
  --hq-surface-raised: var(--hq-cyan-90); /** کارت‌ها و کاشی‌ها. در حالت روشن، کارت سفید با خط مرزی روی surface-alt. */
  --hq-surface-inverse: var(--hq-white); /** بلوک معکوس: پنل سرمه‌ای روی صفحهٔ روشن، مثل جمع‌بندی یا کارت برگزیده. */
  --hq-field: var(--hq-cyan-90); /** زمینهٔ فیلدهای فرم. */
  --hq-ink: var(--hq-white); /** تیترها، عنوان‌ها، عددهای کلیدی و برچسب‌های مهم. */
  --hq-text: var(--hq-gray-20); /** متن اصلی روی همهٔ سطح‌ها. */
  --hq-text-secondary: var(--hq-gray-30); /** زیرعنوان، توضیح و متن با اهمیت کمتر. */
  --hq-text-muted: var(--hq-gray-40); /** فقط زیرنویس، منبع و پانویس. در حالت روشن کنتراست ۳٫۴:۱ دارد و برای متن ضروری مناسب نیست. */
  --hq-text-on-inverse: var(--hq-cyan-100); /** متن روی surface-inverse. */
  --hq-border: var(--hq-cyan-80); /** خط‌های مویی، دور کارت و خط‌های جدول. */
  --hq-border-strong: var(--hq-cyan-70); /** خط زیر سرستون جدول و جداکننده‌هایی که وزن بیشتری لازم دارند. */
  --hq-border-control: var(--hq-gray-50); /** خط دور کنترل‌های فرم (فیلد، چک‌باکس، رادیو). دست‌کم ۳:۱ با زمینه، طبق WCAG برای اجزای رابط. */
  --hq-accent: var(--hq-blue-40); /** تنها تاکید در هر صفحه: لینک، سری برجسته، مرحلهٔ جاری یا واژهٔ کلیدی. */
  --hq-accent-subtle: var(--hq-blue-90); /** پس‌زمینهٔ کارت برجسته، مرحلهٔ جاری یا ردیف انتخاب‌شده. */
  --hq-on-accent: var(--hq-cyan-100); /** متن روی پرکنندهٔ accent. */
  --hq-focus: var(--hq-cyan-40); /** حلقهٔ فوکوس: ۲ پیکسل توپر با فاصلهٔ ۲ پیکسل. */
  --hq-accent-hover: var(--hq-blue-30); /** رنگ accent هنگام قرار گرفتن نشانگر روی دکمه یا لینک. */
  --hq-accent-active: var(--hq-blue-20); /** رنگ accent هنگام فشردن. */
  --hq-disabled: var(--hq-cyan-80); /** پرکنندهٔ کنترل غیرفعال. */
  --hq-on-disabled: var(--hq-gray-40); /** متن کنترل غیرفعال. کنتراست کم عمدی است؛ کنترل غیرفعال قابل استفاده نیست. */
  --hq-positive: var(--hq-teal-40); /** وضعیت مثبت و نشان «انجام بده». سبزآبی به جای سبز. همیشه همراه واژه یا آیکن. */
  --hq-positive-subtle: var(--hq-teal-90); /** پس‌زمینهٔ برچسب‌ها و فراخوان‌های مثبت. */
  --hq-warning-subtle: var(--hq-yellow-90); /** پس‌زمینهٔ اعلان‌ها و فراخوان‌های هشدار. */
  --hq-negative: var(--hq-red-40); /** وضعیت منفی، نشان «انجام نده» و فراخوان‌های ریسک. همیشه همراه واژه یا آیکن. */
  --hq-negative-hover: var(--hq-red-30); /** رنگ negative هنگام قرار گرفتن نشانگر روی دکمهٔ خطرناک. */
  --hq-on-negative: var(--hq-cyan-100); /** متن روی پرکنندهٔ negative. */
  --hq-negative-subtle: var(--hq-red-90); /** پس‌زمینهٔ برچسب‌ها و فراخوان‌های منفی. */
  --hq-info: var(--hq-blue-40); /** وضعیت اطلاع‌رسانی. */
  --hq-info-subtle: var(--hq-blue-90); /** پس‌زمینهٔ اعلان‌های اطلاع‌رسانی. */
  --hq-neutral-status: var(--hq-gray-40); /** نشان وضعیت خنثی یا بدون تغییر. */
}