@import 'tailwindcss';

@theme {
  --color-paper: #faf6ef;
  --color-paper-deep: #f0e8d8;
  --color-paper-shadow: #e5dcc8;
  --color-ink: #3d3428;
  --color-ink-muted: #6b5d4f;
  --color-rose-soft: #c45c6a;
  --color-rose-deep: #9a3d4a;
  --color-tape-pink: #f5b5c8;
  --color-tape-mint: #b8e0d2;
  --color-tape-cream: #f4e4bc;
  /* 尼泊尔本 / 手工纸晕染 */
  --color-lokta-cream: #f7f1e8;
  --color-lokta-blush: #f5b8c9;
  --color-lokta-peach: #fcd5ce;
  --color-lokta-teal: #4ec4d4;
  --color-lokta-deep: #1e3550;
  --color-lokta-magenta: #d9468f;
  --font-hand: 'Caveat', 'Patrick Hand', cursive;
  --font-brush: 'Zhi Mang Xing', 'Ma Shan Zheng', 'Long Cang', 'PingFang SC', 'Microsoft YaHei', cursive;
  --font-dance: 'Dancing Script', 'Great Vibes', 'Caveat', cursive;
  --font-display-cn: 'ZCOOL QingKe HuangYou', 'Ma Shan Zheng', cursive;
  --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

.font-dance {
  font-family: var(--font-dance);
}

.font-display-cn {
  font-family: var(--font-display-cn);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgb(61 52 40 / 0.06) 1px, transparent 0),
    linear-gradient(180deg, rgb(250 246 239) 0%, rgb(245 238 225) 100%);
  background-size:
    24px 24px,
    100% 100%;
}

#app {
  min-height: 100dvh;
}

/* 毛笔标题（章节带） */
.font-brush {
  font-family: var(--font-brush);
  font-weight: 400;
}

/* 纤维 / 手工纸噪点 */
.nepal-fiber {
  background-image:
    radial-gradient(rgb(30 53 80 / 0.07) 0.6px, transparent 0.6px),
    radial-gradient(rgb(196 92 106 / 0.06) 0.5px, transparent 0.5px);
  background-size:
    10px 12px,
    14px 11px;
  background-position:
    0 0,
    3px 5px;
}

/* 毛边纸外轮廓 */
.nepal-torn-panel {
  clip-path: polygon(
    0% 2%,
    3% 0%,
    9% 1.5%,
    16% 0.3%,
    24% 1.8%,
    33% 0%,
    42% 2%,
    51% 0.4%,
    60% 1.6%,
    69% 0%,
    78% 2%,
    87% 0.5%,
    95% 1.4%,
    100% 2.5%,
    100% 97.5%,
    96% 100%,
    88% 98.2%,
    79% 100%,
    70% 97.8%,
    61% 100%,
    52% 98%,
    43% 100%,
    34% 97.5%,
    25% 100%,
    16% 98%,
    8% 100%,
    2% 97%,
    0% 94%
  );
}

/* 拍立得白边轻微毛边 */
.nepal-deckle-frame {
  clip-path: polygon(
    1% 1.5%,
    5% 0%,
    12% 1.2%,
    22% 0%,
    35% 1.5%,
    50% 0.2%,
    65% 1.4%,
    78% 0%,
    90% 1.3%,
    99% 0.5%,
    100% 3%,
    100% 97%,
    95% 100%,
    84% 98%,
    70% 100%,
    55% 98%,
    40% 100%,
    28% 98%,
    15% 100%,
    5% 98%,
    0% 96%,
    0% 4%
  );
}

/* 留言区「砖墙窗」外框 */
.nepal-brick-frame {
  position: relative;
  padding: 11px;
  border-radius: 1.5rem;
  background:
    linear-gradient(rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.94)) padding-box,
    repeating-linear-gradient(
        90deg,
        #9a3a36 0px,
        #9a3a36 10px,
        #c45a52 10px,
        #c45a52 20px,
        #7d2e2b 20px,
        #7d2e2b 32px,
        #b84a42 32px,
        #b84a42 44px
      )
      border-box;
  border: 11px solid transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.65),
    0 18px 50px -22px rgb(30 53 80 / 0.35);
}

.nepal-brick-frame::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 1.1rem;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(30 53 80 / 0.08);
}
