/* web/css/tokens.css —— 设计令牌（双主题：日间 Anthropic 气质 / 暗夜 Moonshot 气质）
 *
 * 切换规则：
 *   html[data-theme="light"]  → 日间（默认，与系统 prefers-color-scheme: light 一致）
 *   html[data-theme="dark"]   → 暗夜（与系统 prefers-color-scheme: dark 一致）
 *   html 上未带 data-theme 时由 tokens.js 在首屏前注入（见 index.html 内联脚本）
 *
 * 命名沿用 --c-* 以兼容现有 200+ 引用；新增语义令牌 --t-* 表达主题无关的语义层。
 * 所有颜色都必须是令牌；除极少数 1px 描边/覆盖层外禁止硬编码。
 */

/* ============================================================
 * 默认（无 data-theme 时 = 跟随系统 prefers-color-scheme: light）
 * 浏览器尚未解析 html 上 data-theme 时落地一组**安全**的浅色令牌
 * ============================================================ */
:root {
  /* === 主题元（用于 JS 判断） === */
  --t-mode: "light";

  /* === 表面层级 === */
  --c-bg:       #FAF9F5;   /* 暖纸色 页面背景 */
  --c-card:     #FFFFFF;   /* 卡片 / 表层 */
  --c-card-2:   #F7F6EE;   /* 次级表层（行内色块、nav 等） */
  --c-line:     #F0EEE6;   /* 发丝级描边 1px */
  --c-line-2:   #F7F6EE;   /* 更浅背景（同 c-card-2 语义） */
  --c-line-strong: #E5E2D6;

  /* === 文字阶梯 === */
  --c-text:     #141413;   /* 主文字 */
  --c-ink:      #3D3D3A;   /* 次级正文 */
  --c-ink-soft: #6B6B63;   /* 辅助标签 */
  --c-ink-faint:#A8A8A0;   /* 占位 / 禁用 */
  --c-muted:    #6B6B63;   /* 同 ink-soft */

  /* === 品牌语义（已退色：日间 = 实心墨色；暗夜 = 实心白） === */
  --c-primary:       #141413;     /* 日间：墨黑；暗夜：白 */
  --c-primary-hover: #2A2A28;     /* 日间 hover */
  --c-primary-ink:   #FAF9F5;     /* 按钮上的反色文字 */
  --c-accent:        #141413;     /* 与 primary 统一（同墨色） */
  --c-accent-hover:  #2A2A28;

  /* === 状态色（语义不变，按主题调到 ≥4.5:1） === */
  --c-up:      #B3352A;   /* 涨 / 爆满 */
  --c-tight:   #9A5B00;   /* 紧张 */
  --c-down:    #2F6B45;   /* 跌 / 充裕 */
  --c-cancel:  #6E6E66;   /* 取消 / 次要（≥4.5:1 on bg #FAF9F5 → 实测 5.19） */
  --c-on-up:   #FFFFFF;   /* up 背景上的反色文字（深底） */
  --c-on-down: #FFFFFF;   /* down 背景上的反色文字（深底） */

  /* === 覆盖与遮罩 === */
  --c-mask:        rgba(20, 20, 19, 0.50);
  --c-mask-strong: rgba(20, 20, 19, 0.62);
  --c-mask-light:  rgba(20, 20, 19, 0.35);
  --c-tint-primary: rgba(20, 20, 19, 0.06);   /* primary 微染色 */
  --c-tint-primary-strong: rgba(20, 20, 19, 0.10);
  --c-tint-up:     rgba(179, 53, 42, 0.08);
  --c-tint-down:   rgba(47, 107, 69, 0.10);

  /* === 描边 === */
  --c-border: #E5E2D6;
  --c-divider: #F0EEE6;

  /* === 阴影 === */
  --shadow-card:        0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-card-hover:  0 4px 12px rgba(20, 20, 19, 0.06);
  --shadow-tab:         0 -1px 0 rgba(20, 20, 19, 0.04);
  --shadow-side:        1px 0 0 rgba(20, 20, 19, 0.04);
  --shadow-mid:         0 0 0 1px rgba(20, 20, 19, 0.12);
  --shadow-modal:       0 24px 48px rgba(20, 20, 19, 0.10);
  --shadow-focus:       0 0 0 3px rgba(20, 20, 19, 0.16);
  --shadow-glow:        0 0 40px rgba(255, 255, 255, 0.0); /* 暗夜用 */

  /* === 圆角 === */
  --radius-card:    16px;   /* 卡片 = Anthropic 16 */
  --radius-card-lg: 16px;
  --radius-pill:    999px;  /* 胶囊 */
  --radius-sm:      8px;
  --radius-xs:      6px;

  /* === 字阶 === */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-xxl: 22px;
  --fs-display: 28px;

  /* === 间距 === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* === 尺寸 === */
  --tap-min: 44px;
  --header-h: 44px;
  --tabbar-h: 56px;
  --side-w: 220px;
  --content-max: none;   /* 导航栏内容最大宽：none = 与页面内容列同宽（桌面端由 layout.css 跟随左栏偏移）。
                            2026-09-26 M4：原 1180px 把通栏导航栏钳成比铺满后的内容列更窄的居中窄条 → 取消上限。 */
  --content-pad-x: 16px;

  /* === 字体（系统字体栈；零依赖零联网） === */
  --font-display: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-stack:   "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ============================================================
 * 日间（Anthropic 气质）—— 与 :root 同值，显式声明便于 JS 检测
 * ============================================================ */
html[data-theme="light"] {
  --t-mode: "light";

  --c-bg:       #FAF9F5;
  --c-card:     #FFFFFF;
  --c-card-2:   #F7F6EE;
  --c-line:     #F0EEE6;
  --c-line-2:   #F7F6EE;
  --c-line-strong: #E5E2D6;

  --c-text:     #141413;
  --c-ink:      #3D3D3A;
  --c-ink-soft: #6B6B63;
  --c-ink-faint:#A8A8A0;
  --c-muted:    #6B6B63;

  --c-primary:       #141413;
  --c-primary-hover: #2A2A28;
  --c-primary-ink:   #FAF9F5;
  --c-accent:        #141413;
  --c-accent-hover:  #2A2A28;

  --c-up:      #B3352A;
  --c-tight:   #9A5B00;
  --c-down:    #2F6B45;
  --c-cancel:  #6E6E66;
  --c-on-up:   #FFFFFF;
  --c-on-down: #FFFFFF;

  --c-mask:        rgba(20, 20, 19, 0.50);
  --c-mask-strong: rgba(20, 20, 19, 0.62);
  --c-mask-light:  rgba(20, 20, 19, 0.35);
  --c-tint-primary: rgba(20, 20, 19, 0.06);
  --c-tint-primary-strong: rgba(20, 20, 19, 0.10);
  --c-tint-up:     rgba(179, 53, 42, 0.08);
  --c-tint-down:   rgba(47, 107, 69, 0.10);

  --c-border: #E5E2D6;
  --c-divider: #F0EEE6;

  --shadow-card:       0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(20, 20, 19, 0.06);
  --shadow-tab:        0 -1px 0 rgba(20, 20, 19, 0.04);
  --shadow-side:       1px 0 0 rgba(20, 20, 19, 0.04);
  --shadow-mid:        0 0 0 1px rgba(20, 20, 19, 0.12);
  --shadow-modal:      0 24px 48px rgba(20, 20, 19, 0.10);
  --shadow-focus:      0 0 0 3px rgba(20, 20, 19, 0.16);
  --shadow-glow:       0 0 0 rgba(0,0,0,0);
}

/* ============================================================
 * 暗夜（Moonshot 气质）—— 纯黑 + 12% 描边 + 92/56/35 文字阶梯
 * ============================================================ */
html[data-theme="dark"] {
  --t-mode: "dark";

  --c-bg:       #000000;
  --c-card:     #121212;
  --c-card-2:   #1F1F1F;
  --c-line:     rgba(255, 255, 255, 0.12);
  --c-line-2:   #1A1A1A;
  --c-line-strong: rgba(255, 255, 255, 0.20);

  --c-text:     rgba(255, 255, 255, 0.92);
  --c-ink:      rgba(255, 255, 255, 0.56);
  --c-ink-soft: rgba(255, 255, 255, 0.50);
  --c-ink-faint:rgba(255, 255, 255, 0.20);
  /* 0.35 在 #1F1F1F 上只有 3.01:1；提到 0.50 → 5.10:1（≥4.5），阶梯仍是 text(.92) > ink(.56) > muted(.50) */
  --c-muted:    rgba(255, 255, 255, 0.50);

  --c-primary:       #FFFFFF;            /* 主按钮 = 反差反转：白底 */
  --c-primary-hover: rgba(255, 255, 255, 0.88);
  --c-primary-ink:   #000000;            /* 按钮上的反色文字 = 黑 */
  --c-accent:        #FFFFFF;
  --c-accent-hover:  rgba(255, 255, 255, 0.88);

  --c-up:      #FF7A70;
  --c-tight:   #FFB454;
  --c-down:    #5FD08A;
  --c-cancel:  #8A8A8F;
  --c-on-up:   #000000;   /* 暗夜 up 底色较亮，黑字 ≥4.5:1 */
  --c-on-down: #000000;   /* 暗夜 down 底色较亮，黑字 ≥4.5:1 */

  --c-mask:        rgba(0, 0, 0, 0.72);
  --c-mask-strong: rgba(0, 0, 0, 0.82);
  --c-mask-light:  rgba(0, 0, 0, 0.50);
  --c-tint-primary: rgba(255, 255, 255, 0.06);
  --c-tint-primary-strong: rgba(255, 255, 255, 0.12);
  --c-tint-up:     rgba(255, 122, 112, 0.12);
  --c-tint-down:   rgba(95, 208, 138, 0.12);

  --c-border: rgba(255, 255, 255, 0.12);
  --c-divider: rgba(255, 255, 255, 0.08);

  --shadow-card:       0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 40px rgba(255, 255, 255, 0.06);
  --shadow-tab:        0 -1px 0 rgba(255, 255, 255, 0.06);
  --shadow-side:       1px 0 0 rgba(255, 255, 255, 0.06);
  --shadow-mid:        0 0 0 1px rgba(255, 255, 255, 0.24);
  --shadow-modal:      0 24px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-focus:      0 0 0 3px rgba(255, 255, 255, 0.24);
  --shadow-glow:       0 0 40px rgba(255, 255, 255, 0.18);
}

/* ============================================================
 * 自动跟随（prefers-color-scheme 兜底，未挂 data-theme 时启用）
 * ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --t-mode: "dark";

    --c-bg:       #000000;
    --c-card:     #121212;
    --c-card-2:   #1F1F1F;
    --c-line:     rgba(255, 255, 255, 0.12);
    --c-line-2:   #1A1A1A;
    --c-line-strong: rgba(255, 255, 255, 0.20);

    --c-text:     rgba(255, 255, 255, 0.92);
    --c-ink:      rgba(255, 255, 255, 0.56);
    --c-ink-soft: rgba(255, 255, 255, 0.50);
    --c-ink-faint:rgba(255, 255, 255, 0.20);
    /* 同 html[data-theme="dark"]：0.50 → 最亮表面 #1F1F1F 上 5.10:1 */
    --c-muted:    rgba(255, 255, 255, 0.50);

    --c-primary:       #FFFFFF;
    --c-primary-hover: rgba(255, 255, 255, 0.88);
    --c-primary-ink:   #000000;
    --c-accent:        #FFFFFF;
    --c-accent-hover:  rgba(255, 255, 255, 0.88);

    --c-up:      #FF7A70;
    --c-tight:   #FFB454;
    --c-down:    #5FD08A;
    --c-cancel:  #8A8A8F;
    --c-on-up:   #000000;
    --c-on-down: #000000;

    --c-mask:        rgba(0, 0, 0, 0.72);
    --c-mask-strong: rgba(0, 0, 0, 0.82);
    --c-mask-light:  rgba(0, 0, 0, 0.50);
    --c-tint-primary: rgba(255, 255, 255, 0.06);
    --c-tint-primary-strong: rgba(255, 255, 255, 0.12);
    --c-tint-up:     rgba(255, 122, 112, 0.12);
    --c-tint-down:   rgba(95, 208, 138, 0.12);

    --c-border: rgba(255, 255, 255, 0.12);
    --c-divider: rgba(255, 255, 255, 0.08);

    --shadow-card:       0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 40px rgba(255, 255, 255, 0.06);
    --shadow-tab:        0 -1px 0 rgba(255, 255, 255, 0.06);
    --shadow-side:       1px 0 0 rgba(255, 255, 255, 0.06);
    --shadow-mid:        0 0 0 1px rgba(255, 255, 255, 0.24);
    --shadow-modal:      0 24px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-focus:      0 0 0 3px rgba(255, 255, 255, 0.24);
    --shadow-glow:       0 0 40px rgba(255, 255, 255, 0.18);
  }
}