/* 落霞来信 · 设计令牌（Design Tokens）
   ------------------------------------------------------------
   全站唯一的样式变量来源：颜色、字体、字号、字距、间距、圆角、阴影、层级、动效。
   其余样式文件（base / components / pages）只引用这里的令牌，不再写魔法数字。
   改一处即可全站统一。
*/
:root{
  /* ---- 颜色 · 纸与墨 ---- */
  --paper:#F4EFE6;          /* 主纸色 */
  --paper-deep:#EDE6D6;     /* 深一档纸色（读信页底） */
  --card:#ECE5D8;           /* 卡片/区块底色 */
  --ink:#2B2520;            /* 主墨色 */
  --ink-soft:#6E655A;       /* 次级墨色 */
  --accent:#B8542E;         /* 强调色 · 落霞红 */
  --line:#D8CFBF;           /* 描边线 */
  --page-bg:#d9d2c4;        /* 手机外壳之外的页面底色 */

  /* ---- 颜色 · 语义 ---- */
  --on-dark:#F4EFE6;                    /* 深色底上的文字 */
  --hover:rgba(43,37,32,.045);          /* 列表悬停底 */
  --press:rgba(43,37,32,.08);           /* 按下底 */
  --accent-soft:rgba(184,84,46,.08);    /* 强调色浅底 */
  --accent-line:rgba(184,84,46,.12);    /* 强调色浅描边 */
  --overlay:rgba(43,37,32,.45);         /* 遮罩层 */
  --scrim:rgba(43,37,32,.85);           /* 深色半透明底（Toast/胶囊） */
  --on-dark-soft:rgba(244,239,230,.88); /* 深色底上的次级文字 */
  --on-dark-dim:rgba(244,239,230,.2);   /* 深色底上的描边 / 进度轨道 */
  --line-strong:rgba(43,37,32,.28);     /* 描边强化（悬停态） */
  --accent-deep:#9E4522;                /* 强调色 · 悬停 / 按下加深 */

  /* ---- 颜色 · 播放控件（全站统一） ---- */
  --play-bg:var(--accent);              /* 实心播放键底色 */
  --play-fg:var(--on-dark);             /* 实心播放键图标色 */
  --play-bg-hover:var(--accent-deep);   /* 实心播放键悬停底色 */

  /* ---- 字体 ---- */
  --font-serif:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;

  /* ---- 字号 ---- */
  --fs-10:10px;
  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --fs-18:18px;
  --fs-20:20px;
  --fs-24:24px;
  --fs-28:28px;
  --fs-11-5:11.5px;
  --fs-12-5:12.5px;
  --fs-14-5:14.5px;

  /* ---- 字距 ---- */
  --ls-1:1px;
  --ls-2:2px;
  --ls-3:3px;
  --ls-4:4px;
  --ls-6:6px;
  --ls-10:10px;

  /* ---- 间距 ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:28px;
  --sp-8:32px;
  --sp-9:36px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-14:56px;

  /* ---- 版式节奏（标题 / 内容 / 板块） ---- */
  --gutter:28px;        /* 页面左右安全边距 */
  --gap-eyebrow:12px;   /* 眉标 → 主标题 */
  --gap-title:16px;     /* 标题 → 紧随其后的内容 */
  --gap-block:44px;     /* 内容板块 → 内容板块 */
  --pad-page-b:40px;    /* 页面内容底部留白 */

  /* ---- 圆角 ---- */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:14px;
  --r-xl:20px;
  --r-img:12px;         /* 内容图片统一圆角（播放卡 / 横幅 / 封面） */
  --r-phone:28px;
  --r-pill:999px;
  --r-full:50%;

  /* ---- 阴影 ---- */
  --sh-phone:0 30px 80px rgba(43,37,32,.35);
  --sh-card:0 8px 24px rgba(43,37,32,.25);
  --sh-card-hover:0 12px 32px rgba(43,37,32,.32);
  --sh-pill:0 10px 26px rgba(43,37,32,.28);
  --sh-pill-drag:0 16px 34px rgba(43,37,32,.42);
  --sh-cover:0 3px 10px rgba(43,37,32,.14);
  --sh-chip:0 2px 8px rgba(184,84,46,.12);

  /* ---- 层级 ---- */
  --z-hero:2;
  --z-back:5;
  --z-top:20;
  --z-player:30;
  --z-toast:99;
  --z-overlay:120;

  /* ---- 动效 ---- */
  --dur-fast:.2s;
  --dur:.3s;
  --dur-slow:.5s;
  --ease:cubic-bezier(.22,.9,.3,1);
}