/* ==========================================================================\n   HP Typography Design Tokens — v98\n   Single source of truth for type across user/admin/auth/error interfaces.\n   Keep visual changes here; page styles should consume tokens, not hard-code sizes.\n   ========================================================================== */

/* Dana font faces live here so every panel/auth/error surface uses one typography source. */
@font-face{font-family:dana;font-style:normal;font-weight:300;font-display:swap;src:url(../font/dana/light.woff2) format("woff2")}
@font-face{font-family:dana;font-style:normal;font-weight:400;font-display:swap;src:url(../font/dana/regular.woff2) format("woff2")}
@font-face{font-family:dana;font-style:normal;font-weight:500;font-display:swap;src:url(../font/dana/medium.woff2) format("woff2")}
@font-face{font-family:dana;font-style:normal;font-weight:700;font-display:swap;src:url(../font/dana/bold.woff2) format("woff2")}
@font-face{font-family:dana;font-style:normal;font-weight:800;font-display:swap;src:url(../font/dana/bold.woff2) format("woff2")}

:root {
  /* Font family */
  --hp-type-family: dana,"IRANSansX","IRANSans","Segoe UI",system-ui,sans-serif;
  --hp-type-family-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --hp-type-size-zero: 0;

  /* Compact primitive text scale — only seven text sizes are canonical. Legacy names below alias to these steps. */
  --hp-type-size-12: 12px;
  --hp-type-size-13: 13px;
  --hp-type-size-14: 14px;
  --hp-type-size-16: 16px;
  --hp-type-size-18: 18px;
  --hp-type-size-22: 22px;
  --hp-type-size-28: 28px;

  /* Primitive weights. Dana files available in this project are 300/400/500/700/800. */
  --hp-type-weight-light: 300;
  --hp-type-weight-regular: 400;
  --hp-type-weight-medium: 500;
  --hp-type-weight-semibold: 600;
  --hp-type-weight-bold: 700;
  --hp-type-weight-extrabold: 800;
  --hp-type-weight-black: 900;

  /* Primitive line-height scale. */
  --hp-type-leading-none: 1;
  --hp-type-leading-compact: 1.2;
  --hp-type-leading-tight: 1.5;
  --hp-type-leading-snug: 1.6;
  --hp-type-leading-ui: 1.8;
  --hp-type-leading-body: 1.9;
  --hp-type-leading-readable: 2.1;

  /* Canonical role line-heights from the compact scale. */
  --hp-type-h1-leading: 1.5;
  --hp-type-h2-leading: 1.6;
  --hp-type-h3-leading: 1.7;
  --hp-type-h4-leading: 1.8;
  --hp-type-body-role-leading: 1.8;
  --hp-type-small-leading: 1.8;
  --hp-type-micro-leading: 1.7;

  /* Semantic roles — these are the knobs we should normally edit. */
  --hp-type-display-size: var(--hp-type-size-28);
  --hp-type-page-title-size: var(--hp-type-size-22);
  --hp-type-section-title-size: var(--hp-type-size-18);
  --hp-type-card-title-size: var(--hp-type-size-16);
  --hp-type-body-lg-size: var(--hp-type-size-16);
  --hp-type-body-size: var(--hp-type-size-14);
  --hp-type-label-size: var(--hp-type-size-13);
  --hp-type-meta-size: var(--hp-type-size-12);
  --hp-type-caption-size: var(--hp-type-size-12);
  --hp-type-button-size: var(--hp-type-size-14);
  --hp-type-badge-size: var(--hp-type-size-12);
  --hp-type-input-size: var(--hp-type-size-14);
  --hp-type-table-size: var(--hp-type-size-13);
  --hp-type-nav-size: var(--hp-type-size-14);
  --hp-type-price-size: var(--hp-type-size-18);
  --hp-type-error-title-size: var(--hp-type-size-28);

  --hp-type-display-weight: var(--hp-type-weight-extrabold);
  --hp-type-heading-weight: var(--hp-type-weight-bold);
  --hp-type-card-title-weight: var(--hp-type-weight-bold);
  --hp-type-body-weight: var(--hp-type-weight-regular);
  --hp-type-label-weight: var(--hp-type-weight-bold);
  --hp-type-button-weight: var(--hp-type-weight-bold);
  --hp-type-value-weight: var(--hp-type-weight-medium);

  --hp-type-heading-leading: var(--hp-type-h1-leading);
  --hp-type-page-title-leading: var(--hp-type-h2-leading);
  --hp-type-section-title-leading: var(--hp-type-h3-leading);
  --hp-type-card-title-leading: var(--hp-type-h4-leading);
  --hp-type-ui-leading: var(--hp-type-h4-leading);
  --hp-type-body-leading: var(--hp-type-body-role-leading);
  --hp-type-small-role-leading: var(--hp-type-small-leading);
  --hp-type-micro-role-leading: var(--hp-type-micro-leading);
  --hp-type-readable-leading: var(--hp-type-body-role-leading);

  /* Semantic type colors automatically follow the existing light/dark color tokens. */
  --hp-type-color-heading: var(--hp-text-strong);
  --hp-type-color-body: var(--hp-text);
  --hp-type-color-muted: var(--hp-muted);
  --hp-type-color-link: var(--hp-brand);
  --hp-type-color-on-brand: var(--hp-on-brand);

  /* Compatibility aliases used by v96 and older screens. */
  --hp-font: var(--hp-type-family);
  --hp-fs-display: var(--hp-type-display-size);
  --hp-fs-h1: var(--hp-type-size-28);
  --hp-fs-h2: var(--hp-type-page-title-size);
  --hp-fs-h3: var(--hp-type-section-title-size);
  --hp-fs-h4: var(--hp-type-card-title-size);
  --hp-fs-lg: var(--hp-type-body-lg-size);
  --hp-fs-base: var(--hp-type-body-size);
  --hp-fs-sm: var(--hp-type-label-size);
  --hp-fs-xs: var(--hp-type-meta-size);
  --hp-lh-tight: var(--hp-type-heading-leading);
  --hp-lh-ui: var(--hp-type-ui-leading);
  --hp-lh-read: var(--hp-type-readable-leading);
  --hp-fw-regular: var(--hp-type-weight-regular);
  --hp-fw-medium: var(--hp-type-weight-medium);
  --hp-fw-bold: var(--hp-type-weight-bold);
  --hp-fw-black: var(--hp-type-weight-extrabold);
}

/* Compatibility bridge: legacy weight/line-height names kept until old layout CSS is retired. */
:root {
  --hp-type-weight-thin: 200;
  --hp-type-weight-750: 750;
  --hp-type-weight-850: 850;
  --hp-type-leading-em-1-2: 1.2em;
  --hp-type-leading-em-2: 2em;
  --hp-type-leading-em-3: 3em;
  --hp-type-leading-px-110: 110px;
  --hp-type-leading-px-12: 12px;
  --hp-type-leading-px-14: 14px;
  --hp-type-leading-px-15: 15px;
  --hp-type-leading-px-18: 18px;
  --hp-type-leading-px-19: 19px;
  --hp-type-leading-px-20: 20px;
  --hp-type-leading-px-21: 21px;
  --hp-type-leading-px-22: 22px;
  --hp-type-leading-px-23: 23px;
  --hp-type-leading-px-24: 24px;
  --hp-type-leading-px-25: 25px;
  --hp-type-leading-px-26: 26px;
  --hp-type-leading-px-27: 27px;
  --hp-type-leading-px-28: 28px;
  --hp-type-leading-px-30: 30px;
  --hp-type-leading-px-32: 32px;
  --hp-type-leading-px-33: 33px;
  --hp-type-leading-px-34: 34px;
  --hp-type-leading-px-35: 35px;
  --hp-type-leading-px-36: 36px;
  --hp-type-leading-px-37: 37px;
  --hp-type-leading-px-38: 38px;
  --hp-type-leading-px-40: 40px;
  --hp-type-leading-px-41: 41px;
  --hp-type-leading-px-42: 42px;
  --hp-type-leading-px-43: 43px;
  --hp-type-leading-px-44: 44px;
  --hp-type-leading-px-46: 46px;
  --hp-type-leading-px-47: 47px;
  --hp-type-leading-px-48: 48px;
  --hp-type-leading-px-50: 50px;
  --hp-type-leading-px-53: 53px;
  --hp-type-leading-px-55: 55px;
  --hp-type-leading-px-60: 60px;
  --hp-type-leading-px-70: 70px;
  --hp-type-leading-px-72: 72px;
  --hp-type-leading-px-80: 80px;
  --hp-type-leading-rem-1: 1rem;
  --hp-type-leading-rem-1-4: 1.4rem;
  --hp-type-leading-unit-1: 1;
  --hp-type-leading-unit-1-2: 1.2;
  --hp-type-leading-unit-1-222: 1.222;
  --hp-type-leading-unit-1-25: 1.25;
  --hp-type-leading-unit-1-35: 1.35;
  --hp-type-leading-unit-1-4: 1.4;
  --hp-type-leading-unit-1-42857143: 1.42857143;
  --hp-type-leading-unit-1-43: 1.43;
  --hp-type-leading-unit-1-467: 1.467;
  --hp-type-leading-unit-1-5: 1.5;
  --hp-type-leading-unit-1-55: 1.55;
  --hp-type-leading-unit-1-6: 1.6;
  --hp-type-leading-unit-1-625: 1.625;
  --hp-type-leading-unit-1-65: 1.65;
  --hp-type-leading-unit-1-7: 1.7;
  --hp-type-leading-unit-1-75: 1.75;
  --hp-type-leading-unit-1-8: 1.8;
  --hp-type-leading-unit-1-85: 1.85;
  --hp-type-leading-unit-1-9: 1.9;
  --hp-type-leading-unit-1-95: 1.95;
  --hp-type-leading-unit-2: 2;
  --hp-type-leading-unit-2-05: 2.05;
  --hp-type-leading-unit-2-1: 2.1;
}

/* Mobile uses the same seven-step scale. Inputs intentionally use 16px on iOS to prevent focus zoom. */
@media (max-width: 767.98px) {
  :root {
    --hp-type-display-size: var(--hp-type-size-28);
    --hp-type-page-title-size: var(--hp-type-size-22);
    --hp-type-section-title-size: var(--hp-type-size-18);
    --hp-type-card-title-size: var(--hp-type-size-16);
    --hp-type-body-lg-size: var(--hp-type-size-16);
    --hp-type-body-size: var(--hp-type-size-14);
    --hp-type-label-size: var(--hp-type-size-13);
    --hp-type-meta-size: var(--hp-type-size-12);
    --hp-type-caption-size: var(--hp-type-size-12);
    --hp-type-button-size: var(--hp-type-size-14);
    --hp-type-badge-size: var(--hp-type-size-12);
    --hp-type-input-size: var(--hp-type-size-16);
    --hp-type-table-size: var(--hp-type-size-13);
    --hp-type-nav-size: var(--hp-type-size-14);
    --hp-type-price-size: var(--hp-type-size-18);
  --hp-type-error-title-size: var(--hp-type-size-28);
  }
}

/* Context hooks make user/admin/auth independently tunable later without touching page CSS. */
body.hp-user-panel {
  --hp-context-body-size: var(--hp-type-body-size);
  --hp-context-page-title-size: var(--hp-type-page-title-size);
}
body.hp-admin-panel {
  --hp-context-body-size: var(--hp-type-body-size);
  --hp-context-page-title-size: var(--hp-type-page-title-size);
}
body.hp-auth {
  --hp-context-body-size: var(--hp-type-body-size);
  --hp-context-page-title-size: var(--hp-type-page-title-size);
}

/* Semantic utility classes for new and progressively migrated screens. */
.hp-type-display {font-size:var(--hp-type-display-size);font-weight:var(--hp-type-display-weight);line-height:var(--hp-type-heading-leading);color:var(--hp-type-color-heading)}
.hp-type-page-title {font-size:var(--hp-type-page-title-size);font-weight:var(--hp-type-heading-weight);line-height:var(--hp-type-page-title-leading);color:var(--hp-type-color-heading)}
.hp-type-section-title {font-size:var(--hp-type-section-title-size);font-weight:var(--hp-type-heading-weight);line-height:var(--hp-type-section-title-leading);color:var(--hp-type-color-heading)}
.hp-type-card-title {font-size:var(--hp-type-card-title-size);font-weight:var(--hp-type-card-title-weight);line-height:var(--hp-type-card-title-leading);color:var(--hp-type-color-heading)}
.hp-type-body-lg {font-size:var(--hp-type-body-lg-size);font-weight:var(--hp-type-body-weight);line-height:var(--hp-type-body-leading);color:var(--hp-type-color-body)}
.hp-type-body {font-size:var(--hp-type-body-size);font-weight:var(--hp-type-body-weight);line-height:var(--hp-type-body-leading);color:var(--hp-type-color-body)}
.hp-type-label {font-size:var(--hp-type-label-size);font-weight:var(--hp-type-label-weight);line-height:var(--hp-type-small-role-leading)}
.hp-type-meta {font-size:var(--hp-type-meta-size);font-weight:var(--hp-type-body-weight);line-height:var(--hp-type-micro-role-leading);color:var(--hp-type-color-muted)}
.hp-type-caption {font-size:var(--hp-type-caption-size);font-weight:var(--hp-type-body-weight);line-height:var(--hp-type-micro-role-leading);color:var(--hp-type-color-muted)}
.hp-type-button {font-size:var(--hp-type-button-size);font-weight:var(--hp-type-button-weight);line-height:var(--hp-type-leading-none)}
.hp-type-badge {font-size:var(--hp-type-badge-size);font-weight:var(--hp-type-label-weight);line-height:var(--hp-type-micro-role-leading)}
.hp-type-value {font-size:var(--hp-type-body-size);font-weight:var(--hp-type-value-weight);line-height:var(--hp-type-ui-leading)}
.hp-type-price {font-size:var(--hp-type-price-size);font-weight:var(--hp-type-heading-weight);line-height:var(--hp-type-heading-leading)}
.hp-type-mono {font-family:var(--hp-type-family-mono)}

/* Core component roles. These selectors intentionally use the semantic tokens. */
body.hp-panel, body.hp-auth {font-family:var(--hp-type-family)}
body.hp-panel {font-size:var(--hp-type-body-size);line-height:var(--hp-type-body-leading)}
.hp-pagehead__title,.hp-page-title,.hp-authcard__title {font-size:var(--hp-type-page-title-size);font-weight:var(--hp-type-heading-weight);line-height:var(--hp-type-page-title-leading)}
.hp-card__title,.hp-section-title,.hp-panel-title {font-size:var(--hp-type-card-title-size);font-weight:var(--hp-type-card-title-weight);line-height:var(--hp-type-card-title-leading)}
.hp-label,.hp-field>label {font-size:var(--hp-type-label-size);font-weight:var(--hp-type-label-weight)}
.hp-btn {font-size:var(--hp-type-button-size);font-weight:var(--hp-type-button-weight)}
.hp-badge {font-size:var(--hp-type-badge-size);font-weight:var(--hp-type-label-weight)}
.hp-input,.hp-select,.hp-textarea {font-size:var(--hp-type-input-size)}
.hp-table,.hp-table td,.hp-table th {font-size:var(--hp-type-table-size)}

/* Third-party/legacy controls are normalized at the theme boundary instead of editing vendor files. */
body.hp-panel .form-control,
body.hp-panel select,
body.hp-panel textarea,
body.hp-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.hp-auth .form-control,
body.hp-auth select,
body.hp-auth textarea,
body.hp-auth input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  font-family:var(--hp-type-family);
}
@media (max-width: 767.98px) {
  body.hp-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.hp-panel select,
  body.hp-panel textarea,
  body.hp-auth input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.hp-auth select,
  body.hp-auth textarea {font-size:var(--hp-type-input-size)}
}




/* v98 theme-boundary normalization
   Keeps Bootstrap/legacy components on the same seven-step text scale without editing vendor sources. */
body.hp-panel h5, body.hp-auth h5 {font-size:var(--hp-type-size-14);font-weight:var(--hp-type-weight-bold);line-height:1.8}
body.hp-panel h6, body.hp-auth h6 {font-size:var(--hp-type-size-13);font-weight:var(--hp-type-weight-bold);line-height:1.8}
body.hp-panel small, body.hp-panel .small, body.hp-auth small, body.hp-auth .small {font-size:var(--hp-type-size-13)}
body.hp-panel .btn, body.hp-auth .btn, body.hp-panel button, body.hp-auth button {font-size:var(--hp-type-size-14)}
body.hp-panel .badge, body.hp-panel .label, body.hp-auth .badge, body.hp-auth .label {font-size:var(--hp-type-size-12)}
body.hp-panel .table, body.hp-panel table, body.hp-panel .table td, body.hp-panel .table th {font-size:var(--hp-type-size-13)}
body.hp-panel .breadcrumb, body.hp-panel .pagination, body.hp-panel .dropdown-menu {font-size:var(--hp-type-size-13)}
body.hp-panel .nav, body.hp-panel .navbar, body.hp-panel .sidebar, body.hp-panel .hp-sidebar {font-size:var(--hp-type-size-14)}
body.hp-panel .modal-title {font-size:var(--hp-type-size-16);font-weight:var(--hp-type-weight-bold);line-height:1.8}
body.hp-panel .form-control, body.hp-panel select, body.hp-panel textarea, body.hp-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.hp-auth .form-control, body.hp-auth select, body.hp-auth textarea, body.hp-auth input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {font-size:var(--hp-type-size-14)}
@media (max-width:767.98px){
  body.hp-panel .form-control, body.hp-panel select, body.hp-panel textarea, body.hp-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.hp-auth .form-control, body.hp-auth select, body.hp-auth textarea, body.hp-auth input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {font-size:var(--hp-type-size-16)}
}



/* v98 third-party UI normalization
   Vendor source files stay untouched; visible UI chrome is normalized here. */
body.hp-panel .swal-title {font-family:var(--hp-type-family);font-size:var(--hp-type-size-22);line-height:1.6}
body.hp-panel .swal-text {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14);line-height:1.8}
body.hp-panel .swal-button {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14)}
body.hp-panel .selectric, body.hp-panel .selectric-items, body.hp-panel .selectric-items li {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14)}
body.hp-panel .dropify-wrapper, body.hp-panel .dropify-wrapper .dropify-message p {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14)}
body.hp-panel .dropify-wrapper .dropify-error, body.hp-panel .dropify-wrapper .file-icon p {font-size:var(--hp-type-size-12)}
body.hp-panel .note-editor, body.hp-panel .note-toolbar, body.hp-panel .note-popover, body.hp-panel .note-dialog {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14)}
body.hp-panel .note-editor .note-status-output, body.hp-panel .note-popover .note-palette-title {font-size:var(--hp-type-size-12)}
body.hp-panel .note-editor .note-editable, body.hp-panel .note-editor .note-codable {font-size:var(--hp-type-size-14);line-height:1.8}
body.hp-panel .note-dropzone .note-dropzone-message, body.hp-panel .note-image-dialog .note-dropzone {font-size:var(--hp-type-size-28)}
body.hp-panel .ct-label {font-family:var(--hp-type-family);font-size:var(--hp-type-size-12)}
body.hp-panel .slicknav_menu, body.hp-panel .slicknav_nav {font-family:var(--hp-type-family);font-size:var(--hp-type-size-14)}

/* Compact 7-step hierarchy — v98
   All textual typography in Hami Pardakht maps to 12/13/14/16/18/22/28px.
   Icon geometry and non-text layout measurements are intentionally outside this scale. */
body.hp-panel h1, body.hp-auth h1 {font-size:var(--hp-type-size-28);font-weight:var(--hp-type-weight-extrabold);line-height:1.5}
body.hp-panel h2, body.hp-auth h2 {font-size:var(--hp-type-size-22);font-weight:var(--hp-type-weight-bold);line-height:1.6}
body.hp-panel h3, body.hp-auth h3 {font-size:var(--hp-type-size-18);font-weight:var(--hp-type-weight-bold);line-height:1.7}
body.hp-panel h4, body.hp-auth h4 {font-size:var(--hp-type-size-16);font-weight:var(--hp-type-weight-bold);line-height:1.8}
body.hp-panel p, body.hp-auth p {line-height:1.8}