/* ============================================================
   《祂的远行》Design Tokens v1  —  单一真源
   设计师：颜值 ｜ 2026-09-22
   适用：iOS / Android / 鸿蒙 三端 + 四份交互稿
   ------------------------------------------------------------
   用法：
     <link rel="stylesheet" href="design-tokens.css">
   主题：document.documentElement.setAttribute('data-theme','dark')
   字号：document.documentElement.setAttribute('data-fs','small|std|large')
   动效：document.documentElement.setAttribute('data-motion','off')
   ============================================================ */

:root{
  /* ---- 纸色系（不是纯白）---- */
  --paper-50:#FAF8F4;
  --paper-100:#F5F2ED;
  --paper-200:#EDE8E0;
  --paper-300:#E2DBD0;

  --ink-900:#2E2A25;
  --ink-600:#6B635A;
  --ink-400:#9A9186;
  --ink-200:#C9C1B6;

  /* ---- 强调色：一屏最多一次 ---- */
  --accent:#8A7154;
  --accent-bg:#F0E9DE;
  --accent-dk:#6E5A42;

  /* ---- 语义色（全部降饱和）---- */
  --heart:#B9746A;
  --warn:#C97B6E;
  --link:#5B6A7A;
  --success:#7A8B6F;

  /* ---- 聊天气泡 ---- */
  --bubble-me:#A8D98C;   /* 保留微信绿色相，降饱和 */
  --bubble-her:#FFFFFF;  /* 与微信一致 */

  /* ---- 字号 ---- */
  --fs-display:22px;
  --fs-title:17px;
  --fs-body:16px;
  --fs-caption:13px;
  --fs-tiny:11px;

  /* ---- 间距（8pt）---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* ---- 圆角（比微信更柔）---- */
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-full:999px;

  /* ---- 阴影（暖调，不堆叠）---- */
  --sh-1:0 1px 2px rgba(74,60,42,.05);
  --sh-2:0 4px 14px rgba(74,60,42,.07);
  --sh-3:0 18px 48px rgba(74,60,42,.13), 0 2px 6px rgba(74,60,42,.05);

  /* ---- 动效 ---- */
  --dur-fast:150ms;
  --dur-base:280ms;
  --dur-slow:600ms;
  --ease:cubic-bezier(0.22,0.61,0.36,1);

  /* ============================================================
     兼容别名：四份交互稿正在使用的旧变量名
     稿内不再自己定义 :root，统一走这里
     ============================================================ */
  --page:var(--paper-100);      /* 页面背景 */
  --card:var(--paper-50);       /* 手机外框 / 注解卡片 */
  --warm:var(--paper-50);       /* 屏内暖底 */
  --chatbg:var(--paper-100);    /* 聊天背景 */
  --bg:var(--paper-100);
  --text:var(--ink-900);
  --text2:var(--ink-600);
  --text3:var(--ink-400);
  --line:var(--paper-300);
  --accent-soft:var(--accent-bg);
}

/* ============================================================
   深色模式：暖调深灰，绝不用 #000000
   ============================================================ */
[data-theme="dark"]{
  --paper-50:#232019;
  --paper-100:#1A1815;
  --paper-200:#2E2A25;
  --paper-300:#3A352F;

  --ink-900:#E8E3DA;
  --ink-600:#A79E92;
  --ink-400:#7A7266;
  --ink-200:#4A443C;

  --accent:#A08A6E;
  --accent-bg:#2E2A25;
  --accent-dk:#C0AA8C;

  --heart:#8A5A52;
  --warn:#8A5A52;
  --link:#8FA3B8;
  --success:#6B7C60;

  --bubble-me:#4A5C3A;
  --bubble-her:#232019;

  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 4px 14px rgba(0,0,0,.30);
  --sh-3:0 18px 48px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);

  /* 别名同步 */
  --page:var(--paper-100);
  --card:var(--paper-50);
  --warm:var(--paper-50);
  --chatbg:var(--paper-100);
  --bg:var(--paper-100);
  --text:var(--ink-900);
  --text2:var(--ink-600);
  --text3:var(--ink-400);
  --line:var(--paper-300);
  --accent-soft:var(--accent-bg);
}

/* ---- 深色下：图片降亮，避免深夜刺眼 ---- */
[data-theme="dark"] .cover{filter:brightness(.68) saturate(.9);}
[data-theme="dark"] .im,
[data-theme="dark"] .photo,
[data-theme="dark"] .bub.img .ph{filter:brightness(.76) saturate(.9);}

/* ---- 深色下：硬编码浅底兜底（开发若漏改 token 也不会翻车）---- */
[data-theme="dark"] .navbar,
[data-theme="dark"] .inputbar,
[data-theme="dark"] .mapbox{background:#232019 !important;}

/* ============================================================
   字号调节（可访问性底线，不是加分项）
   ============================================================ */
[data-fs="small"]{--fm:.90;}
[data-fs="std"],
[data-fs]{--fm:1;}
[data-fs="large"]{--fm:1.14;}

[data-fs] .bub,
[data-fs] .say,
[data-fs] .narr,
[data-fs] .waittext,
[data-fs] .waitsub,
[data-fs] .hint,
[data-fs] .navbar .nm,
[data-fs] .navbar .st,
[data-fs] .mom .tx,
[data-fs] .mom .nm,
[data-fs] .loc,
[data-fs] .tm,
[data-fs] .act,
[data-fs] .trans .p,
[data-fs] .trans .big,
[data-fs] .trans .sm,
[data-fs] .stat,
[data-fs] .letter .box,
[data-fs] .letter .h .t,
[data-fs] .exp .tt,
[data-fs] .btn,
[data-fs] .endline,
[data-fs] .footnote{
  font-size:calc(1em * var(--fm));
}

/* ============================================================
   减少动效（哀伤用户对动效敏感，必须能关）
   ============================================================ */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* ============================================================
   原型外壳：页面底色 / 标注面板统一
   ============================================================ */
body{background:var(--page);}
.phone{box-shadow:var(--sh-3);}
.notes{box-shadow:var(--sh-2);}
.ctrl{border-radius:var(--radius-full);}