/* tokens.css — 由 app.wxss 机械转换（rpx→px×0.5，page{}→.mp-page） */
/* app.wxss — 设计令牌（SPEC §2）+ 通用样式类 */

/* EW-CN 编号/数字专用字体：内嵌可变 Oswald（类 DIN 风格），全平台一致渲染，
   不再依赖 iOS 专有的 DIN Alternate，也不会在 Windows/Android 退化成 Courier。
   unicode-range 限定 ASCII + ¥，中文不受该字体影响。 */
@font-face {
  font-family: 'EwDIN';
  src: url('../assets/fonts/oswald-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A5;
}

.mp-page {
  /* 色彩（PRD 3.2） */
  --bg-deep: #0B0D10;        /* 深空黑-主背景 */
  --bg-card: #12151B;        /* 深空黑-卡片 */
  --bg-elevated: #1A1F27;    /* 浮层/输入框底 */
  --brand-orange: #E45A1B;   /* 火星橙-主按钮/选中/报名 */
  --brand-blue: #2C71E8;     /* 电光蓝-链接/定位/服务 */
  --brand-gold: #D99A2B;     /* 徽章金-核心会员/稀有编号 */
  --text-primary: #F4F2EA;   /* 舱外白-深色背景主文字 */
  --text-secondary: #9AA3AF; /* 次级信息 */
  --text-tertiary: #67707C;  /* 功能灰-弱提示 */
  --divider: #232A34;        /* 分割线/边框 */
  --success: #2FA86E;
  --danger: #D64541;
  --light-bg: #F4F2EA;       /* 浅色阅读区背景（社区阅读页） */
  /* 尺寸（PRD 3.4，375px 基准） */
  --radius-card: 14px;      /* 常规卡片圆角 14px */
  --radius-vip: 20px;       /* 会员/编号卡 20px */
  --radius-btn: 12px;       /* 按钮 12px */
  --space-page: 16px;       /* 页面左右安全边距 16px */
  --space-card: 12px;       /* 卡片间距 12px */
  --space-section: 24px;    /* 模块间距 24px */
  --btn-height: 48px;       /* 主按钮 48px */

  background: var(--bg-deep);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- 按钮 ---------- */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-gold));
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
}
.btn-primary::after { border: none; }
.btn-primary.btn-hover, .btn-primary:active { opacity: 0.85; }
.btn-primary[disabled] {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}

.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--brand-orange);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  border: 1px solid var(--brand-orange);
}
.btn-secondary::after { border: none; }
.btn-secondary:active { background: rgba(228, 90, 27, 0.12); }

.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  border-radius: var(--radius-btn);
  background: var(--danger);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  border: none;
}
.btn-danger::after { border: none; }
.btn-danger:active { opacity: 0.85; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 0.5px solid var(--divider);
  padding: 14px;
}

/* ---------- 胶囊标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 499.5px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 0.5px solid var(--divider);
}
.tag-orange {
  color: var(--brand-orange);
  background: rgba(228, 90, 27, 0.14);
  border-color: rgba(228, 90, 27, 0.45);
}
.tag-blue {
  color: var(--brand-blue);
  background: rgba(44, 113, 232, 0.14);
  border-color: rgba(44, 113, 232, 0.45);
}
.tag-gold {
  color: var(--brand-gold);
  background: rgba(217, 154, 43, 0.14);
  border-color: rgba(217, 154, 43, 0.45);
}

/* ---------- 编号数字（内嵌 Oswald，全平台一致的 DIN 风格） ---------- */
.text-num {
  font-family: 'EwDIN', 'DIN Alternate', 'Bahnschrift', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ---------- 底部安全区 ---------- */
.safe-bottom {
  padding-bottom: calc(var(--mp-safe-bottom) + 12px);
}

/* ---------- 沉浸式顶部导航容器（navigationStyle: custom 配套） ---------- */
.page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(11, 13, 16, 0.92) 70%, rgba(11, 13, 16, 0.75) 100%);
  border-bottom: 0.5px solid var(--divider);
}
.page-nav .page-nav-status {
  /* 状态栏占位，高度由页面通过 store.getNavHeight() 内联 style 设置 */
  width: 100%;
}
.page-nav .page-nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-page);
  position: relative;
}
.page-nav .page-nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-nav .page-nav-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
}

/* ---------- 深空风封面渐变占位（SPEC §7，cover 索引 0-5） ---------- */
/* 0 轨道橙 / 1 星环蓝 / 2 熔岩 / 3 极光 / 4 金属 / 5 夜幕 */
.cover-theme-0 {
  background: linear-gradient(135deg, var(--brand-orange) 0%, rgba(228, 90, 27, 0.55) 45%, var(--bg-card) 100%);
}
.cover-theme-1 {
  background: linear-gradient(135deg, var(--brand-blue) 0%, rgba(44, 113, 232, 0.5) 45%, var(--bg-card) 100%);
}
.cover-theme-2 {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-gold) 50%, rgba(214, 69, 65, 0.65) 100%);
}
.cover-theme-3 {
  background: linear-gradient(135deg, var(--brand-blue) 0%, rgba(47, 168, 110, 0.7) 55%, var(--bg-elevated) 100%);
}
.cover-theme-4 {
  background: linear-gradient(135deg, var(--brand-gold) 0%, rgba(154, 163, 175, 0.6) 55%, var(--bg-card) 100%);
}
.cover-theme-5 {
  background: linear-gradient(160deg, var(--bg-elevated) 0%, rgba(44, 113, 232, 0.35) 55%, var(--bg-deep) 100%);
}

/* 头像色块（SPEC §7：圆形色块 + 昵称首字，背景色由 avatarColor(userId) 内联 style 传入） */
.avatar-block {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  font-weight: 600;
  flex: none;
}

/* ---------- 字体规范辅助（PRD 3.4） ---------- */
.text-page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.text-section-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.text-body { font-size: 14px; color: var(--text-primary); }
.text-aux { font-size: 12px; color: var(--text-tertiary); }