/* 相生 design tokens — 2026-11-06
   Original Eastern identity: paper, ink, and five-element accents (木青 火赤 土黄 金白 水玄).
   Load BEFORE page CSS. Pages read these variables; do not hard-code colors in new rules.
   Accessibility floor: body text >= 13px, smallest text 12px, tap targets >= 44px,
   text colors on --xs-paper/--xs-surface meet WCAG AA (>= 4.5:1). */
:root{
  /* Neutrals */
  --xs-paper:#f7f4ec;        /* page background, 宣纸 */
  --xs-surface:#fffdf8;      /* cards */
  --xs-surface-2:#f1ede2;    /* sunken / chip background */
  --xs-ink:#1f2a26;          /* primary text, 15.0:1 on paper */
  --xs-ink-2:#3b4842;        /* secondary text, 9.4:1 */
  --xs-muted:#5d665e;        /* tertiary text, 5.6:1 */
  --xs-line:#e2dccd;         /* hairlines */
  --xs-line-strong:#cfc7b3;  /* input borders */
  --xs-primary:#24473a;      /* 墨绿, primary action */
  --xs-primary-ink:#fffdf8;
  --xs-primary-soft:#e3ebe4;
  --xs-danger:#9c3a2a;
  --xs-focus:#4f8a6f;

  /* Five elements: strong = text/border on paper (>= 4.5:1), soft = tint background */
  --xs-wood:#2f6e55;  --xs-wood-soft:#e1ede4;
  --xs-fire:#ad3f2c;  --xs-fire-soft:#f6e1d9;
  --xs-earth:#8a5f17; --xs-earth-soft:#f1e5c8;
  --xs-metal:#56606b; --xs-metal-soft:#eaecee;
  --xs-water:#1d3550; --xs-water-soft:#dfe6ee;
  /* Per-element hook: set data-element on any container to re-tint its children */
  --xs-el:var(--xs-primary); --xs-el-soft:var(--xs-primary-soft);

  /* Type */
  --xs-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --xs-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --xs-fs-xs:12px; --xs-fs-sm:13px; --xs-fs-base:15px; --xs-fs-md:17px;
  --xs-fs-lg:20px; --xs-fs-xl:24px; --xs-fs-2xl:30px; --xs-fs-3xl:38px;
  --xs-fs-display:64px; --xs-fs-hero:96px;
  --xs-lh-tight:1.2; --xs-lh-base:1.6;

  /* Space (4px grid) */
  --xs-s1:4px; --xs-s2:8px; --xs-s3:12px; --xs-s4:16px; --xs-s5:20px;
  --xs-s6:24px; --xs-s8:32px; --xs-s10:40px; --xs-s14:56px;
  --xs-gutter:20px;

  /* Shape & depth */
  --xs-r-sm:6px; --xs-r-md:10px; --xs-r-lg:14px; --xs-r-xl:20px; --xs-r-pill:999px;
  --xs-shadow-sm:0 1px 2px rgba(31,42,38,.06),0 1px 1px rgba(31,42,38,.04);
  --xs-shadow-md:0 6px 20px -8px rgba(31,42,38,.18),0 2px 4px rgba(31,42,38,.05);

  /* Interaction */
  --xs-tap:44px;
  --xs-ease:cubic-bezier(.2,.7,.2,1);
}
[data-element="wood"]{--xs-el:var(--xs-wood);--xs-el-soft:var(--xs-wood-soft)}
[data-element="fire"]{--xs-el:var(--xs-fire);--xs-el-soft:var(--xs-fire-soft)}
[data-element="earth"]{--xs-el:var(--xs-earth);--xs-el-soft:var(--xs-earth-soft)}
[data-element="metal"]{--xs-el:var(--xs-metal);--xs-el-soft:var(--xs-metal-soft)}
[data-element="water"]{--xs-el:var(--xs-water);--xs-el-soft:var(--xs-water-soft)}
@media (prefers-reduced-motion:reduce){:root{--xs-ease:linear}}