/* 组件基座 —— 全局重置与页面容器。
   规则：本文件与所有组件样式**只允许**使用 design-system/dist/tokens.css 里的 var(--*)。
   禁止任何硬编码色值、字号、间距、圆角、阴影。这是「Figma 与 HTML 完全一致」能被程序化校验的前提。
   校验方式见 tools/check_token_only.py。 */

/* ==== 重置（小程序端不适用，仅 HTML 原型需要）==== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ★ 自定义元素默认 display:inline —— width/height/margin 全部不生效。
   之前各组件的根元素都放在 flex 容器（.mzh-phone）里，被 flex item
   规则 blockify 才侥幸正常。★ 首页把导航挪进 .mzh-home__scroll
   （display:block）后 nav 立刻塌成 0×0，整页错位 189px。
   这里统一 blockify，从根上消除这类「换容器就崩」的问题。 */
mzh-nav,
mzh-master-card,
mzh-scene-grid,
mzh-banner,
mzh-quick-grid,
mzh-section-header,
mzh-filter-tags,
mzh-case-card,
mzh-booking,
mzh-tab-bar,
mzh-fab,
mzh-product-group,
mzh-page-title,
mzh-tutorial-banner,
mzh-booking-hero,
mzh-booking-form,
mzh-rules-text,
mzh-dialog-success,
mzh-mine-bg,
mzh-member-card,
mzh-icon-menu,
mzh-case-nav,
mzh-case-list,
mzh-case-detail,
mzh-store-detail,
mzh-review-card,
mzh-statusbar {
  display: block;
}

body {
  margin: 0;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: var(--typography-body-font-size);
  /* 行高 = 字号 + 8 */
  line-height: var(--typography-body-line-height);
  /* 字体来自 token 真源（规范：调用系统 → PingFang SC）。
     后备只允许通用族关键字，不得写具体字体名 —— 否则跨端会跑偏。 */
  font-family: var(--typography-family-base), sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ==== PageContainer：页面内容容器 ==== */
.mzh-page {
  max-width: var(--layout-page-max-width);
  min-height: 100%;
  margin: 0 auto;
  background: var(--color-bg-secondary);
  padding-bottom: var(--spacing-md);
}

.mzh-page__body {
  padding: 0 var(--spacing-md);
}

/* 区块之间的垂直节奏 */
.mzh-page__section + .mzh-page__section {
  margin-top: var(--spacing-lg);
}

/* ==== 通用工具类：仅组合 token，不引入新值 ==== */
.mzh-u-hidden {
  display: none !important;
}

.mzh-u-inverse {
  color: var(--color-text-inverse);
}

.mzh-u-muted {
  color: var(--color-text-secondary);
}

.mzh-u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}