/* ============================================================
 * 码上搜 · Token 层（主题定义）
 * ------------------------------------------------------------
 * 三层约定:
 *   theme.css      语义 token + 主题（本文件，唯一允许出现色值的地方）
 *   components.css 可复用组件，只引用语义 token
 *   style.css      页面布局，只引用语义 token
 *
 * 切换主题 = <html data-theme="paper|ink|sea">，见 app.js。
 * 新增主题: 复制一份 [data-theme="..."] 块覆盖下方语义 token 即可。
 * ============================================================ */

/* ---------- 语义 token（默认 = 纸，浅色） ---------- */
:root {
  color-scheme: light;

  /* 表面与文字 */
  --bg: #faf9f6;            /* 页面底：暖纸色 */
  --surface: #ffffff;       /* 卡片/面板 */
  --surface-2: #f3f1ec;     /* 次级面板（搜索框底、代码底） */
  --text: #1c1e21;          /* 正文墨色 */
  --text-2: #6f6d66;        /* 次级文字（暖灰） */
  --line: #e4e2da;          /* 分隔线 */
  --line-strong: #c9c6bc;   /* 强分隔线（hover 边框） */

  /* 强调色：磷光绿（终端绿压暗，保证浅底可读） */
  --accent: #0a7d4f;
  --accent-hover: #08663f;
  --accent-ink: #ffffff;    /* 强调色底上的文字 */
  --accent-soft: #e9f3ed;   /* 强调色淡底 */
  --accent-text: #0a6b44;   /* 浅底上的强调色文字 */

  /* 点评块：琥珀批注 */
  --note-bg: #f7f2e3;
  --note-line: #c9a53c;

  /* 状态 */
  --danger: #b3372f;
  --danger-soft: #f8e9e7;

  /* 形状与投影（克制的唯一阴影） */
  --radius: 6px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(28, 30, 33, 0.05);

  /* 纹理：坐标纸网格线（极淡，随主题调整浓度） */
  --grid-line: rgba(28, 30, 33, 0.04);

  /* 字族：宋体标题 × 黑体正文 × 等宽元信息（编辑排印 × 终端气质） */
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC",
    SimSun, serif;
  --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas,
    "SF Mono", Menlo, monospace;

  /* 字号阶梯 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-hero: clamp(26px, 4vw, 34px);
}

/* ---------- 墨（终端深色） ---------- */
:root[data-theme="ink"] {
  color-scheme: dark;
  --bg: #101214;
  --surface: #16191d;
  --surface-2: #1d2126;
  --text: #d8dce2;
  --text-2: #8b919b;
  --line: #262b31;
  --line-strong: #3a4149;

  --accent: #3ddc84;
  --accent-hover: #5ae69c;
  --accent-ink: #0a2013;
  --accent-soft: #14251b;
  --accent-text: #7fe0a8;

  --note-bg: #211d10;
  --note-line: #8a6d1a;

  --danger: #e07a72;
  --danger-soft: #2b1a18;

  --grid-line: rgba(216, 220, 226, 0.045);

  --shadow: none;
}

/* ---------- 海（深海暗色：与纸/墨拉开区分度） ---------- */
:root[data-theme="sea"] {
  color-scheme: dark;
  --bg: #0b141d;
  --surface: #10202e;
  --surface-2: #16293a;
  --text: #d4e3ee;
  --text-2: #7d93a5;
  --line: #1e3547;
  --line-strong: #2e4d66;

  --accent: #26c6da;
  --accent-hover: #4fd6e8;
  --accent-ink: #06222c;
  --accent-soft: #0e2a36;
  --accent-text: #67dbf0;

  --note-bg: #241f10;
  --note-line: #8a6d1a;

  --danger: #e07a72;
  --danger-soft: #2b1a18;

  --grid-line: rgba(103, 219, 240, 0.05);

  --shadow: none;
}

/* ---------- 未选主题时跟随系统深浅 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101214;
    --surface: #16191d;
    --surface-2: #1d2126;
    --text: #d8dce2;
    --text-2: #8b919b;
    --line: #262b31;
    --line-strong: #3a4149;
    --accent: #3ddc84;
    --accent-hover: #5ae69c;
    --accent-ink: #0a2013;
    --accent-soft: #14251b;
    --accent-text: #7fe0a8;
    --note-bg: #211d10;
    --note-line: #8a6d1a;
    --danger: #e07a72;
    --danger-soft: #2b1a18;
    --grid-line: rgba(216, 220, 226, 0.045);
    --shadow: none;
  }
}