/* HiHiro multilingual typography system v1
   Script-specific UI faces with consistent product rhythm across 9 languages. */
/* Approved Google font families load asynchronously through site-prefs.js. */

:root{
  --font-body:"Inter","Segoe UI",Arial,sans-serif;
  --font-title:"Manrope","Inter","Segoe UI",Arial,sans-serif;
  --font-service:"Inter","Segoe UI",Arial,sans-serif;
  --font-display:"Manrope","Inter","Segoe UI",Arial,sans-serif;
}

html:is([lang="en"],[lang="es"],[lang="fr"],[lang="pt"],[lang="ru"]){
  --font-body:"Inter","Segoe UI",Arial,sans-serif;
  --font-title:"Manrope","Inter","Segoe UI",Arial,sans-serif;
  --font-service:"Inter","Segoe UI",Arial,sans-serif;
  --font-display:"Manrope","Inter","Segoe UI",Arial,sans-serif;
}
html[lang="fa"]{
  --font-body:"Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif;
  --font-title:"Estedad","Vazirmatn",Tahoma,sans-serif;
  --font-service:"Estedad","Vazirmatn",Tahoma,sans-serif;
  --font-display:"Lalezar","Estedad","Vazirmatn",Tahoma,sans-serif;
}
html[lang="ar"]{
  --font-body:"Tajawal","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  --font-title:"Cairo","Tajawal",Tahoma,Arial,sans-serif;
  --font-service:"Tajawal","Cairo",Tahoma,Arial,sans-serif;
  --font-display:"Reem Kufi","Cairo","Tajawal",Arial,sans-serif;
}
html[lang="hi"]{
  --font-body:"Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;
  --font-title:"Tiro Devanagari Hindi","Noto Sans Devanagari","Nirmala UI",sans-serif;
  --font-service:"Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;
  --font-display:"Tiro Devanagari Hindi","Noto Sans Devanagari",sans-serif;
}
html[lang="zh"]{
  --font-body:"Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --font-title:"ZCOOL XiaoWei","Noto Sans SC","Microsoft YaHei",serif;
  --font-service:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  --font-display:"ZCOOL XiaoWei","Noto Sans SC","Microsoft YaHei",serif;
}

:where(body,button,input,textarea,select){font-family:var(--font-body)}
:where(h1,h2,h3,h4,h5,h6,.panel-head h2,.card-head h3,.login-card-head h2,.products-section-head h2){font-family:var(--font-title)}
:where(.service-item,.service-group-title,.service-selected-name,.service-catalog button,[data-service],.account-nav-item b,.owner-nav-item b){font-family:var(--font-service)}
:where(.mobile-service-message strong,.products-hero-content h1,.hero h1,.login-brand-panel h1,.request-gate h2,.not-found h1){font-family:var(--font-display)}

/* Brand and machine-oriented Latin labels stay visually stable in every locale. */
:where(.brand,.brand-lockup,.brand-word,.service-brand,.owner-mode,[data-no-translate] .eyebrow){
  font-family:"Inter","Segoe UI",Arial,sans-serif;
}

/* Script-aware rhythm. Avoid Latin tracking rules on connected or complex scripts. */
html[lang="fa"] :where(h1,h2,h3,h4,h5,h6,.mobile-service-message strong,.products-section-head h2,.products-hero-content h1,.login-brand-panel h1,.login-card-head h2){
  letter-spacing:-.012em;
  line-height:1.28;
}
html[lang="ar"] :where(h1,h2,h3,h4,h5,h6,.mobile-service-message strong,.products-section-head h2,.products-hero-content h1,.login-brand-panel h1,.login-card-head h2){
  letter-spacing:0;
  line-height:1.32;
}
html[lang="hi"] :where(h1,h2,h3,h4,h5,h6,.mobile-service-message strong,.products-section-head h2,.products-hero-content h1,.login-brand-panel h1,.login-card-head h2){
  letter-spacing:0;
  line-height:1.3;
}
html[lang="zh"] :where(h1,h2,h3,h4,h5,h6,.mobile-service-message strong,.products-section-head h2,.products-hero-content h1,.login-brand-panel h1,.login-card-head h2){
  letter-spacing:.01em;
  line-height:1.28;
}

/* Body copy needs slightly more air in Arabic-derived and Indic scripts. */
html:is([lang="fa"],[lang="ar"],[lang="hi"]) :where(p,li,label,input,textarea,button,.menu-item,.language-option){
  line-height:1.72;
}
html[lang="zh"] :where(p,li,label,input,textarea,button,.menu-item,.language-option){
  line-height:1.65;
}

/* UI weights: avoid synthetic ultra-heavy text in scripts where it becomes visually dense. */
html:is([lang="fa"],[lang="ar"],[lang="hi"],[lang="zh"]) :where(
  .menu-item,.setting-choice,.language-trigger,.language-option-name,
  .service-nav a,.service-group-title b,.catalog-head b,
  .owner-nav-item b,.owner-button,.button,.login-tab
){
  font-weight:700;
}
html[lang="fa"] :where(h1,h2,h3,.mobile-service-message strong){font-weight:750}
html[lang="ar"] :where(h1,h2,h3,.mobile-service-message strong){font-weight:700}
html[lang="hi"] :where(h1,h2,h3,.mobile-service-message strong){font-weight:700}
html[lang="zh"] :where(h1,h2,h3,.mobile-service-message strong){font-weight:700}

/* Data-heavy surfaces keep columns stable. */
:where(.token-quote-value,.nav-count,.status-pill,.soft-badge,[data-numeric]){
  font-variant-numeric:tabular-nums;
}

/* Preserve readable mixed-script technical text. */
:where(code,pre,kbd,samp){
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}


/* HIHIRO_TYPOGRAPHY_ROLES_V2
   Display fonts are intentionally limited to large brand/marketing surfaces. */
html[lang="fa"] :where(.mobile-service-message strong,.products-hero-content h1,.hero h1,.login-brand-panel h1,.request-gate h2,.not-found h1){
  font-weight:400;
  letter-spacing:0;
  line-height:1.24;
}
html[lang="ar"] :where(.mobile-service-message strong,.products-hero-content h1,.hero h1,.login-brand-panel h1,.request-gate h2,.not-found h1){
  font-weight:600;
  letter-spacing:0;
  line-height:1.3;
}
html[lang="hi"] :where(.mobile-service-message strong,.products-hero-content h1,.hero h1,.login-brand-panel h1,.request-gate h2,.not-found h1){
  font-weight:400;
  letter-spacing:0;
  line-height:1.3;
}
html[lang="zh"] :where(.mobile-service-message strong,.products-hero-content h1,.hero h1,.login-brand-panel h1,.request-gate h2,.not-found h1){
  font-weight:400;
  letter-spacing:.015em;
  line-height:1.3;
}

/* Service names should be distinctive but calmer than campaign/display text. */
html[lang="fa"] :where(.service-group-title,.service-item,.service-selected-name){font-weight:700}
html[lang="ar"] :where(.service-group-title,.service-item,.service-selected-name){font-weight:700}
html[lang="hi"] :where(.service-group-title,.service-item,.service-selected-name){font-weight:600}
html[lang="zh"] :where(.service-group-title,.service-item,.service-selected-name){font-weight:600}