/* design_tokens.css · V3
 *
 * V3 升级：建立产品级排版系统（typography + spacing + tracking）。
 * 所有风格共享排版规则，每套风格只覆盖颜色 / 字体 family / 圆角 / 阴影。
 *
 * 详见 V3_PRODUCT_POLISH_BRIEF.md。
 *
 * V3 当轮精修：warm-handcraft / dark-lab（2 套）
 * V3 小修：paper-notebook
 * V3 保留：forest-squirrel / magazine-cn / glass-minimal（标"待精修"）
 */

/* ====================================================================
 * 排版系统（所有风格共享）· 10 档字号
 * 单位约定：size / line-height / weight / letter-spacing
 * ==================================================================== */

:root {
  /* 字号 · 10 档（产品标题 → micro） */
  --t-display-xl-size: 40px;
  --t-display-xl-lh: 1.08;
  --t-display-xl-tracking: -0.022em;

  --t-display-l-size: 28px;
  --t-display-l-lh: 1.15;
  --t-display-l-tracking: -0.012em;

  --t-display-m-size: 20px;
  --t-display-m-lh: 1.25;
  --t-display-m-tracking: -0.005em;

  --t-display-s-size: 16px;
  --t-display-s-lh: 1.4;
  --t-display-s-tracking: 0;

  --t-body-l-size: 14px;
  --t-body-l-lh: 1.65;
  --t-body-l-tracking: 0;

  --t-body-size: 13px;
  --t-body-lh: 1.6;
  --t-body-tracking: 0;

  --t-body-s-size: 12px;
  --t-body-s-lh: 1.55;
  --t-body-s-tracking: 0;

  --t-label-size: 11px;
  --t-label-lh: 1.4;
  --t-label-tracking: 0.08em;

  --t-label-s-size: 10px;
  --t-label-s-lh: 1.35;
  --t-label-s-tracking: 0.10em;

  --t-micro-size: 9.5px;
  --t-micro-lh: 1.3;
  --t-micro-tracking: 0.12em;

  /* 字重 · 4 档 */
  --w-display: 500;
  --w-display-heavy: 600;
  --w-body: 400;
  --w-label: 500;

  /* 间距栈 · 8 档（基于 4px grid） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 卡片 padding · 3 档 */
  --pad-compact: 16px 18px;
  --pad-regular: 22px 24px;
  --pad-spacious: 28px 32px;
}

/* ====================================================================
 * 寸今 · 高级暖米色（V3 继续精修）
 *
 * V3 改动：
 * - 主色饱和度再降一档（减土黄感）
 * - --shadow-medium 进一步收敛
 * - --border-hairline 改用 8% 而不是 10-12%
 * - 文字字体 family 不变，但所有字号通过排版系统注入
 * ==================================================================== */
[data-style="warm-handcraft"],
:root {
  /* 六类色板：降饱和 + 更深的内涵感 */
  --c-mainline_invest: #2B5440;
  --c-asset_capsule: #A47829;
  --c-necessity: #8C7C68;
  --c-recovery_maintenance: #6E8C7C;
  --c-instant_consume: #B86F44;
  --c-drift_binding: #8B3329;

  /* 强调色 */
  --c-net-positive: #2B5440;
  --c-net-negative: #8B3329;
  --c-best-capture: #A47829;
  --c-biggest-leak: #B86F44;
  --c-future: #C9BFA8;
  --c-evidence-exact: #2B5440;
  --c-evidence-coarse: #A47829;
  --c-evidence-inferred: #8C7C68;
  --c-evidence-manual: #6E8C7C;
  --c-evidence-missing: #C9BFA8;

  /* 背景：V3 再去土黄一档（偏冷的米色） */
  --bg-base: #F1ECDF;
  --bg-surface-1: #ECE5D0;
  --bg-surface-2: #F7F2E4;
  --bg-surface-3: #FDFAF1;
  --bg-overlay: rgba(46, 36, 24, 0.48);
  --bg-noise: none;

  --fg-primary: #251D14;
  --fg-secondary: #635541;
  --fg-muted: #A89678;
  --fg-on-accent: #FDFAF1;

  --border-soft: rgba(106, 90, 68, 0.14);
  --border-strong: rgba(46, 36, 24, 0.32);
  --border-dashed: rgba(106, 90, 68, 0.38);
  --border-hairline: rgba(106, 90, 68, 0.08);

  --shadow-soft: 0 0 0 0 transparent;
  --shadow-medium: 0 1px 2px rgba(46, 36, 24, 0.05), 0 6px 20px rgba(46, 36, 24, 0.03);
  --shadow-hover: 0 1px 2px rgba(46, 36, 24, 0.06), 0 10px 28px rgba(46, 36, 24, 0.05);
  --shadow-glow: none;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --font-display: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "PingFang SC", serif;
  --font-body: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --grid-line: rgba(106, 90, 68, 0.10);
  --grid-line-strong: rgba(106, 90, 68, 0.26);

  --highlight-soft: rgba(164, 120, 41, 0.12);
  --highlight-strong: rgba(164, 120, 41, 0.32);

  --weight-display: 500;
  --weight-body: 400;
  --weight-label: 400;
  --tracking-label: 0.10em;
}

/* ====================================================================
 * 深色数据实验室（V3 继续增强）
 *
 * V3 改动：
 * - 主色更鲜亮一档（绿/金/红）
 * - 背景纯黑收紧 → #06080B
 * - surface 之间对比拉大（避免灰蒙）
 * - 卡片更轻：默认无背景描边，hover 才显
 * ==================================================================== */
[data-style="dark-lab"] {
  --c-mainline_invest: #5DDDB1;
  --c-asset_capsule: #FFD982;
  --c-necessity: #8E9AAE;
  --c-recovery_maintenance: #6FC2E0;
  --c-instant_consume: #FF9D7C;
  --c-drift_binding: #F86079;

  --c-net-positive: #4FD3A5;
  --c-net-negative: #F86079;
  --c-best-capture: #FFD982;
  --c-biggest-leak: #FF9D7C;
  --c-future: #3F4754;
  --c-evidence-exact: #5DDDB1;
  --c-evidence-coarse: #6FC2E0;
  --c-evidence-inferred: #8E9AAE;
  --c-evidence-manual: #FFD982;
  --c-evidence-missing: #2E343F;

  --bg-base: #06080B;
  --bg-surface-1: #10141C;
  --bg-surface-2: #181D27;
  --bg-surface-3: #232A37;
  --bg-overlay: rgba(0, 0, 0, 0.74);
  --bg-noise: none;

  --fg-primary: #F2F5FB;
  --fg-secondary: #B0BACC;
  --fg-muted: #5D6779;
  --fg-on-accent: #06080B;

  --border-soft: rgba(176, 186, 204, 0.13);
  --border-strong: rgba(242, 245, 251, 0.30);
  --border-dashed: rgba(176, 186, 204, 0.40);
  --border-hairline: rgba(176, 186, 204, 0.06);

  --shadow-soft: 0 0 0 0 transparent;
  --shadow-medium: 0 1px 4px rgba(0, 0, 0, 0.40), 0 16px 36px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 30px rgba(79, 211, 165, 0.18);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --font-display: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --grid-line: rgba(166, 176, 194, 0.06);
  --grid-line-strong: rgba(166, 176, 194, 0.22);

  --highlight-soft: rgba(79, 211, 165, 0.12);
  --highlight-strong: rgba(79, 211, 165, 0.36);

  --weight-display: 500;
  --weight-body: 400;
  --weight-label: 400;
  --tracking-label: 0.12em;
}

/* ====================================================================
 * 纸质研究笔记（精修）
 * ==================================================================== */
[data-style="paper-notebook"] {
  --c-mainline_invest: #34534A;
  --c-asset_capsule: #98683A;
  --c-necessity: #786D5E;
  --c-recovery_maintenance: #74948C;
  --c-instant_consume: #AE5A3F;
  --c-drift_binding: #80332C;

  --c-net-positive: #34534A;
  --c-net-negative: #80332C;
  --c-best-capture: #98683A;
  --c-biggest-leak: #AE5A3F;
  --c-future: #C8C0AB;
  --c-evidence-exact: #34534A;
  --c-evidence-coarse: #98683A;
  --c-evidence-inferred: #786D5E;
  --c-evidence-manual: #74948C;
  --c-evidence-missing: #C8C0AB;

  --bg-base: #F8F5EC;
  --bg-surface-1: #FFFEF8;
  --bg-surface-2: #FFFFFA;
  --bg-surface-3: #FFFFFF;
  --bg-overlay: rgba(31, 27, 22, 0.48);
  --bg-noise: linear-gradient(90deg, transparent 0%, transparent calc(100% - 1px), rgba(120, 109, 94, 0.05) 100%);

  --fg-primary: #1A1612;
  --fg-secondary: #4E4438;
  --fg-muted: #8C8170;
  --fg-on-accent: #FFFEF8;

  --border-soft: rgba(78, 68, 56, 0.14);
  --border-strong: rgba(26, 22, 18, 0.38);
  --border-dashed: rgba(78, 68, 56, 0.42);
  --border-hairline: rgba(78, 68, 56, 0.08);

  --shadow-soft: 0 0 0 0 transparent;
  --shadow-medium: 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-hover: 0 1px 2px rgba(26, 22, 18, 0.06);
  --shadow-glow: none;

  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-pill: 0;

  --font-display: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --font-body: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --font-mono: "SF Mono", "JetBrains Mono", monospace;

  --grid-line: rgba(78, 68, 56, 0.10);
  --grid-line-strong: rgba(78, 68, 56, 0.24);

  --highlight-soft: rgba(152, 104, 58, 0.10);
  --highlight-strong: rgba(152, 104, 58, 0.30);

  --weight-display: 500;
  --weight-body: 400;
  --weight-label: 400;
  --tracking-label: 0.14em;
}

/* ====================================================================
 * 待精修风格（保留按钮，简化 token）
 * ==================================================================== */

[data-style="forest-squirrel"] {
  --c-mainline_invest: #4A7048;
  --c-asset_capsule: #C68843;
  --c-necessity: #97836A;
  --c-recovery_maintenance: #7BA678;
  --c-instant_consume: #D67C50;
  --c-drift_binding: #A85740;
  --c-net-positive: #4A7048; --c-net-negative: #A85740;
  --c-best-capture: #C68843; --c-biggest-leak: #D67C50;
  --c-future: #C8C0A8;
  --c-evidence-exact: #4A7048; --c-evidence-coarse: #C68843;
  --c-evidence-inferred: #97836A; --c-evidence-manual: #7BA678;
  --c-evidence-missing: #C8C0A8;
  --bg-base: #EAE7D8; --bg-surface-1: #DEDBC8;
  --bg-surface-2: #F3F0E0; --bg-surface-3: #FAF8EE;
  --bg-overlay: rgba(58, 52, 38, 0.55); --bg-noise: none;
  --fg-primary: #2E2A1E; --fg-secondary: #5E5640; --fg-muted: #948869;
  --fg-on-accent: #FAF8EE;
  --border-soft: rgba(94, 86, 64, 0.20);
  --border-strong: rgba(46, 42, 30, 0.45);
  --border-dashed: rgba(94, 86, 64, 0.55);
  --border-hairline: rgba(94, 86, 64, 0.10);
  --shadow-soft: 0 1px 3px rgba(46, 42, 30, 0.08);
  --shadow-medium: 0 4px 14px rgba(46, 42, 30, 0.12);
  --shadow-hover: 0 4px 14px rgba(46, 42, 30, 0.16);
  --shadow-glow: none;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --font-display: "PingFang SC", "Songti SC", serif;
  --font-body: "PingFang SC", system-ui, sans-serif;
  --font-mono: "SF Mono", monospace;
  --grid-line: rgba(94, 86, 64, 0.14);
  --grid-line-strong: rgba(94, 86, 64, 0.30);
  --highlight-soft: rgba(198, 136, 67, 0.16);
  --highlight-strong: rgba(198, 136, 67, 0.40);
  --weight-display: 600; --weight-body: 400; --weight-label: 400; --tracking-label: 0.08em;
}

[data-style="magazine-cn"] {
  --c-mainline_invest: #1F1F1F; --c-asset_capsule: #B23534;
  --c-necessity: #6E6E6E; --c-recovery_maintenance: #1F4D6E;
  --c-instant_consume: #C25C2A; --c-drift_binding: #7A1E1B;
  --c-net-positive: #1F1F1F; --c-net-negative: #B23534;
  --c-best-capture: #B23534; --c-biggest-leak: #C25C2A;
  --c-future: #BFBFBF;
  --c-evidence-exact: #1F1F1F; --c-evidence-coarse: #B23534;
  --c-evidence-inferred: #6E6E6E; --c-evidence-manual: #1F4D6E;
  --c-evidence-missing: #BFBFBF;
  --bg-base: #FFFFFF; --bg-surface-1: #F4F4F4;
  --bg-surface-2: #FAFAFA; --bg-surface-3: #FFFFFF;
  --bg-overlay: rgba(31, 31, 31, 0.60); --bg-noise: none;
  --fg-primary: #0A0A0A; --fg-secondary: #4A4A4A; --fg-muted: #8A8A8A;
  --fg-on-accent: #FFFFFF;
  --border-soft: rgba(10, 10, 10, 0.10);
  --border-strong: rgba(10, 10, 10, 0.65);
  --border-dashed: rgba(10, 10, 10, 0.40);
  --border-hairline: rgba(10, 10, 10, 0.06);
  --shadow-soft: none;
  --shadow-medium: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-glow: none;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;
  --font-display: "Songti SC", serif;
  --font-body: "PingFang SC", system-ui, sans-serif;
  --font-mono: "SF Mono", monospace;
  --grid-line: rgba(10, 10, 10, 0.08);
  --grid-line-strong: rgba(10, 10, 10, 0.30);
  --highlight-soft: rgba(178, 53, 52, 0.10);
  --highlight-strong: rgba(178, 53, 52, 0.30);
  --weight-display: 600; --weight-body: 400; --weight-label: 600; --tracking-label: 0.06em;
}

[data-style="glass-minimal"] {
  --c-mainline_invest: #4F8B79; --c-asset_capsule: #C2A062;
  --c-necessity: #9C9690; --c-recovery_maintenance: #91AAB6;
  --c-instant_consume: #D49579; --c-drift_binding: #B86B73;
  --c-net-positive: #4F8B79; --c-net-negative: #B86B73;
  --c-best-capture: #C2A062; --c-biggest-leak: #D49579;
  --c-future: #D4D0C8;
  --c-evidence-exact: #4F8B79; --c-evidence-coarse: #C2A062;
  --c-evidence-inferred: #9C9690; --c-evidence-manual: #91AAB6;
  --c-evidence-missing: #D4D0C8;
  --bg-base: #F8FAFC;
  --bg-surface-1: rgba(255, 255, 255, 0.70);
  --bg-surface-2: rgba(255, 255, 255, 0.88);
  --bg-surface-3: rgba(255, 255, 255, 0.98);
  --bg-overlay: rgba(35, 41, 50, 0.42); --bg-noise: none;
  --fg-primary: #1E2530; --fg-secondary: #5A6371; --fg-muted: #9CA4B0;
  --fg-on-accent: #FFFFFF;
  --border-soft: rgba(30, 37, 48, 0.10);
  --border-strong: rgba(30, 37, 48, 0.30);
  --border-dashed: rgba(30, 37, 48, 0.36);
  --border-hairline: rgba(30, 37, 48, 0.06);
  --shadow-soft: 0 1px 1px rgba(30, 37, 48, 0.04), 0 6px 18px rgba(30, 37, 48, 0.06);
  --shadow-medium: 0 2px 6px rgba(30, 37, 48, 0.08), 0 16px 36px rgba(30, 37, 48, 0.10);
  --shadow-hover: 0 2px 6px rgba(30, 37, 48, 0.10), 0 20px 44px rgba(30, 37, 48, 0.14);
  --shadow-glow: 0 0 28px rgba(79, 139, 121, 0.16);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --font-display: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "PingFang SC", system-ui, sans-serif;
  --font-mono: "SF Mono", monospace;
  --grid-line: rgba(30, 37, 48, 0.06);
  --grid-line-strong: rgba(30, 37, 48, 0.18);
  --highlight-soft: rgba(194, 160, 98, 0.14);
  --highlight-strong: rgba(194, 160, 98, 0.32);
  --weight-display: 500; --weight-body: 400; --weight-label: 400; --tracking-label: 0.08em;
}