/* =========================================================
   توکن‌های مرکزی و غیررنگی iCh
   کاربرد:
   تعریف فونت، اندازه‌ها، فاصله‌ها، شعاع‌ها و زمان حرکت مشترک تمام تم‌ها.

   نمونه استفاده در کامپوننت:
   border-radius: var(--ich-button-radius);
   gap: var(--ich-content-gap);

   قانون:
   رنگ و سایه وابسته به تم در این فایل تعریف نمی‌شود.
   ========================================================= */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn/Vazirmatn[wght].woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ich-font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    --ich-button-radius: 11px;
    --ich-button-radius-square: 12px;
    --ich-button-height-sm: 32px;
    --ich-button-height-md: 36px;
    --ich-button-height-lg: 42px;
    --ich-button-padding-sm: 12px;
    --ich-button-padding-md: 16px;
    --ich-button-padding-lg: 20px;
    --ich-icon-button-size-sm: 32px;
    --ich-icon-button-size-md: 36px;
    --ich-icon-button-size-lg: 42px;
    --ich-button-gap: 8px;
    --ich-radius-sm: 8px;
    --ich-radius-md: 12px;
    --ich-radius-lg: 16px;
    --ich-radius-card: 16px;
    --ich-radius-menu-item: 10px;
    --ich-sidebar-width: 276px;
    --ich-menu-item-height: 44px;
    --ich-page-padding: 16px;
    --ich-layout-gap: 12px;
    --ich-content-gap: 12px;
    --ich-header-min-height: 88px;
    --ich-space-xs: 6px;
    --ich-space-sm: 10px;
    --ich-space-md: 14px;
    --ich-space-lg: 20px;
    --ich-space-xl: 28px;
    --ich-transition-fast: 160ms ease;
}

/* =========================================================
   توکن‌های اندازه Badge
   کاربرد:
   کنترل متمرکز ارتفاع، فاصله داخلی، شعاع و اندازه نقطه تمام Badgeها.

   نمونه استفاده:
   height: var(--ich-badge-height-md);
   border-radius: var(--ich-badge-radius);
   ========================================================= */
:root {
    --ich-badge-height-sm: 22px;
    --ich-badge-height-md: 26px;
    --ich-badge-height-lg: 32px;
    --ich-badge-padding-sm: 8px;
    --ich-badge-padding-md: 10px;
    --ich-badge-padding-lg: 13px;
    --ich-badge-radius: 8px;
    --ich-badge-radius-pill: 999px;
    --ich-badge-dot-size: 7px;
    --ich-badge-gap: 6px;
    --ich-badge-font-size-sm: 12px;
    --ich-badge-font-size-md: 13px;
    --ich-badge-font-size-lg: 14px;
}

/* =========================================================
   توکن‌های مرکزی Card و StatCard
   کاربرد:
   کنترل متمرکز فاصله داخلی، شعاع، حداقل ارتفاع و اندازه رسانه کارت‌ها.

   نمونه استفاده:
   padding: var(--ich-card-padding-normal);
   border-radius: var(--ich-card-radius);
   ========================================================= */
:root {
    --ich-card-radius: 16px;
    --ich-card-padding-compact: 12px;
    --ich-card-padding-normal: 12px;
    --ich-card-padding-comfortable: 18px;
    --ich-card-header-gap: 10px;
    --ich-card-section-gap: 12px;
    --ich-card-icon-size: 34px;
    --ich-stat-card-min-height: 142px;
    --ich-stat-card-media-size: 58px;
    --ich-stat-grid-min-width: 230px;
}

/* =========================================================
   توکن‌های مرکزی چیدمان صفحات iCh
   کاربرد:
   کنترل فاصله Grid، Stack، Inline، عرض Container و ظاهر Section.

   نمونه استفاده:
   gap: var(--ich-layout-grid-gap-md);
   max-width: var(--ich-container-width-lg);
   ========================================================= */
:root {
    --ich-layout-grid-gap-sm: 8px;
    --ich-layout-grid-gap-md: 12px;
    --ich-layout-grid-gap-lg: 18px;
    --ich-layout-grid-gap-xl: 24px;
    --ich-container-width-sm: 560px;
    --ich-container-width-md: 760px;
    --ich-container-width-lg: 1040px;
    --ich-container-width-xl: 1320px;
    --ich-section-header-gap: 10px;
    --ich-section-content-gap: 14px;
    --ich-section-icon-size: 38px;
}

/* =========================================================
   توکن‌های مرکزی Toolbar و ActionGroup
   کاربرد:
   کنترل متمرکز فاصله داخلی، حداقل ارتفاع، شعاع و فاصله عملیات.

   نمونه استفاده:
   min-height: var(--ich-toolbar-min-height-md);
   gap: var(--ich-action-group-gap);
   ========================================================= */
:root {
    --ich-toolbar-radius: 12px;
    --ich-toolbar-min-height-sm: 44px;
    --ich-toolbar-min-height-md: 52px;
    --ich-toolbar-min-height-lg: 60px;
    --ich-toolbar-padding-sm: 6px;
    --ich-toolbar-padding-md: 10px;
    --ich-toolbar-padding-lg: 14px;
    --ich-toolbar-gap: 10px;
    --ich-toolbar-region-gap: 8px;
    --ich-action-group-gap: 8px;
    --ich-action-group-gap-compact: 5px;
}

/* =========================================================
   توکن‌های مرکزی Form، Input و Textarea
   کاربرد:
   کنترل ارتفاع، شعاع، عرض عنوان، عرض فیلد و فاصله فرم‌ها از یک نقطه.

   نمونه استفاده:
   min-height: var(--ich-field-height-md);
   width: var(--ich-field-label-width-md);
   ========================================================= */
:root {
    --ich-field-height-sm: 36px;
    --ich-field-height-md: 44px;
    --ich-field-height-lg: 52px;
    --ich-field-radius: 12px;
    --ich-field-border-width: 1px;
    --ich-field-padding-inline-sm: 10px;
    --ich-field-padding-inline-md: 13px;
    --ich-field-padding-inline-lg: 16px;
    --ich-field-label-padding-inline: 16px;
    --ich-field-label-width-sm: 88px;
    --ich-field-label-width-md: 116px;
    --ich-field-label-width-lg: 148px;
    --ich-field-label-width-xl: 222px;
    --ich-field-label-width-xxl: 333px;
    --ich-field-width-sm: 320px;
    --ich-field-width-md: 520px;
    --ich-field-width-lg: 760px;
    --ich-field-adornment-gap: 7px;
    --ich-field-meta-gap: 8px;
    --ich-field-help-margin-top: 6px;
    --ich-textarea-min-height: 112px;
    --ich-form-grid-gap-sm: 8px;
    --ich-form-grid-gap-md: 12px;
    --ich-form-grid-gap-lg: 18px;
    --ich-form-actions-gap: 8px;
}

/* =========================================================
   توکن‌های مرکزی Select و Dropdown
   کاربرد:
   کنترل اندازه فلش Select، عرض و فاصله منوی Dropdown و حرکت بازشدن.

   نمونه استفاده:
   width: var(--ich-dropdown-min-width);
   ========================================================= */
:root {
    --ich-select-chevron-size: 18px;
    --ich-select-chevron-offset: 14px;
    --ich-dropdown-min-width: 190px;
    --ich-dropdown-max-width: 320px;
    --ich-dropdown-padding: 6px;
    --ich-dropdown-gap: 4px;
    --ich-dropdown-radius: 12px;
    --ich-dropdown-item-min-height: 38px;
    --ich-dropdown-item-padding-inline: 12px;
    --ich-dropdown-offset: 8px;

    --ich-overlay-z-index: 4000;
    --ich-overlay-viewport-padding: 12px;
}

/* =========================================================
   توکن‌های مرکزی Checkbox، RadioButton و Switch
   کاربرد:
   کنترل متمرکز اندازه کنترل، فاصله متن، شعاع و ابعاد Switch.

   نمونه استفاده:
   inline-size: var(--ich-choice-control-size-md);
   ========================================================= */
:root {
    --ich-choice-control-size-sm: 16px;
    --ich-choice-control-size-md: 19px;
    --ich-choice-control-size-lg: 22px;
    --ich-choice-gap-sm: 7px;
    --ich-choice-gap-md: 9px;
    --ich-choice-gap-lg: 11px;
    --ich-choice-radius: 6px;
    --ich-choice-group-gap: 12px;
    --ich-choice-group-heading-gap: 10px;
    --ich-choice-description-gap: 3px;
    --ich-switch-width-sm: 36px;
    --ich-switch-height-sm: 20px;
    --ich-switch-width-md: 44px;
    --ich-switch-height-md: 24px;
    --ich-switch-width-lg: 52px;
    --ich-switch-height-lg: 28px;
}

/* =========================================================
   کامپوننت: تقویم و ساعت شمسی iCh
   نمونه استفاده:
   Html.NewUiPersianDateTime(...)
   اندازه‌های Popup و سلول‌های تقویم فقط از این توکن‌ها کنترل می‌شوند.
   ========================================================= */
:root {
    --ich-datetime-popup-width: 292px;
    --ich-datetime-popup-radius: 14px;
    --ich-datetime-popup-padding: 10px;
    --ich-datetime-popup-gap: 8px;
    --ich-datetime-day-size: 30px;
    --ich-datetime-nav-size: 30px;
    --ich-datetime-select-height: 32px;
    --ich-datetime-time-width: 108px;
}

/* =========================================================
   کامپوننت: جدول، صفحه‌بندی و حالت خالی iCh
   نمونه استفاده:
   <new-ui-table variant="Management" density="Normal" mobile-cards="true">...</new-ui-table>
   <new-ui-pagination model="..." />
   تمام فاصله‌ها، ارتفاع‌ها و شعاع‌ها از این بخش کنترل می‌شوند.
   ========================================================= */
:root {
    --ich-table-radius: 14px;
    --ich-table-cell-padding-inline: 14px;
    --ich-table-cell-padding-block-compact: 9px;
    --ich-table-cell-padding-block-normal: 12px;
    --ich-table-cell-padding-block-comfortable: 16px;
    --ich-table-mobile-card-gap: 10px;
    --ich-table-mobile-card-padding: 12px;
    --ich-pagination-gap: 6px;
    --ich-pagination-control-size: 36px;
    --ich-empty-state-padding: 34px;
}

/* =========================================================
   توکن‌های مرکزی Filter Panel
   کاربرد:
   کنترل فاصله، شعاع و تراکم همه پنل‌های فیلتر.

   نمونه استفاده:
   gap: var(--ich-filter-gap-normal);
   ========================================================= */
:root {
    --ich-filter-radius: var(--ich-card-radius);
    --ich-filter-gap-compact: 10px;
    --ich-filter-gap-normal: 14px;
    --ich-filter-gap-comfortable: 18px;
    --ich-filter-padding-compact: 10px;
    --ich-filter-padding-normal: 14px;
    --ich-filter-padding-comfortable: 18px;
    --ich-filter-header-min-height: 44px;
}

/* =========================================================
   توکن‌های مرکزی Feedback در iCh
   کاربرد:
   کنترل متمرکز شعاع، فاصله، اندازه آیکون و عرض Alert، Inline Message و Toast.

   نمونه استفاده:
   border-radius: var(--ich-feedback-radius);
   gap: var(--ich-feedback-gap);
   ========================================================= */
:root {
    --ich-feedback-radius: 13px;
    --ich-feedback-gap: 11px;
    --ich-feedback-padding: 13px 14px;
    --ich-feedback-padding-compact: 9px 11px;
    --ich-feedback-icon-size: 34px;
    --ich-toast-width: 360px;
    --ich-toast-gap: 10px;
    --ich-toast-offset: 16px;
    --ich-toast-transition: 180ms ease;
    --ich-toast-z-index: 5000;
}

/* =========================================================
   توکن‌های مرکزی Tabs در iCh
   کاربرد:
   کنترل متمرکز ارتفاع، فاصله، شعاع و اندازه متن تمام Variantهای Tabs.

   نمونه استفاده:
   min-height: var(--ich-tabs-height-md);
   gap: var(--ich-tabs-gap);
   ========================================================= */
:root {
    --ich-tabs-gap: 5px;
    --ich-tabs-padding: 5px;
    --ich-tabs-radius: 12px;
    --ich-tabs-item-radius: 9px;
    --ich-tabs-height-sm: 32px;
    --ich-tabs-height-md: 38px;
    --ich-tabs-height-lg: 44px;
    --ich-tabs-padding-inline-sm: 10px;
    --ich-tabs-padding-inline-md: 14px;
    --ich-tabs-padding-inline-lg: 18px;
    --ich-tabs-font-size-sm: .78rem;
    --ich-tabs-font-size-md: .86rem;
    --ich-tabs-font-size-lg: .94rem;
    --ich-tabs-underline-size: 3px;
    --ich-tabs-scrollbar-size: 4px;
}

/* =========================================================
   توکن‌های مرکزی Loading، Skeleton و Progress در iCh
   کاربرد:
   کنترل متمرکز اندازه Spinner، فاصله، Skeleton و ضخامت Progress.

   نمونه استفاده:
   inline-size: var(--ich-loading-spinner-md);
   block-size: var(--ich-progress-height-md);
   ========================================================= */
:root {
    --ich-loading-gap: 9px;
    --ich-loading-spinner-sm: 16px;
    --ich-loading-spinner-md: 22px;
    --ich-loading-spinner-lg: 30px;
    --ich-loading-block-padding: 24px;
    --ich-loading-overlay-radius: var(--ich-card-radius);
    --ich-loading-overlay-backdrop-blur: 2px;
    --ich-skeleton-radius: 9px;
    --ich-skeleton-gap: 10px;
    --ich-skeleton-line-height: 12px;
    --ich-skeleton-control-height: 38px;
    --ich-skeleton-media-size: 58px;
    --ich-skeleton-animation-duration: 1.35s;
    --ich-progress-height-sm: 5px;
    --ich-progress-height-md: 8px;
    --ich-progress-height-lg: 12px;
    --ich-progress-radius: 999px;
    --ich-progress-gap: 8px;
    --ich-progress-transition: 220ms ease;
}

/* =========================================================
   توکن‌های مرکزی Modal و Confirm Dialog در iCh
   کاربرد:
   کنترل متمرکز عرض، شعاع، فاصله، Padding و لایه نمایش Modalها.

   نمونه استفاده:
   inline-size: min(var(--ich-modal-width-md), calc(100vw - 2 * var(--ich-modal-viewport-gap)));
   ========================================================= */
:root {
    --ich-modal-width-sm: 420px;
    --ich-modal-width-md: 620px;
    --ich-modal-width-lg: 860px;
    --ich-modal-width-xl: 1120px;
    --ich-modal-max-height: 86vh;
    --ich-modal-radius: 16px;
    --ich-modal-viewport-gap: 20px;
    --ich-modal-header-padding: 15px 17px;
    --ich-modal-body-padding: 17px;
    --ich-modal-footer-padding: 12px 17px;
    --ich-modal-gap: 12px;
    --ich-modal-icon-size: 38px;
    --ich-modal-z-index: 3200;
    --ich-modal-transition: 180ms ease;
}

/* =========================================================
   توکن‌های مرکزی Tooltip و Popover در iCh
   کاربرد:
   کنترل متمرکز اندازه، شعاع، فاصله و عرض Tooltip و Popover.

   نمونه استفاده:
   max-inline-size: var(--ich-tooltip-max-width);
   inline-size: min(var(--ich-popover-width), calc(100vw - 2 * var(--ich-popover-viewport-gap)));
   ========================================================= */
:root {
    --ich-tooltip-max-width: 260px;
    --ich-tooltip-padding: 7px 9px;
    --ich-tooltip-radius: 8px;
    --ich-tooltip-font-size: .76rem;
    --ich-tooltip-line-height: 1.65;
    --ich-tooltip-transition: 140ms ease;
    --ich-tooltip-arrow-size: 6px;
    --ich-tooltip-z-index: 3600;
    --ich-popover-width: 330px;
    --ich-popover-max-width: 430px;
    --ich-popover-viewport-gap: 12px;
    --ich-popover-radius: 14px;
    --ich-popover-header-padding: 12px 13px;
    --ich-popover-body-padding: 12px 13px;
    --ich-popover-actions-padding: 9px 13px;
    --ich-popover-gap: 10px;
    --ich-popover-icon-size: 32px;
}

/* =========================================================
   توکن‌های مرکزی Breadcrumb
   کاربرد:
   کنترل فاصله، اندازه متن و فاصله عمودی مسیر صفحه از یک نقطه.

   نمونه استفاده:
   gap: var(--ich-breadcrumb-gap);
   ========================================================= */
:root {
    --ich-breadcrumb-gap: 6px;
    --ich-breadcrumb-item-gap: 5px;
    --ich-breadcrumb-font-size: 11px;
    --ich-breadcrumb-margin-bottom: 5px;
}

/* =========================================================
   توکن‌های مرکزی Accordion و Collapse در iCh
   کاربرد:
   کنترل متمرکز شعاع، فاصله، حداقل ارتفاع Header و Padding محتوا.

   نمونه استفاده:
   min-height: var(--ich-accordion-summary-min-height);
   padding: var(--ich-accordion-content-padding);
   ========================================================= */
:root {
    --ich-accordion-radius: 12px;
    --ich-accordion-item-gap: 8px;
    --ich-accordion-summary-min-height: 52px;
    --ich-accordion-summary-padding-block: 10px;
    --ich-accordion-summary-padding-inline: 14px;
    --ich-accordion-content-padding: 14px;
    --ich-accordion-icon-size: 34px;
    --ich-accordion-chevron-size: 30px;
    --ich-accordion-copy-gap: 3px;
}

/* =========================================================
   توکن‌های File Upload و Stepper/Wizard
   کاربرد:
   اندازه DropZone، پیش‌نمایش فایل، Marker مراحل و فاصله‌های Wizard.

   نمونه استفاده:
   min-height: var(--ich-file-upload-dropzone-height);
   width: var(--ich-stepper-marker-size-md);
   ========================================================= */
:root {
    --ich-file-upload-dropzone-height: 150px;
    --ich-file-upload-preview-size: 44px;
    --ich-file-upload-gap: 10px;
    --ich-stepper-marker-size-sm: 28px;
    --ich-stepper-marker-size-md: 34px;
    --ich-stepper-marker-size-lg: 40px;
    --ich-stepper-gap: 12px;
    --ich-wizard-actions-gap: 8px;
}