@import url("../assets/fonts/noto-sans-sc/noto-sans-sc.css?v=2.364");
@import url("../assets/fonts/noto-sans-tc/noto-sans-tc.css?v=2.364");
@import url("../assets/fonts/noto-sans-lao/noto-sans-lao.css?v=2.364");
@import url("../assets/fonts/noto-sans-thai/noto-sans-thai.css?v=2.364");

/* XiaoM V2.364: one cross-platform typography system for every public surface. */
:root {
  --xm-font-sans:
    "Noto Sans SC",
    "Noto Sans Lao",
    "Noto Sans Thai",
    "Noto Sans TC",
    sans-serif;
  --xm-font-traditional-chinese: "Noto Sans TC", "Noto Sans SC", sans-serif;
  --xm-font-lao: "Noto Sans Lao", "Noto Sans SC", sans-serif;
  --xm-font-thai: "Noto Sans Thai", "Noto Sans SC", sans-serif;
  --xm-font-brand: Futura, "Century Gothic", sans-serif;
  --xm-font-display: var(--xm-font-sans);
  --xm-font-slogan: var(--xm-font-display);
  --xm-slogan-color: #475467;
  --xm-font-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --xm-font-ui: var(--xm-font-sans);
  --xm-font-weight-regular: 400;
  --xm-font-weight-medium: 500;
  --xm-font-weight-semibold: 600;
  --xm-type-text: #273247;
  --xm-type-muted: #667085;
  --xm-type-soft: #98a2b3;
}

html[data-language="lo"],
html[lang^="lo"] {
  --xm-font-ui: var(--xm-font-lao);
}

html[data-language="th"],
html[lang^="th"] {
  --xm-font-ui: var(--xm-font-thai);
}

html[data-language="zh-Hant"],
html[lang="zh-Hant"],
html[lang^="zh-TW"],
html[lang^="zh-HK"] {
  --xm-font-ui: var(--xm-font-traditional-chinese);
}

html,
body,
:where(
  .shop-page,
  .claim-shop-page,
  .shop-editor-page,
  .site-analytics-page,
  .map-custom-page,
  .lounge-app,
  .cafe-app,
  .mobile-prototype
) {
  font-family: var(--xm-font-ui) !important;
  font-synthesis: none;
  font-weight: var(--xm-font-weight-regular) !important;
}

body {
  font-weight: var(--xm-font-weight-regular);
}

:where(button, input, textarea, select, option) {
  font-family: var(--xm-font-ui) !important;
  font-synthesis: none;
}

body :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  button,
  input,
  textarea,
  select,
  option,
  label,
  span,
  strong,
  b,
  small,
  time,
  em,
  li,
  dt,
  dd,
  th,
  td,
  summary,
  legend,
  figcaption
) {
  font-family: var(--xm-font-ui) !important;
  font-synthesis: none;
  font-weight: var(--xm-font-weight-regular) !important;
}

/* Regular: body copy, descriptions and secondary information. */
body :where(
  p,
  small,
  time,
  label,
  input,
  textarea,
  select,
  option,
  dd,
  figcaption,
  .profile-feed-line,
  .shop-feed-line,
  .card-location,
  .card-description,
  .waterfall-card-meta,
  .need-feed-meta,
  .owner-name-only
) {
  font-weight: var(--xm-font-weight-regular) !important;
}

/* Medium: navigation, controls, chips and compact labels. */
body :where(
  button,
  [role="button"],
  .chip,
  .filter-chip,
  .auth-chip,
  .text-button,
  .mini-button,
  .primary-button,
  .secondary-button,
  .ghost-button,
  .version-badge,
  .install-app-badge,
  .home-exchange-label,
  .home-exchange-swap,
  .home-support-button,
  .bottom-nav-item,
  .type-badge,
  .category-badge,
  .sponsored-badge,
  .level-badge,
  .profile-feed-stats span
) {
  font-weight: var(--xm-font-weight-medium) !important;
}

/* Semibold: names, headings, prices and primary numeric values. */
body :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b,
  .card-price,
  .price-inline,
  .need-feed-budget,
  .home-exchange-value,
  .profile-card-name,
  .shop-card-name,
  .shop-feed-identity strong,
  .compact-owner-row strong,
  .profile-feed-card-top strong
) {
  font-weight: var(--xm-font-weight-semibold) !important;
}

/* Keep the approved Domain Tile roles while using the same hosted outlines. */
body :where(
  .brand-name,
  .inner-page-brand strong,
  .auth-brand,
  .card-detail-brand,
  .records-brand,
  .centered-brand,
  .dashboard-header .brand strong,
  .field-scan-brand strong,
  .offline-logo,
  .activity-admin-brand strong,
  .xiaom-brand strong
) {
  font-family: var(--xm-font-brand) !important;
  font-weight: var(--xm-font-weight-medium) !important;
}

body :where(
  .brand-dot,
  .offline-logo span,
  .activity-admin-brand strong span,
  .xiaom-brand b
) {
  font-family: var(--xm-font-brand) !important;
  font-weight: var(--xm-font-weight-semibold) !important;
}

body .home-brand-slogan-en {
  font-family: var(--xm-font-display) !important;
  font-weight: var(--xm-font-weight-regular) !important;
}

body .home-brand-slogan-cn,
body .inner-page-brandline {
  font-family: var(--xm-font-slogan) !important;
  font-weight: var(--xm-font-weight-regular) !important;
  color: var(--xm-slogan-color) !important;
}

body .inner-page-brandline {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  padding-left: 0;
  overflow: hidden;
  font-size: 10px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body :where(
  code,
  pre,
  kbd,
  samp,
  .home-map-board-coordinate,
  .home-map-board-coordinate *,
  .code,
  [data-copy-coordinate]
) {
  font-family: var(--xm-font-mono) !important;
  font-weight: var(--xm-font-weight-regular) !important;
}

/* Homepage roles mirror the approved local typography comparison. */
body :where(.version-badge, .install-app-badge, .home-exchange-label, .home-support-button) {
  font-size: 10.5px !important;
  font-weight: var(--xm-font-weight-medium) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body :where(.home-exchange-cny, .home-exchange-lak, .home-exchange-swap) {
  font-size: 10.5px !important;
  font-weight: var(--xm-font-weight-medium) !important;
  line-height: 1 !important;
}

body .home-exchange-value {
  font-size: 12.5px !important;
  font-weight: var(--xm-font-weight-semibold) !important;
  line-height: 1 !important;
}

body .planned-home-shell .home-search-row .search-action-card input {
  font-size: 14px !important;
  font-weight: var(--xm-font-weight-regular) !important;
}

body .planned-home-shell .home-search-row .search-action-card input::placeholder {
  color: var(--xm-type-soft) !important;
  font-weight: var(--xm-font-weight-regular) !important;
  opacity: 1;
}

body .planned-home-shell .home-search-submit {
  font-size: 13px !important;
  font-weight: var(--xm-font-weight-semibold) !important;
}

body .planned-home-shell .filters .chip {
  font-size: 12px !important;
  font-weight: var(--xm-font-weight-medium) !important;
}

body :where(
  .compact-home-head h2,
  .compact-owner-row strong,
  .feed-list .card-body h3,
  .profile-feed-card-top strong,
  .need-feed-owner strong,
  .need-feed-body h3,
  .need-feed-budget,
  .shop-feed-identity strong,
  .price-inline
) {
  color: var(--xm-type-text) !important;
  font-weight: var(--xm-font-weight-semibold) !important;
  letter-spacing: 0 !important;
}

body :where(.profile-feed-line, .shop-feed-line, .need-feed-body p, .card-location, .card-distance) {
  color: var(--xm-type-muted) !important;
  font-weight: var(--xm-font-weight-regular) !important;
}

body :where(.owner-name-only, .need-feed-owner small, .need-feed-label-row time, .need-feed-meta) {
  color: var(--xm-type-soft) !important;
  font-weight: var(--xm-font-weight-regular) !important;
}

body .bottom-nav-item {
  font-family: var(--xm-font-ui) !important;
  font-size: 11px !important;
  font-weight: var(--xm-font-weight-regular) !important;
}