/* ==========================================================================
   壹壹缮物阁 H5 站点 - 品牌色彩与字体系统
   奢侈品皮具养护 / 回收 / 二手销售
   色调方向：黑色基底 + 金色品牌色（luxury/refined）
   ========================================================================== */

/* ---- 品牌色阶（金色单一品牌色） ---- */
:root {
  --brand-gold-50: #fbf7ee;
  --brand-gold-100: #f5ecd3;
  --brand-gold-200: #e9d6a3;
  --brand-gold-300: #dcbd72;
  --brand-gold-400: #cda34a;
  --brand-gold-500: #b8893a;   /* 主品牌金色 */
  --brand-gold-600: #9a6f2e;
  --brand-gold-700: #7a5624;
  --brand-gold-800: #5c4019;
  --brand-gold-900: #3d2a10;
}

/* ---- 语义令牌 ---- */
:root {
  /* 背景与表面 */
  --brand-background: #0e0e10;
  --brand-foreground: #f4f1ea;
  --brand-card: #17171a;
  --brand-card-foreground: #ece8df;
  --brand-popover: #1c1c20;
  --brand-popover-foreground: #ece8df;

  /* 品牌主色 */
  --brand-primary: #cda34a;
  --brand-primary-foreground: #1a1206;

  /* 次级文字 / 静音 */
  --brand-muted: #232328;
  --brand-muted-foreground: #a89f8d;

  /* 描边与输入 */
  --brand-border: #2a2a2f;
  --brand-input: #2a2a2f;
  --brand-ring: #cda34a;

  /* 圆角阶梯 */
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 16px;

  /* 状态色（仅用于真实状态） */
  --state-success: #5a8a5a;
  --state-warning: #c9a23a;
  --state-error: #b5544a;
  --state-info: #6a8aa8;
}

/* ---- 排版字体栈 ---- */
:root {
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-body: "PingFang SC", "Noto Sans SC", "HarmonyOS Sans", system-ui, sans-serif;
  --font-latin: "Cormorant Garamond", "Inter", system-ui, sans-serif;
}

/* ---- 根框架与基础重置 ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--brand-background); color: var(--brand-foreground); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.5; -webkit-overflow-scrolling: touch; overflow-x: hidden; width: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ---- 图标尺寸工具类 ---- */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-md { width: 1rem; height: 1rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.icon-xl { width: 1.5rem; height: 1.5rem; }

/* ---- 容器 ---- */
.page-container { max-width: 28rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* ---- 段落标题（通用） ---- */
.section-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--brand-foreground); letter-spacing: 0.05em; }
.section-subheading { font-size: 0.8125rem; color: var(--brand-muted-foreground); margin-top: 0.375rem; line-height: 1.5; }

/* ---- 分隔线（通用） ---- */
.section-divider { border-top: 1px solid var(--brand-border); margin-top: 2.5rem; margin-bottom: 2rem; }

/* ---- 页脚（通用） ---- */
.site-footer { padding: 1.5rem 0 2rem; text-align: center; }
.footer-brand { font-family: var(--font-display); font-size: 1rem; color: var(--brand-muted-foreground); letter-spacing: 0.1em; }
.footer-copy { font-size: 0.6875rem; color: var(--brand-muted-foreground); margin-top: 0.5rem; opacity: 0.6; }

/* ---- 底部导航（通用，强制固定在手机屏幕视口底部） ---- */
.bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; z-index: 9999 !important; width: 100% !important; height: calc(4rem + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; border-top: 1px solid var(--brand-border); background: var(--brand-card); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-position: fixed; }
.bottom-nav-inner { width: 100%; max-width: 28rem; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(5, 1fr); height: 100%; }
.bottom-nav-item { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; padding: 0 0.25rem; height: 100%; font-size: 0.6875rem; line-height: 1; white-space: nowrap; color: var(--brand-muted-foreground); transition: color 0.15s; }
.bottom-nav-item:hover { color: var(--brand-foreground); }
.bottom-nav-item:active { color: var(--brand-primary); }
.bottom-nav-item:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.bottom-nav-item.is-active { color: var(--brand-primary); font-weight: 600; }
.bottom-nav-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ---- 底部留白（通用） ---- */
.page-bottom-spacer { height: calc(5rem + env(safe-area-inset-bottom, 0px)); }