/* 崽崽日记 — 童趣手绘 + 手账风设计系统 */

/* ── Tokens ────────────────────────────────────────── */
:root {
  /* 主题色（默认：暖橘 — 由 Tweaks 切换） */
  --primary: #F5A572;
  --primary-soft: #FFE8D6;
  --primary-deep: #E08B4F;

  /* 中性 */
  --paper: #FFF8EE;        /* 奶油纸张底 */
  --paper-2: #FFF1E0;      /* 卡片底 */
  --ink: #2D2A26;          /* 主文字 */
  --ink-2: #5C544B;        /* 次文字 */
  --ink-3: #9B9085;        /* 弱文字 */
  --line: #E8DFD0;         /* 描边 */

  /* 强调（点缀，不当主色用） */
  --accent-pink: #F4A6A6;
  --accent-mint: #A8D4B6;
  --accent-yellow: #F2D26A;
  --accent-stamp: #C8483A; /* 印章红 */

  /* 字体 */
  --f-hand: "Ma Shan Zheng", "Zhi Mang Xing", "Caveat", cursive;
  --f-hand-en: "Caveat", "Patrick Hand", cursive;
  --f-body: "PingFang SC", "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --f-mono: "Courier New", monospace;
}

/* 深色模式 */
.dark-mode {
  --paper: #1F1B17;
  --paper-2: #2A241F;
  --ink: #F5EDE0;
  --ink-2: #BFB3A4;
  --ink-3: #8C8275;
  --line: #3A3127;
  --primary-soft: #3A2A1F;
}

/* ── 纸张纹理（可放在 body 或 .paper 上） ─────────────── */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.018) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.015) 0, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 3px);
}

/* ── 手绘描边 helper ──────────────────────────────────── */
.hand-stroke {
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  /* 模仿手绘的不规则感 */
  filter: url(#wobble);
}

/* ── 印章 ─────────────────────────────────────────────── */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-hand);
  color: var(--accent-stamp);
  border: 2.5px solid var(--accent-stamp);
  padding: 4px 10px;
  transform: rotate(-6deg);
  letter-spacing: 0.05em;
  background: rgba(200, 72, 58, 0.04);
  position: relative;
}
.stamp::after {
  /* 印泥不均的杂色 */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,248,238,0.5) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,248,238,0.5) 1px, transparent 2px),
    radial-gradient(circle at 20% 80%, rgba(255,248,238,0.5) 1px, transparent 2px);
  background-size: 8px 8px, 12px 12px, 7px 7px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* ── 胶带 ─────────────────────────────────────────────── */
.tape {
  position: absolute;
  width: 60px;
  height: 18px;
  background: rgba(244, 210, 106, 0.55);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent 4px,
    rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 5px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 通用 reset */
* { box-sizing: border-box; }
button { font-family: inherit; }