/* ============================================================
   基础：设计变量、字体、宣纸底、深色模式
   ============================================================ */

:root {
  /* 纸与墨 */
  --paper: #F6F0E3;
  --paper-2: #FBF6EC;
  --paper-3: #EFE5D2;
  --ink: #1E1C19;
  --ink-2: #46413A;
  --muted: #7C7468;
  --line: #DCCFB7;
  --line-soft: #E9DFCC;

  /* 朱砂与青 */
  --cinnabar: #A63A2E;
  --cinnabar-2: #C25A45;
  --jade: #3F6B62;
  --gold: #A88444;

  /* 症状类型色 */
  --t-pain: #A63A2E;
  --t-heat: #C25A45;
  --t-cold: #4A6FA5;
  --t-fluid: #3E7C74;
  --t-fullness: #9A7434;
  --t-deficiency: #8C8478;
  --t-vexation: #B4552F;
  --t-sweat: #4E7E9B;
  --t-dizzy: #7B6AA8;
  --t-palpitation: #A8506B;
  --t-digest: #7A6A4F;
  --t-qi: #5D7F8C;
  --t-skin: #9B7B3F;
  --t-spirit: #7E5A86;
  --t-default: #6B6153;

  /* 人体 */
  --fig-fill: #F0E4CE;
  --fig-line: #6E6354;
  --fig-guide: #C9BBA1;

  /* 字体 */
  --font-classic: "Kaiti SC", "KaiTi", "STKaiti", "楷体", "Kaiti TC", serif;
  --font-serif: "Songti SC", "SimSun", "宋体", "Noto Serif SC", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(60, 45, 20, .05), 0 8px 24px -18px rgba(60, 45, 20, .45);
  --maxw: 1280px;
}

html[data-theme="dark"] {
  --paper: #14161A;
  --paper-2: #1A1D22;
  --paper-3: #21252B;
  --ink: #E8E2D6;
  --ink-2: #C6BEAE;
  --muted: #8C8578;
  --line: #333840;
  --line-soft: #2A2F36;

  --cinnabar: #D06A56;
  --cinnabar-2: #E08A74;
  --jade: #74A79B;
  --gold: #C9A45E;

  --t-pain: #D06A56;
  --t-heat: #E08A74;
  --t-cold: #7FA3D8;
  --t-fluid: #6FB3A8;
  --t-fullness: #C9A45E;
  --t-deficiency: #A9A093;
  --t-vexation: #DA7C55;
  --t-sweat: #7FA8C4;
  --t-dizzy: #A394CC;
  --t-palpitation: #CF7895;
  --t-digest: #B0A084;
  --t-qi: #8FB3BE;
  --t-skin: #C8A868;
  --t-spirit: #B58DBE;
  --t-default: #A9A093;

  --fig-fill: #23272D;
  --fig-line: #7C8894;
  --fig-guide: #3A4048;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -20px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(166, 58, 46, .035), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(63, 107, 98, .035), transparent 46%),
    repeating-linear-gradient(90deg, rgba(120, 96, 60, .022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(120, 96, 60, .018) 0 1px, transparent 1px 5px);
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(208, 106, 86, .05), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(116, 167, 155, .05), transparent 46%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.35;
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: .01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: .98rem; }

p { margin: 0 0 .8em; }

a { color: var(--cinnabar); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font-family: var(--font-ui); }

::selection { background: rgba(166, 58, 46, .18); }

.classic {
  font-family: var(--font-classic);
  font-size: 1.18rem;
  line-height: 2;
  color: var(--ink);
  letter-spacing: .02em;
}

.muted { color: var(--muted); }
.small { font-size: .86rem; }
.accent { color: var(--cinnabar); }
.note {
  font-size: .9rem;
  color: var(--ink-2);
  background: linear-gradient(90deg, rgba(166, 58, 46, .06), transparent);
  border-left: 3px solid var(--cinnabar);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

.plain { list-style: none; padding: 0; margin: .6em 0; }
.plain li { padding: 5px 0 5px 16px; position: relative; }
.plain li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--cinnabar);
  font-weight: 700;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--paper-2); padding: 8px 14px; border-radius: 6px; }

.empty-state {
  max-width: 720px;
  margin: 60px auto;
  padding: 24px;
  text-align: center;
}
.err {
  text-align: left;
  font-size: .8rem;
  overflow: auto;
  background: var(--paper-3);
  padding: 12px;
  border-radius: 8px;
}

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