/* ==========================================================================
   tokens.css — 设计令牌
   --------------------------------------------------------------------------
   这里集中定义全站的颜色与尺寸，是唯一允许出现魔法数字的地方。
   · 想换主题色 → 只改 --accent
   · 想更紧凑 → 改 --card-h / --card-gap
   · 想留白更多 → 改 --pad-x
   其余文件一律只用变量，不写死颜色和尺寸。
   ========================================================================== */

/* ---------- 颜色令牌：浅色主题（默认） ---------- */
:root,
:root[data-theme="light"] {
  /* 表面层 */
  --bg: #fbfbfb;          /* 页面底色 */
  --panel: #ffffff;       /* 卡片、按钮底面 */
  --field: #f4f4f4;       /* 输入框常态底色 */
  --field-focus: #ffffff; /* 输入框聚焦底色 */
  --thumb: #f1f1f1;       /* 站点图标托盘底色 */
  --hover: #f3f3f3;       /* 悬停态底色 */
  --press: #ececec;       /* 按下态底色 */

  /* 描边层 */
  --line: #e8e8e8;        /* 常规 1px 描边 */
  --line-2: #d8d8d8;      /* 悬停/聚焦时加深的描边 */

  /* 文字层 */
  --text: #161616;        /* 正文与标题 */
  --muted: #8b8b8b;       /* 说明、计数、占位符 */

  /* 强调层（全站只有这一个强调色） */
  --accent: #161616;
  --on-accent: #ffffff;

  /* 简介气泡 */
  --tip-bg: #161616;
  --tip-fg: #fafafa;
}

/* ---------- 颜色令牌：暗色主题 ---------- */
:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --panel: #141414;
  --field: #1a1a1a;
  --field-focus: #232323;
  --thumb: #262626;
  --hover: #1c1c1c;
  --press: #212121;

  --line: #232323;
  --line-2: #343434;

  --text: #ededed;
  --muted: #7e7e7e;

  --accent: #ededed;
  --on-accent: #111111;

  --tip-bg: #ededed;
  --tip-fg: #111111;
}

/* ---------- 尺寸令牌：与主题无关，随视口连续流动 ---------- */
:root {
  /* 网格：列宽下限决定列数，配合 auto-fill 自动排布 */
  --card-min: clamp(132px, 16vw, 174px);
  /* 卡片高度：手机 50px → 桌面 56px */
  --card-h: clamp(50px, 3.2vw + 34px, 56px);
  /* 卡片间距：约为卡宽的 8%–12%，列多时自然放开 */
  --card-gap: clamp(12px, 1.1vw + 9px, 24px);
  /* 站点图标尺寸 */
  --thumb-size: clamp(26px, 2.4vw + 16px, 32px);
  /* 板块（分类组）之间的垂直间距 */
  --sec-gap: clamp(22px, 2.2vw, 34px);
  /* 页面左右留白：手机 15px → 桌面 72px */
  --pad-x: clamp(15px, 4.5vw, 72px);
  /* 顶栏实时高度，由 js/theme.js 之外的 layout.js 测量后写入，供 sticky 分类条使用 */
  --top-h: 64px;
}