/* =====================================================================
 * skins.css — HanPath 多皮肤 token 体系
 *
 * 关键概念：皮肤(skin) 与 模式(theme) 是两个【正交轴】。
 *   · skin ∈ { paper, jade, cinnabar, ink }  —— 决定配色家族
 *   · theme ∈ { light, dark }                —— 决定明暗
 *
 * JS 在绘制前会把用户选择的 auto 解析成具体的 light / dark，
 * 写进 html[data-theme]，因此 CSS 只需写 [data-theme="dark"] 一套即可。
 * 无 JS 时只有默认皮肤 paper 需要跟随系统，见文件底部 @media 兜底。
 *
 * 每个皮肤每个模式都必须给出全部 16 个基线 token（外加 tone1..tone5）。
 * 定位一律用逻辑属性，绝不使用 left/right 做方向装饰。
 * ===================================================================== */

/* 与皮肤无关的结构性变量。
   ★ 只放 style.css 里**没有**的：--radius / --maxw 由 style.css 拥有，
     在这里重复定义会变成「谁后加载谁生效」的隐式耦合（而且两边值不同）。 */
:root{
  --radius-sm: 8px;
  --space: clamp(1rem, 2.5vw, 1.75rem);
  --shadow-card: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  /* 笔顺 SVG 的边长。JS 会在 .hzbox 上按实测值覆盖它（--hw: 174px），
     这里的默认值只是「JS 还没跑时别让 width:var(--hw) 变成无效声明」的兜底。
     声明在 :root 是有意的：check-skins.js 会检查「每个被 var() 引用的 token 都有定义」，
     少了这一行闸门就会红 —— 那次是真的捕到一个会被静默丢掉的声明。 */
  --hw: 100%;
}

/* ---------- 浅色基底（4 皮肤） ---------- */

[data-skin="paper"]{
  --paper:#f7f2e7; --paper-2:#fdfaf3; --ink:#221f1b; --ink-2:#4a4339;
  --muted:#6b6357; --line:#ddd2bc; --line-2:#c7bb9f;
  --brand:#b23a2e; --brand-2:#8f2c22; --brand-ink:#fdfaf3;
  --accent:#8a6526; --celadon:#3f6157; --ok:#3f7a52; --bad:#b3422e;
  --tone1:#b23a2e; --tone2:#c07a1e; --tone3:#3f7a52; --tone4:#2f5f96; --tone5:#6a4c8a;
}

[data-skin="jade"]{
  --paper:#eef0e8; --paper-2:#f6f7f1; --ink:#20302a; --ink-2:#3e5249;
  --muted:#566a60; --line:#ced5c9; --line-2:#bcc7bc;
  --brand:#266b50; --brand-2:#1f5c43; --brand-ink:#f6f7f1;
  --accent:#7a5d22; --celadon:#3f6157; --ok:#3f7a52; --bad:#b3422e;
  --tone1:#1f6b4f; --tone2:#7a5d22; --tone3:#2f7d6b; --tone4:#2f5f96; --tone5:#5a4c8a;
}

[data-skin="cinnabar"]{
  --paper:#f3e7dd; --paper-2:#faefe7; --ink:#2a1410; --ink-2:#5a2f26;
  --muted:#7a4a3e; --line:#ddcabe; --line-2:#d2b3a3;
  --brand:#c0341f; --brand-2:#9a2615; --brand-ink:#faefe7;
  --accent:#7e5418; --celadon:#2f6f64; --ok:#3f7a52; --bad:#b3422e;
  --tone1:#c0341f; --tone2:#a85a18; --tone3:#3f7a52; --tone4:#9a2615; --tone5:#7a3a6a;
}

[data-skin="ink"]{
  --paper:#ecebe7; --paper-2:#f4f3f0; --ink:#1c1d1f; --ink-2:#3f4042;
  --muted:#5e5f61; --line:#cfcec9; --line-2:#c4c3bd;
  --brand:#2c4a6e; --brand-2:#1f3a57; --brand-ink:#f4f3f0;
  --accent:#6f5626; --celadon:#3f6157; --ok:#3f7a52; --bad:#b3422e;
  --tone1:#2c4a6e; --tone2:#6f5626; --tone3:#3f6157; --tone4:#5a4c8a; --tone5:#4a6a8a;
}

/* ---------- 深色覆盖（[data-theme="dark"] 一套，4 皮肤） ---------- */

[data-theme="dark"][data-skin="paper"]{
  --paper:#14130f; --paper-2:#1d1b16; --ink:#ece5d8; --ink-2:#c6bda9;
  --muted:#a99e8c; --line:#312d25; --line-2:#443e33;
  --brand:#e0705f; --brand-2:#f0917f; --brand-ink:#14130f;
  --accent:#d8ab5c; --celadon:#7fb0a1; --ok:#74c593; --bad:#e88a76;
  --tone1:#e0705f; --tone2:#dda24a; --tone3:#74c593; --tone4:#71a5d8; --tone5:#b392cf;
}

[data-theme="dark"][data-skin="jade"]{
  --paper:#10160f; --paper-2:#18211a; --ink:#e2ece2; --ink-2:#b9cabb;
  --muted:#9fb3a4; --line:#2a332b; --line-2:#3a463b;
  --brand:#5fb98c; --brand-2:#7fd0a4; --brand-ink:#10160f;
  --accent:#d8b35c; --celadon:#7fb0a1; --ok:#74c593; --bad:#e88a76;
  --tone1:#5fb98c; --tone2:#d8b35c; --tone3:#7fd0a4; --tone4:#71a5d8; --tone5:#b39ad8;
}

[data-theme="dark"][data-skin="cinnabar"]{
  --paper:#1a0f0b; --paper-2:#251610; --ink:#f3e3d8; --ink-2:#d8b3a3;
  --muted:#c09584; --line:#3a231b; --line-2:#4f2f23;
  --brand:#ef6b4f; --brand-2:#f5856a; --brand-ink:#1a0f0b;
  --accent:#d89a5c; --celadon:#6fb0a1; --ok:#74c593; --bad:#e88a76;
  --tone1:#ef6b4f; --tone2:#e0a05c; --tone3:#74c593; --tone4:#d8896a; --tone5:#c98ac0;
}

[data-theme="dark"][data-skin="ink"]{
  --paper:#0e0f11; --paper-2:#17181b; --ink:#e8e9ec; --ink-2:#bcc0c6;
  --muted:#9aa0a8; --line:#26282c; --line-2:#34373c;
  --brand:#6f9bd1; --brand-2:#88b0e0; --brand-ink:#0e0f11;
  --accent:#d0ad6a; --celadon:#b392cf; --ok:#74c593; --bad:#e88a76;
  --tone1:#6f9bd1; --tone2:#d0ad6a; --tone3:#b392cf; --tone4:#88b0e0; --tone5:#9ab0c0;
}

/* ---------- 无 JS 兜底：只有默认皮肤 paper 跟随系统 ---------- */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"])[data-skin="paper"]{
    --paper:#14130f; --paper-2:#1d1b16; --ink:#ece5d8; --ink-2:#c6bda9;
    --muted:#a99e8c; --line:#312d25; --line-2:#443e33;
    --brand:#e0705f; --brand-2:#f0917f; --brand-ink:#14130f;
    --accent:#d8ab5c; --celadon:#7fb0a1; --ok:#74c593; --bad:#e88a76;
    --tone1:#e0705f; --tone2:#dda24a; --tone3:#74c593; --tone4:#71a5d8; --tone5:#b392cf;
  }
}