/* ============================================================
   设计令牌 Design Tokens —— 全站唯一的颜色 / 形状 / 字体来源
   组件只准引用变量，禁止写死色值（规划书 v0.2 · 5.1）

   5 套主题（data-theme）：
     editorial    编辑杂志风 · 暖米单色 · 直角 · 无阴影 · 衬线标题
     neumorphism  新拟物派   · 浅灰双光源阴影 · 圆角 12-24 · 无衬线
     natural      自然有机风 · 米色大地色 · 不规则大圆角 · 衬线标题
     macos        macOS 毛玻璃 · 深灰三级 · 1px 边框 · 毛玻璃侧栏（= 暗色档）
     clay         粘土拟态   · 糖果渐变 · 超大圆角 · 内外阴影

   强调色（data-accent）：仅 neumorphism / macos / clay 三套支持换色，
   editorial（纯单色）与 natural（固定大地色）不显示换色圆点。
   ============================================================ */

:root {
  /* ---- 尺寸不变量 ---- */
  --topbar-h: 56px;
  --sidebar-w: 224px;

  /* ---- 语义色（状态提示，跨主题保留：错误必须看得出来） ---- */
  --ok: #059669;        --ok-soft: #ecfdf5;
  --warn: #d97706;      --warn-soft: #fffbeb;
  --danger: #dc2626;    --danger-soft: #fef2f2;

  /* ---- 动效 ---- */
  --dur: .2s;
  --easing: ease-out;
}

/* =========================================================
   1. 编辑杂志风 editorial（默认）
   暖米 #F9F8F6 + 柔和黑 #1C1C1C，纯单色体系，禁止彩色强调
   ========================================================= */
[data-theme="editorial"] {
  --bg: #F9F8F6;
  --card: #F9F8F6;
  --card-soft: rgba(28, 28, 28, .035);
  --topbar-bg: rgba(249, 248, 246, .92);
  --sidebar-bg: #F9F8F6;

  --text: #1C1C1C;
  --text-sub: rgba(28, 28, 28, .60);
  --text-weak: rgba(28, 28, 28, .40);
  --border: rgba(28, 28, 28, .10);
  --border-strong: rgba(28, 28, 28, .40);

  /* 纯单色：强调色就是前景色本身 */
  --accent: #1C1C1C;
  --accent-strong: #1C1C1C;
  --accent-soft: rgba(28, 28, 28, .06);
  --accent-2: #1C1C1C;
  --on-accent: #F9F8F6;

  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;

  --shadow: none;
  --shadow-hover: none;
  --shadow-inset: none;
  --shadow-inset-sm: none;

  --font-head: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --head-weight: 400;
  --head-tracking: -0.02em;

  --dur: .5s;
  --easing: cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================
   2. 新拟物派 neumorphism
   浅灰 #e0e5ec + 双光源阴影（左上亮 #ffffff / 右下暗 #b8bcc2）
   ========================================================= */
[data-theme="neumorphism"] {
  --bg: #e0e5ec;
  --card: #e0e5ec;
  --card-soft: #e7ebf1;
  --topbar-bg: #e0e5ec;
  --sidebar-bg: #e0e5ec;

  --text: #333333;
  --text-sub: #6b7280;
  --text-weak: #9ca3af;
  --border: transparent;
  --border-strong: rgba(107, 114, 128, .25);

  --accent: #6d5dfc;
  --accent-strong: #5648d6;
  --accent-soft: #d8d4fb;
  --accent-2: #8b7ffd;
  --on-accent: #ffffff;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 24px;

  --neu-dark: #b8bcc2;   /* 右下暗影色（底色系可换） */
  --neu-light: #ffffff;  /* 左上亮影色 */
  --shadow: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --shadow-hover: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --shadow-inset: inset 6px 6px 12px var(--neu-dark), inset -6px -6px 12px var(--neu-light);
  --shadow-inset-sm: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);

  --font-head: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --head-weight: 600;
  --head-tracking: 0;

  --dur: .3s;
  --easing: ease-in-out;
}

/* =========================================================
   3. 自然有机风 natural
   米色 #faf6f1 + 大地色 #5c4033 / sage #8b9d77，不规则圆角
   ========================================================= */
[data-theme="natural"] {
  --bg: #faf6f1;
  --card: #fffdf9;
  --card-soft: #f3ece2;
  --topbar-bg: rgba(250, 246, 241, .92);
  --sidebar-bg: #faf6f1;

  --text: #44403c;
  --text-sub: #78716c;
  --text-weak: #a8a29e;
  --border: #e7ddd0;
  --border-strong: #d6c8b6;

  --accent: #5c4033;
  --accent-strong: #3d2b22;
  --accent-soft: #e9e0d3;
  --accent-2: #8b9d77;
  --on-accent: #faf6f1;

  /* 有机不规则圆角：四角不同半径，避免工业标准圆 */
  --radius: 26px 38px 24px 34px;
  --radius-sm: 999px;
  --radius-lg: 36px 48px 32px 44px;

  --shadow: 0 2px 10px rgba(92, 64, 51, .07);
  --shadow-hover: 0 4px 14px rgba(92, 64, 51, .10);
  --shadow-inset: inset 0 1px 3px rgba(92, 64, 51, .10);
  --shadow-inset-sm: inset 0 1px 2px rgba(92, 64, 51, .08);

  --font-head: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --head-weight: 400;
  --head-tracking: -0.01em;

  --dur: .5s;
  --easing: ease-in-out;
}

/* =========================================================
   4. macOS 毛玻璃 macos（= 暗色档）
   三级深灰 #1c1c1e → #2c2c2e → #3a3a3c，1px 半透边框，无渐变无阴影
   ========================================================= */
[data-theme="macos"] {
  --bg: #1c1c1e;
  --card: #2c2c2e;
  --card-soft: #3a3a3c;
  --topbar-bg: rgba(28, 28, 30, .85);
  --sidebar-bg: rgba(28, 28, 30, .8);

  --text: rgba(255, 255, 255, .95);
  --text-sub: rgba(255, 255, 255, .70);
  --text-weak: rgba(255, 255, 255, .40);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .25);

  --accent: #0a84ff;
  --accent-strong: #409cff;
  --accent-soft: rgba(10, 132, 255, .18);
  --accent-2: #0a84ff;
  --on-accent: #ffffff;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 12px;

  --shadow: 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-inset: none;
  --shadow-inset-sm: none;

  --font-head: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --head-weight: 600;
  --head-tracking: 0;

  /* 暗底上的语义色要提亮才看得清 */
  --ok: #30d158;        --ok-soft: rgba(48, 209, 88, .16);
  --warn: #ff9f0a;      --warn-soft: rgba(255, 159, 10, .16);
  --danger: #ff453a;    --danger-soft: rgba(255, 69, 58, .16);

  --dur: .2s;
  --easing: ease-out;
}

/* =========================================================
   5. 粘土拟态 clay
   糖果渐变 + 超大圆角 32px + 内外组合阴影
   ========================================================= */
[data-theme="clay"] {
  --bg: linear-gradient(135deg, #fef3c7 0%, #fce7f3 48%, #ede9fe 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #fdf1f6 100%);
  --card-soft: #fbe7f0;
  --topbar-bg: rgba(255, 255, 255, .78);
  --sidebar-bg: rgba(255, 255, 255, .7);

  --text: #831843;
  --text-sub: #9d4869;
  --text-weak: #c68aa4;
  --border: transparent;
  --border-strong: rgba(190, 24, 93, .18);

  --accent: #f472b6;
  --accent-strong: #db2777;
  --accent-soft: #fbd3e4;
  --accent-2: #fb7185;
  --on-accent: #ffffff;

  --clay-in: linear-gradient(180deg, #fdf0f5 0%, #f8e2ec 100%);  /* 输入面渐变（底色系可换） */
  --radius: 32px;
  --radius-sm: 20px;
  --radius-lg: 40px;

  --shadow: 12px 12px 24px rgba(0, 0, 0, .10), inset 6px 6px 12px rgba(255, 255, 255, .60), inset -4px -4px 8px rgba(0, 0, 0, .05);
  --shadow-hover: 6px 6px 12px rgba(0, 0, 0, .10), inset 4px 4px 8px rgba(255, 255, 255, .60), inset -3px -3px 6px rgba(0, 0, 0, .05);
  --shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, .10), inset -4px -4px 8px rgba(255, 255, 255, .90);
  --shadow-inset-sm: inset 3px 3px 6px rgba(0, 0, 0, .08), inset -3px -3px 6px rgba(255, 255, 255, .85);

  --font-head: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --head-weight: 700;
  --head-tracking: 0;

  --dur: .3s;
  --easing: cubic-bezier(.34, 1.56, .64, 1);  /* 弹簧回弹 */
}

/* =========================================================
   强调色变体 —— 仅 neumorphism / macos / clay 支持
   ========================================================= */

/* --- neumorphism：紫 / 珊瑚 / 薄荷 / 柠檬 --- */
[data-theme="neumorphism"][data-accent="coral"] { --accent: #ff6b6b; --accent-strong: #e85555; --accent-soft: #ffd9d9; --accent-2: #ff8f8f; }
[data-theme="neumorphism"][data-accent="mint"]  { --accent: #4ecdc4; --accent-strong: #35b3ab; --accent-soft: #d3f5f2; --accent-2: #7fdfd8; --on-accent: #ffffff; }
[data-theme="neumorphism"][data-accent="lemon"] { --accent: #ffe66d; --accent-strong: #f2d649; --accent-soft: #fff6c9; --accent-2: #fff0a3; --on-accent: #4a4318; }

/* --- macos：系统蓝 / 紫 / 玫红 / 绿 --- */
[data-theme="macos"][data-accent="violet"] { --accent: #bf5af2; --accent-strong: #d18cf7; --accent-soft: rgba(191, 90, 242, .20); --accent-2: #bf5af2; }
[data-theme="macos"][data-accent="rose"]   { --accent: #ff375f; --accent-strong: #ff6482; --accent-soft: rgba(255, 55, 95, .20); --accent-2: #ff375f; }
[data-theme="macos"][data-accent="green"]  { --accent: #30d158; --accent-strong: #5fdd7f; --accent-soft: rgba(48, 209, 88, .20); --accent-2: #30d158; }

/* --- clay：粉 / 薄荷 / 淡紫 / 柠檬 --- */
[data-theme="clay"][data-accent="mint"]   { --accent: #6ee7b7; --accent-strong: #34d399; --accent-soft: #d1fae5; --accent-2: #a7f3d0; --on-accent: #065f46; }
[data-theme="clay"][data-accent="lilac"]  { --accent: #c4b5fd; --accent-strong: #a78bfa; --accent-soft: #ede9fe; --accent-2: #ddd6fe; --on-accent: #4c1d95; }
[data-theme="clay"][data-accent="lemon"]  { --accent: #fcd34d; --accent-strong: #f59e0b; --accent-soft: #fef3c7; --accent-2: #fde68a; --on-accent: #78350f; }

/* --- 主题选择面板里的色卡 --- */
.swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-strong); transition: transform var(--dur) var(--easing); position: relative; }
/* 视觉 18px，触摸热区扩到 44px（手机点色点不再点不中） */
.swatch::after { content: ""; position: absolute; inset: -13px; }
.swatch[data-accent=""]       { background: var(--accent); }
.swatch[data-accent="violet"] { background: #6d5dfc; }
.swatch[data-accent="coral"]  { background: #ff6b6b; }
.swatch[data-accent="mint"]   { background: #4ecdc4; }
.swatch[data-accent="lemon"]  { background: #ffe66d; }
.swatch[data-accent="blue"]   { background: #0a84ff; }
.swatch[data-accent="rose"]   { background: #ff375f; }
.swatch[data-accent="green"]  { background: #30d158; }
.swatch[data-accent="lilac"]  { background: #c4b5fd; }
.swatch.active { border-color: var(--text); transform: scale(1.18); }


/* =========================================================
   底色系（data-tone）—— 每套主题的背景/卡片色系可整体更换
   与强调色（data-accent）正交组合：底色管「纸面」，强调色管「笔色」
   默认底色 = 不带 data-tone（或值为空），以下为备选
   ========================================================= */

/* --- editorial 纸张色调（墨色文字不动，只换纸；六种纸面各自拉开色相） --- */
[data-theme="editorial"][data-tone="mist"]  { --bg:#EDF1F5; --card:#EDF1F5; --card-soft:rgba(28,28,28,.05);  --topbar-bg:rgba(237,241,245,.92); --sidebar-bg:#EDF1F5; }
[data-theme="editorial"][data-tone="rose"]  { --bg:#F9EFF0; --card:#F9EFF0; --card-soft:rgba(28,28,28,.05);  --topbar-bg:rgba(249,239,240,.92); --sidebar-bg:#F9EFF0; }
[data-theme="editorial"][data-tone="wheat"] { --bg:#F4EDDB; --card:#F4EDDB; --card-soft:rgba(28,28,28,.055); --topbar-bg:rgba(244,237,219,.92); --sidebar-bg:#F4EDDB; }
[data-theme="editorial"][data-tone="sage"]  { --bg:#ECF1E7; --card:#ECF1E7; --card-soft:rgba(28,28,28,.05);  --topbar-bg:rgba(236,241,231,.92); --sidebar-bg:#ECF1E7; }
[data-theme="editorial"][data-tone="lilac"] { --bg:#F1EDF6; --card:#F1EDF6; --card-soft:rgba(28,28,28,.05);  --topbar-bg:rgba(241,237,246,.92); --sidebar-bg:#F1EDF6; }

/* --- neumorphism 塑料色（阴影色随底色一起走，光源方向不变） --- */
[data-theme="neumorphism"][data-tone="blue"]  { --bg:#dde6f2; --card:#dde6f2; --card-soft:#e4ecf6; --topbar-bg:#dde6f2; --sidebar-bg:#dde6f2; --neu-dark:#b0bfd6; --neu-light:#ffffff; }
[data-theme="neumorphism"][data-tone="rose"]  { --bg:#efe1e8; --card:#efe1e8; --card-soft:#f3e8ee; --topbar-bg:#efe1e8; --sidebar-bg:#efe1e8; --neu-dark:#c6afb9; --neu-light:#ffffff; }
[data-theme="neumorphism"][data-tone="mint"]  { --bg:#ddebe4; --card:#ddebe4; --card-soft:#e4f0ea; --topbar-bg:#ddebe4; --sidebar-bg:#ddebe4; --neu-dark:#acc0b7; --neu-light:#ffffff; }
[data-theme="neumorphism"][data-tone="sand"]  { --bg:#eae3d6; --card:#eae3d6; --card-soft:#f0eadf; --topbar-bg:#eae3d6; --sidebar-bg:#eae3d6; --neu-dark:#c5baa6; --neu-light:#ffffff; }
[data-theme="neumorphism"][data-tone="lilac"] { --bg:#e5e1f1; --card:#e5e1f1; --card-soft:#ebe8f5; --topbar-bg:#e5e1f1; --sidebar-bg:#e5e1f1; --neu-dark:#bab2d3; --neu-light:#ffffff; }

/* --- natural 泥土色（米色系的近亲，边界色跟着调） --- */
[data-theme="natural"][data-tone="clay"]  { --bg:#f7eee6; --card:#fdf8f2; --card-soft:#f0e2d2; --topbar-bg:rgba(247,238,230,.92); --sidebar-bg:#f7eee6; --border:#e8d5c2; --border-strong:#d8bfa6; }
[data-theme="natural"][data-tone="leaf"]  { --bg:#f0f3ea; --card:#f8faf3; --card-soft:#e6ecdb; --topbar-bg:rgba(240,243,234,.92); --sidebar-bg:#f0f3ea; --border:#d8e0c8; --border-strong:#c2cda8; }
[data-theme="natural"][data-tone="mist"]  { --bg:#eef2f4; --card:#f7fafb; --card-soft:#e2eaee; --topbar-bg:rgba(238,242,244,.92); --sidebar-bg:#eef2f4; --border:#d4e0e6; --border-strong:#b8ccd4; }
[data-theme="natural"][data-tone="sand"]  { --bg:#f6f0df; --card:#fdfaf1; --card-soft:#efe6cd; --topbar-bg:rgba(246,240,223,.92); --sidebar-bg:#f6f0df; --border:#e2d8bd; --border-strong:#cdbf9c; }
[data-theme="natural"][data-tone="stone"] { --bg:#eef0ee; --card:#f8faf8; --card-soft:#e3e7e4; --topbar-bg:rgba(238,240,238,.92); --sidebar-bg:#eef0ee; --border:#d6dcd9; --border-strong:#bcc5c0; }

/* --- macos 深色档的色相变体（保持三级灰结构） --- */
[data-theme="macos"][data-tone="midnight"] { --bg:#16181f; --card:#22242e; --card-soft:#2e3140; --topbar-bg:rgba(22,24,31,.85); --sidebar-bg:rgba(22,24,31,.8); }
[data-theme="macos"][data-tone="plum"]     { --bg:#1c1722; --card:#2a2230; --card-soft:#382d42; --topbar-bg:rgba(28,23,34,.85); --sidebar-bg:rgba(28,23,34,.8); }
[data-theme="macos"][data-tone="forest"]   { --bg:#141a17; --card:#222a26; --card-soft:#2e3833; --topbar-bg:rgba(20,26,23,.85); --sidebar-bg:rgba(20,26,23,.8); }
[data-theme="macos"][data-tone="coffee"]   { --bg:#1d1815; --card:#2a2320; --card-soft:#372e2a; --topbar-bg:rgba(29,24,21,.85); --sidebar-bg:rgba(29,24,21,.8); }
[data-theme="macos"][data-tone="slate"]    { --bg:#14181c; --card:#20262b; --card-soft:#2b333a; --topbar-bg:rgba(20,24,28,.85); --sidebar-bg:rgba(20,24,28,.8); }

/* --- clay 糖果渐变色（背景/卡片/输入面三组渐变一起换） --- */
[data-theme="clay"][data-tone="mint"] {
  --bg: linear-gradient(135deg, #d1fae5 0%, #ccfbf1 48%, #e0f2fe 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #eafaf4 100%);
  --card-soft: #d9f2ea; --topbar-bg: rgba(255,255,255,.78); --sidebar-bg: rgba(255,255,255,.7);
  --clay-in: linear-gradient(180deg, #eaf7f1 0%, #d9efe6 100%);
}
[data-theme="clay"][data-tone="lilac"] {
  --bg: linear-gradient(135deg, #ede9fe 0%, #e9d5ff 48%, #fce7f3 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #f5f0fc 100%);
  --card-soft: #ebe2f8; --topbar-bg: rgba(255,255,255,.78); --sidebar-bg: rgba(255,255,255,.7);
  --clay-in: linear-gradient(180deg, #f2ecfb 0%, #e4daf5 100%);
}
[data-theme="clay"][data-tone="lemon"] {
  --bg: linear-gradient(135deg, #fef9c3 0%, #fef3c7 48%, #fde68a 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #fdf6dd 100%);
  --card-soft: #f8edc8; --topbar-bg: rgba(255,255,255,.78); --sidebar-bg: rgba(255,255,255,.7);
  --clay-in: linear-gradient(180deg, #fcf4d8 0%, #f5e6b0 100%);
}
[data-theme="clay"][data-tone="sky"] {
  --bg: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 48%, #dbeafe 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #edf5fe 100%);
  --card-soft: #d7e8fb; --topbar-bg: rgba(255,255,255,.78); --sidebar-bg: rgba(255,255,255,.7);
  --clay-in: linear-gradient(180deg, #eaf3fd 0%, #d5e6f8 100%);
}
[data-theme="clay"][data-tone="blush"] {
  --bg: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 48%, #fbcfe8 100%);
  --card: linear-gradient(145deg, #ffffff 0%, #fff1f2 100%);
  --card-soft: #fcd9df; --topbar-bg: rgba(255,255,255,.78); --sidebar-bg: rgba(255,255,255,.7);
  --clay-in: linear-gradient(180deg, #fdeef0 0%, #f9d3da 100%);
}