/* ============================================================
   手账本 · base
   设计令牌 / 主题 / 纸张底纹 / 排版 / 通用控件
   ============================================================ */

:root {
  --paper: #FBF6EC;
  --paper-2: #F3E9D7;
  --card: #FFFDF8;
  --card-2: #FBF5E9;
  --ink: #3B342B;
  --ink-2: #6F655A;
  --ink-3: #A79B8D;
  --line: rgba(59, 52, 43, .14);
  --line-strong: rgba(59, 52, 43, .30);
  --rule: rgba(122, 147, 168, .22);
  --accent: #C4604A;
  --accent-2: #7C9A6B;
  --accent-3: #D9A43E;
  --shadow-sm: 0 1px 2px rgba(75, 62, 46, .10), 0 8px 18px -14px rgba(75, 62, 46, .55);
  --shadow-md: 0 14px 34px -22px rgba(75, 62, 46, .70);
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --font-hand: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E");
}

[data-theme="sakura"] {
  --paper: #FDF2F0;
  --paper-2: #F8E2DE;
  --card: #FFFBF9;
  --card-2: #FCEFEC;
  --ink: #463337;
  --ink-2: #7C6266;
  --ink-3: #B49B9D;
  --line: rgba(70, 51, 55, .13);
  --line-strong: rgba(70, 51, 55, .28);
  --rule: rgba(201, 106, 117, .20);
  --accent: #C96A75;
  --accent-2: #8C9E7E;
  --accent-3: #D9A43E;
}

[data-theme="night"] {
  --paper: #241F1A;
  --paper-2: #1B1713;
  --card: #2C2621;
  --card-2: #342D26;
  --ink: #EFE5D6;
  --ink-2: #B6A894;
  --ink-3: #877A6A;
  --line: rgba(239, 229, 214, .13);
  --line-strong: rgba(239, 229, 214, .30);
  --rule: rgba(239, 229, 214, .10);
  --accent: #E0866E;
  --accent-2: #8FA97D;
  --accent-3: #DDB259;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 22px -16px rgba(0, 0, 0, .9);
  --shadow-md: 0 16px 36px -24px rgba(0, 0, 0, .95);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 160px 160px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

h1, h2, h3, p, figure { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

textarea { resize: none; }

a { color: var(--accent); }

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

::selection { background: rgba(196, 96, 74, .22); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 桌面端：纸张浮在桌面上 */
@media (min-width: 620px) {
  body { background-color: #E7DDCA; }
  [data-theme="night"] body,
  body[data-theme="night"] { background-color: #14110E; }
}

/* ---------------- 通用控件 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease), background-color .18s, border-color .18s;
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--danger {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn--wide { width: 100%; }

.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }

.icon-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color .18s, color .18s;
}

.icon-btn:active { background: var(--card-2); }

.icon-btn svg { width: 22px; height: 22px; }

.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
  font-size: 16px;
}

.input::placeholder { color: var(--ink-3); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

.muted { color: var(--ink-3); }
.hand { font-family: var(--font-hand); }
.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}