/*
 * shared/suiyue_tokens.css
 * 遂阅 2026 新版界面的设计变量与少量通用组件（新版页面共用）。
 *
 * 口径（2026-10-30 定）：近白纸色 + 中性灰打底，金色为主调但只做点缀
 * （按钮、线条、进度、选中）；朱砂只用于文言加点/释义高亮、作文批注、印章，不做按钮。
 * 不依赖 Tailwind：新版页面用 .sy-* 类，免去 build_tailwind.sh 重建。
 */
:root {
  --sy-paper: #faf8f3;
  --sy-paper-2: #f4f0e7;
  --sy-card: #ffffff;
  --sy-ink: #24211d;
  --sy-ink-2: #3d3832;
  --sy-muted: #6c675f;
  --sy-line: rgba(90, 75, 50, .14);
  --sy-line-strong: rgba(90, 75, 50, .24);
  --sy-gold: #9a7340;
  --sy-gold-deep: #85612f;
  --sy-gold-soft: #f4e9d2;
  --sy-gold-a: #a07a45;
  --sy-gold-b: #86622f;
  --sy-zhu: #b03f2b;
  --sy-zhu-soft: rgba(176, 63, 43, .12);
  --sy-shadow: 0 1px 2px rgba(60, 45, 20, .04);
  --sy-shadow-lift: 0 18px 40px rgba(110, 80, 35, .12);
  --sy-radius: 14px;
  --sy-ease: cubic-bezier(.21, .68, .25, 1);
  --sy-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sy-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
}

/* 主按钮：金色，带一点光泽 */
.sy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sy-gold-a), var(--sy-gold-b));
  color: #fff;
  font: 500 15px/1 var(--sy-sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(142, 106, 56, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.sy-btn:hover {
  background: linear-gradient(135deg, #ab8550, #8e6a38);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(142, 106, 56, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* 次按钮：带金色下划线的文字链 */
.sy-link {
  color: var(--sy-ink);
  font: 15px/1.6 var(--sy-sans);
  text-decoration: none;
  border-bottom: 1px solid var(--sy-gold);
  padding-bottom: 2px;
  cursor: pointer;
  background: none;
}
.sy-link:hover { color: var(--sy-gold-deep); }

/* 细描边胶囊按钮 */
.sy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--sy-line-strong);
  border-radius: 999px;
  background: var(--sy-card);
  color: var(--sy-ink);
  font: 14px/1 var(--sy-sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.sy-pill:hover { border-color: var(--sy-gold); color: var(--sy-gold-deep); }

/* 进度条 */
.sy-bar { height: 3px; background: #ebe5d8; border-radius: 2px; overflow: hidden; }
.sy-bar > i { display: block; height: 100%; background: var(--sy-gold); border-radius: 2px; }

/* “切回旧版”小入口：放在页脚等不起眼位置 */
.sy-classic-switch {
  font: 12px/1.6 var(--sy-sans);
  color: var(--sy-muted);
  background: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.sy-classic-switch:hover { color: var(--sy-gold-deep); }

:where(.sy-page) a:focus-visible,
:where(.sy-page) button:focus-visible {
  outline: 2px solid var(--sy-gold);
  outline-offset: 2px;
}