/* ==========================================================================
   主题 · 古朴中医（宣纸 / 墨色 / 朱砂 / 青黛）
   --------------------------------------------------------------------------
   只在 body.theme-gupu 下生效，覆盖 app.css 的设计变量并做少量质感调整；
   不复制布局代码，因此两套主题共用同一份结构与同一套响应式规则。
   配色取自传统矿物色：宣纸、松烟墨、朱砂、赭石、藤黄、青黛、苍绿。
   文字与底色对比度按 WCAG AA 校准（正文 ≥ 7:1，按钮文字 ≥ 4.5:1）。
   ========================================================================== */

:root{
  /* 纸与墨 */
  --sand-50:#F9F4E9; --sand-100:#F2ECDD; --sand-200:#E9E0CC; --sand-300:#DBCEB2; --sand-400:#C9B894;
  --ink-900:#211D17; --ink-800:#322D25; --ink-700:#494237; --ink-600:#61594A; --ink-500:#7A7160; --ink-400:#988E78;
  --white:#FCF8EE; --line:#DCCFB2; --line-strong:#C4B08A;

  /* 朱砂 / 赭石：主色与强调色 */
  --clay-100:#F5E5DA; --clay-200:#E7C7B2; --clay-300:#D3A183; --clay-400:#B9714C;
  --clay-500:#A64B2E; --clay-600:#98422A; --clay-700:#8A3A24; --clay-800:#6F2C1A; --clay-900:#57210F;

  /* 青黛 / 苍绿 / 藤黄 / 朱：语义色成对给出底色与墨色 */
  --indigo-100:#E2E7E6; --indigo-200:#C3CFCB; --indigo-500:#3C5A63; --indigo-600:#2F4A52; --indigo-700:#243A41;
  --jade-100:#E4EBDD; --jade-500:#4A7351; --jade-600:#3C6042;
  --ok:#4A7351; --ok-ink:#3A5C40; --ok-bg:#E8EEE3; --ok-line:#C9D8BF;
  --warn:#96701B; --warn-ink:#7A5A14; --warn-bg:#F6EBCF; --warn-line:#E3D2A8;
  --danger:#A6382C; --danger-ink:#8C2E24; --danger-bg:#F6E3DC; --danger-line:#E6C6BB;
  --info:#3C5A63; --info-ink:#2F4A52; --info-bg:#E6EBEF; --info-line:#CBD7DC;

  /* 形：古朴靠方正，不靠大圆角 */
  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px; --r-2xl:10px; --r-pill:5px;

  /* 影：纸边阴影，不用悬浮感 */
  --sh-1:0 1px 0 rgba(33,29,23,.05);
  --sh-2:0 2px 10px rgba(33,29,23,.10);
  --sh-3:0 6px 22px rgba(33,29,23,.14);
  --ring:0 0 0 3px rgba(166,75,46,.2);
  --brand-grad:linear-gradient(140deg,var(--clay-500),var(--clay-800));
  --paper-grad:radial-gradient(1100px 460px at 50% -12%, #F9F4E9 0%, rgba(249,244,233,0) 72%);
  --paper-fiber:repeating-linear-gradient(135deg, rgba(196,176,138,.075) 0 1px, rgba(0,0,0,0) 1px 7px);

  /* 字：标题与正文都用衬线，缺字体时退回系统宋体再退回无衬线 */
  --ff:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",SimSun,"STZhongsong",serif;
  --ff-display:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","STZhongsong",SimSun,serif;
}

body.theme-gupu{
  color:var(--ink-800);
  background-color:var(--sand-100);
  letter-spacing:.012em;
}
/* 纸纹走 app.css 的固定伪元素层（attachment 设成 fixed 会让 iOS 逐帧重绘） */
body.theme-gupu::before{background-image:var(--paper-grad), var(--paper-fiber)}

/* 标题：更重的墨色与略宽的间距，像刻本行题 */
body.theme-gupu h1,body.theme-gupu h2,body.theme-gupu h3,body.theme-gupu h4{
  color:var(--ink-900);font-weight:700;letter-spacing:.05em;
}
body.theme-gupu h2{border-bottom:1px solid var(--line);padding-bottom:.35em}
/* 分节朱线在古朴主题下收成方角短线，更像书口界栏 */
body.theme-gupu .section>h2::before{width:3px;border-radius:0;background:var(--clay-600)}

/* 卡片：双线纸框（外浅内朱），替代圆角阴影卡 */
body.theme-gupu .card,body.theme-gupu .advice,body.theme-gupu .list__item,body.theme-gupu .quiz__card,
body.theme-gupu .consent,body.theme-gupu .selfcheck,body.theme-gupu .shootgroup,body.theme-gupu .stat,
body.theme-gupu .thumb,body.theme-gupu .article-lede{
  background:var(--white);
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 1px var(--white), inset 0 0 0 2px rgba(166,75,46,.10);
  border-radius:var(--r);
}
body.theme-gupu .card--pad{padding:20px 18px}
body.theme-gupu .empty{border-style:dashed;border-color:var(--line-strong);background:transparent}

/* 按钮：方正、实色、下压一格的内描边 */
body.theme-gupu .btn{border-radius:var(--r-pill);letter-spacing:.06em;font-weight:700}
body.theme-gupu .btn--primary{
  background:var(--clay-600);border-color:var(--clay-800);color:#FDF6EA;
  box-shadow:inset 0 1px 0 rgba(253,246,234,.22), inset 0 -1px 0 rgba(0,0,0,.16);
}
body.theme-gupu .btn--primary:hover{background:var(--clay-700);color:#FDF6EA}
body.theme-gupu .btn--outline{border-color:var(--clay-600);color:var(--clay-700)}
body.theme-gupu .benefit-list li{background:transparent;border-color:var(--line-strong);border-radius:var(--r-xs)}
/* 微信登录：绿色保留（认出微信靠颜色），只换成古朴主题的实色与内描边质感 */
body.theme-gupu .btn--wechat{
  background:var(--wechat);border-color:var(--wechat-deep);color:#FDF6EA;
  box-shadow:inset 0 1px 0 rgba(253,246,234,.22), inset 0 -1px 0 rgba(0,0,0,.16);
}
body.theme-gupu .btn--wechat:hover{background:var(--wechat-deep);color:#FDF6EA}
body.theme-gupu .btn--quiet,body.theme-gupu .btn--ghost{color:var(--ink-600)}

/* 徽章与提示条：改成窄角、加左侧色条 */
body.theme-gupu .badge{border-radius:var(--r-xs);border:1px solid var(--line-strong);background:var(--sand-50)}
body.theme-gupu .badge--clay{background:var(--clay-100);border-color:var(--clay-200);color:var(--clay-800)}
body.theme-gupu .alert,body.theme-gupu .notice,body.theme-gupu .risknotice{border-radius:var(--r-sm)}
body.theme-gupu .alert--danger{border-left:3px solid var(--danger)}
body.theme-gupu .notice--warn{border-left:3px solid var(--warn)}
body.theme-gupu .risknotice::before{width:3px;background:var(--danger)}

/* 顶栏与页脚：加一道朱砂细线，像书口 */
body.theme-gupu .topnav{border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 rgba(166,75,46,.18)}
body.theme-gupu .footer{border-top:1px solid var(--line-strong);box-shadow:none;background:linear-gradient(180deg,var(--sand-200),var(--sand-300))}
body.theme-gupu .footer::before{background:linear-gradient(90deg,rgba(166,75,46,0),rgba(166,75,46,.55) 22%,rgba(166,75,46,.55) 78%,rgba(166,75,46,0))}

/* 首页与结论卡：暖砂渐变在古朴主题里改成宣纸 + 朱砂淡晕 */
body.theme-gupu .hero,body.theme-gupu .constitution,body.theme-gupu .userbar{
  background:linear-gradient(160deg,var(--white),var(--sand-200));border-color:var(--line-strong)}
body.theme-gupu .hero::before,body.theme-gupu .hero::after,body.theme-gupu .constitution::after,body.theme-gupu .userbar::after{
  background:radial-gradient(circle at 50% 50%,rgba(166,75,46,.10),rgba(166,75,46,0) 70%)}
body.theme-gupu .constitution::before{background:var(--clay-600);height:2px}

/* 答题与量表 */
body.theme-gupu .option{border-radius:var(--r-sm)}
body.theme-gupu .option.is-selected{border-color:var(--clay-600);background:var(--clay-100)}
/* 单选仍是圆点、多选才是方框：只对方框收紧圆角，否则两套标记形状一致，客户分不清可选还是多选 */
body.theme-gupu .option__mark{border-radius:50%}
body.theme-gupu .option__mark--box{border-radius:3px}
body.theme-gupu .progress__bar{background:linear-gradient(90deg,var(--clay-400),var(--clay-700))}
body.theme-gupu .score__fill{background:linear-gradient(90deg,var(--clay-400),var(--clay-700))}

/* 报告与表格：界格更硬一点，接近抄本 */
body.theme-gupu .table th{background:var(--sand-200);color:var(--ink-900)}
body.theme-gupu .table td,body.theme-gupu .table th{border-bottom:1px solid var(--line)}
body.theme-gupu .report__head{border-bottom:2px solid var(--clay-700)}
body.theme-gupu .glance__row dt{color:var(--ink-600)}
body.theme-gupu .fold{border-radius:var(--r-sm);background:var(--sand-50)}

/* 输入控件 */
body.theme-gupu .input,body.theme-gupu .select,body.theme-gupu .textarea{
  border-radius:var(--r-sm);border-color:var(--line-strong);background:var(--white);
}
body.theme-gupu :focus-visible{outline-color:var(--clay-600)}
body.theme-gupu .switch{border-radius:var(--r-pill)}
body.theme-gupu .pager a,body.theme-gupu .pager span{border-radius:var(--r-pill)}