/* ============================================================
   苁原·颐养版 设计系统 v2 —— 高级中式质感 + 适老化
   - 调色/字体：移植自苁原 v6
   - 层次感：分层投影体系 + 宣纸肌理 + 暖色渐变 + 朱砂/金点缀
   - 适老化：超大基准字号 + 高对比文字 + 大触控目标
   ============================================================ */

:root {
  /* —— 纸张 / 墨色 / 朱砂 / 五行（中式纸墨配色）—— */
  --paper-0: #F1E9D6;   /* 页面底（略深，衬托卡片浮起）*/
  --paper-1: #E9DFC9;
  --paper-2: #FEFBF3;   /* 卡片（提亮，制造高度差）*/
  --paper-3: #F8F1DF;
  --paper-deep: #2A2519;

  --ink-0: #16140D;
  --ink-1: #3A3326;
  --ink-2: #6B6149;
  --ink-3: #9C9279;
  --ink-4: #C6BCA3;
  --ink-5: #DED4BB;

  --cinnabar: #A6362A;
  --cinnabar-deep: #7C2820;
  --cinnabar-light: #C76358;
  --gold: #A98549;
  --gold-light: #C9A86A;
  --gold-deep: #836339;
  --dai: #4E5F55;
  --dai-deep: #3A483F;

  --wuxing-jin:  #B89358;
  --wuxing-mu:   #5E7A4A;
  --wuxing-shui: #36546B;
  --wuxing-huo:  #A6362A;
  --wuxing-tu:   #8F7148;

  /* —— 适老化语义色 —— */
  --ok: #1B7A3D;     --ok-bg: #E7F2EA;
  --warn: #C6790F;   --warn-bg: #FBEFD6;
  --danger: #C0392B; --danger-bg: #FBE4DF;
  --info: #2471A3;   --info-bg: #E5EFF6;

  /* —— 线条 —— */
  --hairline: rgba(22,20,13,0.10);
  --hairline-strong: rgba(22,20,13,0.20);
  --gold-line: linear-gradient(90deg, transparent, var(--gold-light), transparent);

  /* —— 分层投影体系（层次感核心）—— */
  --e1: 0 1px 2px rgba(42,37,25,.05), 0 3px 10px rgba(42,37,25,.05);
  --e2: 0 2px 4px rgba(42,37,25,.06), 0 10px 24px rgba(42,37,25,.09), inset 0 1px 0 rgba(255,255,255,.6);
  --e3: 0 6px 14px rgba(42,37,25,.10), 0 24px 56px rgba(42,37,25,.16);
  --e-press: inset 0 2px 6px rgba(42,37,25,.12);
  --shadow-sm: var(--e1);   /* 兼容旧名 */
  --shadow-md: var(--e2);

  /* —— 渐变（珠宝级点缀）—— */
  --grad-cinnabar: linear-gradient(140deg, #B8473A 0%, #A6362A 45%, #7C2820 100%);
  --grad-gold: linear-gradient(140deg, var(--gold-light), var(--gold-deep));
  --grad-dai: linear-gradient(140deg, #5C6E63, #3A483F);
  --grad-paper: linear-gradient(160deg, #FFFDF7 0%, #F8F1DF 100%);
  --grad-hero: radial-gradient(120% 100% at 85% 0%, #FFFCF4 0%, #F4ECD9 55%, #EFE6CF 100%);

  /* —— 字体 —— */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans:  "Noto Sans SC", "Source Han Sans SC", -apple-system, "PingFang SC", system-ui, sans-serif;

  /* —— 间距韵律 —— */
  --s1: .35rem; --s2: .6rem; --s3: .9rem; --s4: 1.2rem; --s5: 1.7rem; --s6: 2.4rem;
  --gap: 1rem;
  --page-pad: 1.15rem;

  /* —— 圆角 —— */
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 14px;

  /* —— 触控 —— */
  --tap-min: 3.2rem;

  /* —— 动效 —— */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .22s; --dur-2: .42s; --dur-3: .7s;
}

/* 适老化字号档（默认「大」20px）*/
html { font-size: 20px; -webkit-text-size-adjust: 100%; }
html[data-fs="标准"] { font-size: 18px; }
html[data-fs="大"]   { font-size: 20px; }
html[data-fs="特大"] { font-size: 23px; }
html[data-fs="超大"] { font-size: 26px; }

/* 高对比（默认开启）：文字更黑，卡片更白，保层次但提清晰度 */
html[data-contrast="high"] {
  --paper-0: #F3ECDB; --paper-2: #FFFFFF;
  --ink-0: #0B0A06; --ink-1: #211C13; --ink-2: #463E2D;
  --hairline: rgba(0,0,0,.16); --hairline-strong: rgba(0,0,0,.32);
  --cinnabar: #9A2C1F;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-sans);
  color: var(--ink-0);
  line-height: 1.6;
  font-size: 1rem;
  letter-spacing: .01em;
  overscroll-behavior-y: contain;
  background:
    radial-gradient(135% 90% at 50% -10%, #FBF5E8 0%, var(--paper-0) 60%);
  background-attachment: fixed;
}

/* 宣纸肌理（极淡，不伤对比度；不拦截点击）*/
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.serif { font-family: var(--font-serif); }

h1 { font-family: var(--font-serif); font-size: 1.95rem; font-weight: 700; line-height: 1.28; letter-spacing: .02em; }
h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
h3 { font-size: 1.2rem; font-weight: 600; }
p, li, label, button, input, textarea, select { font-size: 1rem; }
small, .muted { color: var(--ink-2); }
.tiny { font-size: .82rem; }
a { color: var(--cinnabar); }

:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.scroll { -webkit-overflow-scrolling: touch; }
button, .tap { min-height: var(--tap-min); cursor: pointer; }

.tts-reading { background: #FFF1A8; border-radius: 6px; box-shadow: 0 0 0 4px #FFF1A8; }

/* 精致滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* —— 动效关键帧 —— */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ringIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes floatUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

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