/* Copied from ../../app.wxss and adapted for browser preview.
   The `page` selector in WeChat Mini Program is the root element; here
   we scope tokens to `:root` so they cascade to everything. */
:root {
  --color-primary: #8a4b39;
  --color-primary-container: #a76250;
  --color-primary-fixed: #ffdbd1;
  --color-primary-fixed-dim: #ffb5a1;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #fffbff;
  --color-on-primary-fixed: #390c02;
  --color-on-primary-fixed-variant: #703626;

  --color-secondary: #56642b;
  --color-secondary-container: #d6e7a1;
  --color-secondary-fixed: #d9eaa3;
  --color-secondary-fixed-dim: #bdce89;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #5a682f;
  --color-on-secondary-fixed: #161f00;
  --color-on-secondary-fixed-variant: #3e4c16;

  --color-tertiary: #735c00;
  --color-tertiary-container: #cca72f;
  --color-tertiary-fixed: #ffe088;
  --color-tertiary-fixed-dim: #e9c349;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #4e3d00;
  --color-on-tertiary-fixed: #241a00;
  --color-on-tertiary-fixed-variant: #574500;

  --color-background: #fff8ef;
  --color-surface: #fff8ef;
  --color-surface-bright: #fff8ef;
  --color-surface-dim: #e1d9cb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fbf3e4;
  --color-surface-container: #f5edde;
  --color-surface-container-high: #efe7d9;
  --color-surface-container-highest: #e9e2d3;
  --color-surface-variant: #e9e2d3;
  --color-surface-tint: #8d4d3b;
  --color-on-surface: #1e1b13;
  --color-on-surface-variant: #53433f;
  --color-on-background: #1e1b13;

  --color-outline: #86736e;
  --color-outline-variant: #d8c2bc;
  --color-inverse-surface: #343026;
  --color-inverse-on-surface: #f8f0e1;
  --color-inverse-primary: #ffb5a1;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;
}

/* body replaces `page` — our root scroll container */
body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: "Noto Sans", "Manrope", "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px; /* 28rpx → 14px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.font-headline,
.font-serif {
  font-family: "Noto Serif", "Songti SC", "STSong", serif;
  letter-spacing: -0.25px;
  font-weight: 400;
}

.font-body,
.font-sans {
  font-family: "Manrope", "PingFang SC", -apple-system, sans-serif;
  font-weight: 400;
}

.font-label {
  font-family: "Manrope", "PingFang SC", -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.08em; }
.tracking-wider { letter-spacing: 0.12em; }
.tracking-widest { letter-spacing: 0.2em; }
.tracking-tight { letter-spacing: -0.25px; }

.soft-shadow {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.terracotta-glow {
  background: linear-gradient(135deg, #8a4b39 0%, #a76250 100%);
  color: var(--color-on-primary);
}

.silk-gradient {
  background: linear-gradient(135deg, #fff8ef 0%, #fbf3e4 100%);
}

.page-scroll {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-surface);
  box-sizing: border-box;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chip-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chip-secondary {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.chip-tertiary {
  background: var(--color-tertiary-fixed);
  color: var(--color-on-tertiary-fixed-variant);
}

.chip-muted {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8a4b39 0%, #a76250 100%);
  color: var(--color-on-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Interactive feedback — approximates WeChat's hover-class="press" */
[data-press]:active {
  opacity: 0.85;
  transform: scale(0.97);
  transition: transform 0.1s ease;
}