/* mamiprinter-web · Base · v3
 * Reset + 晨光暖底 + Fraunces/Plus Jakarta Sans typography
 */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════
 * Fraunces variable axes fallback
 *
 * 默认假设浏览器支持 variable font + custom axes (SOFT / WONK);
 * Android 微信 webview 在老机型 / subset 后可能不识别 axes,导致 SOFT 100 失效。
 * 老机型走 static instance fallback:
 *   - 项目 ship 时同时打包 Fraunces-SoftRegular.woff2(SOFT=100 WONK=0 烘进的 static)
 *   - 通过 @supports not 检测变量字体支持,不支持时 swap 到 static instance
 * 2026-05-17 codex risk fix(Finding #2 Fraunces variable axes 风险)。
 * ════════════════════════════════════════ */
@supports not (font-variation-settings: normal) {
  .display-xl,
  .display-lg,
  .display-md,
  .h1, .h2, .h3,
  .brand-mark,
  .eyebrow,
  .eyebrow-soft {
    /* 浏览器不支持 variable axes → 用 SOFT=100 WONK=0 烘进的 static instance */
    font-family: 'Fraunces-SoftRegular', 'Cormorant Garamond', Georgia, serif;
    font-variation-settings: normal;   /* clear axes 不让浏览器尝试 parse */
  }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);

  /* 晨光氛围:右上奶油暖光 + 左下桃粉微光 */
  background-image:
    radial-gradient(ellipse 80% 50% at 100% 0%,
      rgba(255, 231, 200, 0.6),
      transparent 65%
    ),
    radial-gradient(ellipse 70% 50% at 0% 100%,
      rgba(250, 230, 220, 0.5),
      transparent 60%
    );
  background-attachment: fixed;
}

a {
  color: var(--peach);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

a:hover { color: var(--peach-deep); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

button { cursor: pointer; }

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

img { display: block; max-width: 100%; }

/* ════════════════════════════════════════
 * Typography scale
 * ════════════════════════════════════════ */

/* Fraunces variable font 设定 - soft + warm 调 */
.display-xl,
.display-lg,
.display-md,
.h1, .h2, .h3,
.brand-mark {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

/* 巨型显示数字 */
.display-xl {
  font-weight: 800;
  font-size: clamp(64px, 16vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.display-lg {
  font-weight: 700;
  font-size: clamp(44px, 11vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.display-md {
  font-weight: 700;
  font-size: clamp(32px, 8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* 标题 */
.h1 {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}

/* 正文 */
.body-lg {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

.body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.body-sm {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* eyebrow 编辑式小标签 - 改用 Fraunces italic 更温暖
 * 文字色用 --peach-aa(深桃,在 cream 上过 AA 4.5:1);
 * 装饰用 --peach,文字承载用 --peach-aa(2026-05-17 codex contrast 修法)。
 */
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--peach-aa);
}

.eyebrow-soft {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* 数字 / 单位标签 - 圆润 sans 小字 */
.num-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ════════════════════════════════════════
 * 页面骨架
 * ════════════════════════════════════════ */

.page {
  min-height: 100vh;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: env(safe-area-inset-top, 0);
}

.page-body {
  flex: 1;
  padding: 0 var(--s-6);
}

.page-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--cream) 0%,
    var(--cream) 60%,
    rgba(251, 247, 242, 0) 100%
  );
  padding: var(--s-6) var(--s-6) max(var(--s-6), env(safe-area-inset-bottom));
  margin-top: var(--s-8);
}

/* ════════════════════════════════════════
 * 一次性入场动画(每页只用一次)
 * ════════════════════════════════════════ */

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-sage {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(168, 184, 155, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(168, 184, 155, 0.15);
  }
}

.enter {
  animation: enter-up 0.55s var(--ease) backwards;
}

.enter-1 { animation-delay: 0.04s; }
.enter-2 { animation-delay: 0.12s; }
.enter-3 { animation-delay: 0.2s; }
.enter-4 { animation-delay: 0.3s; }
.enter-5 { animation-delay: 0.42s; }

/* ════════════════════════════════════════
 * 工具类
 * ════════════════════════════════════════ */

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }

.ink-soft { color: var(--ink-soft); }
.ink-faint { color: var(--ink-faint); }
/* 文字色工具类:用 -aa 变体保 AA contrast 在 cream 底上(2026-05-17 codex 修法)
 * 装饰场景仍用 --peach / --sage(border / icon / 大块色),只有承载文字才走 -aa
 */
.text-peach { color: var(--peach-aa); }
.text-sage { color: var(--sage-aa); }
.text-caramel { color: var(--caramel-deep); }

.center { text-align: center; }
.italic { font-style: italic; }

.hairline {
  height: 1px;
  background: var(--line);
  border: none;
}

.hairline-dashed {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--line-2) 0 5px,
    transparent 5px 10px
  );
}

/* 装饰元素:小心形 / 圆点 */
.deco-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--peach);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 6px;
}

.deco-flower {
  display: inline-block;
  color: var(--peach);
  font-size: 0.85em;
  vertical-align: middle;
}