/* ============================================================
   tokens.css — 设计令牌 / 纸感色板 / 字体栈 / 重置
   ============================================================ */

:root {
  /* 纸感基底 */
  --paper:        #FBF6EC;
  --paper-2:      #F4EDDF;
  --paper-3:      #EDE3D2;
  --card:         #FFFDF8;

  /* 墨阶 */
  --ink:          #3A332C;
  --ink-2:        #6E6459;
  --ink-3:        #9C9184;
  --ink-4:        #C6BCAC;

  /* 主题色 */
  --orange:       #F2A65A;
  --coral:        #E87461;
  --green:        #4E8C6B;
  --cyan:         #6FA8C7;
  --red:          #E05B4A;
  --purple:       #6B5B95;
  --night:        #2E4A63;
  --gold:         #C99A3F;

  /* 语义 */
  --bubble-other: #FFFDF8;
  --bubble-self:  #F6E4C4;
  --bubble-narr:  transparent;

  /* 手绘描边 */
  --stroke:       #3A332C;
  --stroke-w:     2.2px;

  /* 圆角（刻意不规整，模拟手绘） */
  --r-sm: 10px 14px 12px 16px / 12px 10px 14px 11px;
  --r-md: 16px 20px 18px 22px / 20px 16px 22px 18px;
  --r-lg: 24px 28px 24px 30px / 28px 24px 30px 26px;
  --r-pill: 999px;

  /* 阴影（暖调，无纯黑） */
  --sh-1: 0 1px 0 rgba(58,51,44,.06), 0 2px 6px rgba(138,127,115,.10);
  --sh-2: 0 2px 0 rgba(58,51,44,.05), 0 8px 20px rgba(138,127,115,.14);
  --sh-3: 0 6px 0 rgba(58,51,44,.04), 0 18px 44px rgba(58,51,44,.18);
  --sh-soft: 0 10px 30px rgba(58,51,44,.10);

  /* 字号（全局缩放，用户可调） */
  --fs-base: 16px;
  --scale: 1;
  --fs-xs:  calc(11px * var(--scale));
  --fs-sm:  calc(12.5px * var(--scale));
  --fs-md:  calc(14px * var(--scale));
  --fs-lg:  calc(16px * var(--scale));
  --fs-xl:  calc(19px * var(--scale));
  --fs-2xl: calc(23px * var(--scale));
  --fs-3xl: calc(30px * var(--scale));

  /* 排版 */
  --ff: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Source Han Sans SC",
        "Noto Sans CJK SC", sans-serif;
  --ff-num: "SF Mono", ui-monospace, "DIN Alternate", "PingFang SC", monospace;

  /* 布局 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* 动效 */
  --ease: cubic-bezier(.22,.8,.28,1);
  --fast: .18s;
  --norm: .32s;
  --slow: .52s;

  /* z-index */
  --z-scene: 0;
  --z-app: 2;
  --z-bar: 20;
  --z-float: 30;
  --z-sheet: 60;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--ff);
  font-size: var(--fs-lg);
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea {
  font: inherit; color: inherit; background: none; border: 0;
}
button { cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.3; }

/* 可聚焦元素 */
:focus-visible {
  outline: 3px dashed var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 滚动条 */
.scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.scrollable::-webkit-scrollbar { width: 5px; }
.scrollable::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 99px; }
.scrollable::-webkit-scrollbar-track { background: transparent; }

/* 无动画模式 */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}