/* ============================================================================
 * tokens.css — 工具站设计令牌
 * ============================================================================
 *
 * 【这个文件管什么】
 *   工具站自己新增的视觉常量。
 *
 * 【单一来源】
 *   assets/css/header.css 的 :root 里已定义的令牌（--theme-*），
 *   这里一律不重复定义，只在下方的「继承契约」里声明依赖。
 *   复制一份到这里会立刻产生两个真相：改了一处、另一处没跟上，
 *   页面就会出现两种青色的边框。
 *
 * 【改动须知】
 *   改这里的任何色值前，先确认它不是从主题色派生的。
 *   --tool-accent-* 两个令牌是主题色 #06B8D8 的带透明度形式（书写习惯所限，
 *   这里用 rgba 字面量而非 color-mix，以兼容更旧的浏览器）；
 *   主题色若调整，这两个值必须同步手工调整。
 * ========================================================================== */
/* © qiqicto.com 其其网ICT工具箱 · 未经许可禁止复制分发 */

:root {
  /* ---- 页面与容器 ------------------------------------------------------ */
  --tool-bg:              #f5f5f5;   /* 页面底色 */
  --tool-surface:         #fff;      /* 卡片 / 面板表面 */
  --tool-surface-alt:     #fafafa;   /* 结果表格斑马纹 */

  /* ---- 线条 ------------------------------------------------------------ */
  --tool-line:            rgba(0, 0, 0, .06);   /* 常规分隔线、卡片描边 */
  --tool-line-strong:     rgba(0, 0, 0, .12);   /* 空状态虚线、规划中卡片悬停描边 */

  /* ---- 抬升（卡片悬停阴影） -------------------------------------------- */
  --tool-shadow-hover:      0 6px 22px rgba(0, 0, 0, .07);  /* 可用卡片悬停 */
  --tool-shadow-hover-soft: 0 6px 22px rgba(0, 0, 0, .05);  /* 规划中卡片悬停（更弱） */

  /* ---- 语义色 ---------------------------------------------------------- */
  --tool-danger:          #c0392b;   /* 输入错误提示 */
  --tool-accent-weak:     rgba(6, 184, 216, .1);  /* 图标底色（主题色 10%） */
  --tool-accent-line:     rgba(6, 184, 216, .5);  /* 卡片悬停描边（主题色 50%） */

  /* ---- 中性色阶（用于结果可视化的主机位条） ---------------------------- */
  --tool-neutral:         #9aa4ad;   /* 网络地址段 */
  --tool-neutral-dark:    #55606a;   /* 广播地址段 */

  /* ---- 页脚 ------------------------------------------------------------ */
  --tool-footer-bg:       #2b3038;
  --tool-footer-fg:       rgba(255, 255, 255, .72);
  --tool-footer-fg-dim:   rgba(255, 255, 255, .5);

  /* ---- 首页 Banner（浅色首屏 + 品牌色点缀） ---------------------------- */
  /* 参考主流工具站首屏做法：白底 + 品牌渐变标题 + 白底搜索胶囊，
     四周铺极低的品牌柔光与线稿装饰。主题色变更需同步。 */
  --hero-grad-a:          #06b8d8;   /* 渐变起点：主题青 */
  --hero-grad-b:          #0d8fb4;   /* 渐变中段 */
  --hero-grad-c:          #155f8a;   /* 渐变终点：墨蓝 */
  --hero-bg-a:            #f8fdff;   /* 首屏底色（上）：近白留一点青 */
  --hero-bg-b:            #ffffff;   /* 首屏底色（下）：白 */
  --hero-glow:            rgba(6, 184, 216, .07);   /* 顶部品牌柔光 */
  --hero-glow-2:          rgba(13, 143, 180, .05);  /* 左下品牌柔光 */
  --hero-deco:            rgba(6, 184, 216, .13);   /* 装饰线稿（青） */
  --hero-deco-2:          rgba(21, 95, 138, .10);   /* 装饰线稿（墨蓝） */
  --hero-chip-bg:         rgba(6, 184, 216, .09);   /* 徽标胶囊底 */
  --hero-chip-line:       rgba(6, 184, 216, .22);   /* 徽标胶囊描边 */
  --hero-chip-fg:         #0d7f9f;                  /* 徽标文字（品牌深青） */
  --hero-shadow-card:     0 10px 30px rgba(3, 54, 74, .06);   /* 首屏卡片投影 */
  --hero-box-bg:          #ffffff;                  /* 搜索框底 */
  --hero-box-line:        #e2e8ee;                  /* 搜索框描边 */
  --hero-box-line-on:     rgba(6, 184, 216, .55);   /* 搜索框聚焦描边 */
  --hero-box-ph:          #8b98a3;                  /* 搜索框占位符 */
  --hero-box-shadow:      0 8px 24px rgba(3, 54, 74, .08);    /* 搜索框常态投影 */
  --hero-box-shadow-on:   0 12px 30px rgba(3, 54, 74, .12);   /* 搜索框聚焦投影 */
  --hero-focus-ring:      rgba(6, 184, 216, .16);   /* 搜索框聚焦光圈 */

  /* ---- 字体与圆角 ------------------------------------------------------ */
  --tool-mono:            ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tool-radius-s:        3px;
  --tool-radius-m:        5px;
  --tool-radius-l:        8px;
}

/* ============================================================================
 * 继承契约：以下令牌由 assets/css/header.css 的 :root 提供，请勿在此重复定义
 * ============================================================================
 *
 *   --theme-color              主题色 #06B8D8
 *   --theme-hover              悬停色（主题内仍是默认蓝 #1162e8，与主题色未同步）
 *   --theme-color-h / -s / -l  主题色 HSL 分量（0 / 0% / 10%）
 *   --theme-color-hsl          上述三分量拼装
 *   --theme-black-color        正文色 hsl(var(--theme-color-hsl))
 *   --theme-gray-color         次级文字
 *   --theme-light-color        辅助文字
 *   --theme-line-color         浅分隔线
 *   --theme-border-color       输入框描边
 *   --theme-el-bg-color        元素底色 #fff
 *   --theme-border-radius-s/m/l/xl
 *   --theme-font-family        系统字体栈
 *   --container-width          内容最大宽度 1200px
 *
 * 断点（767px）只能用字面量：CSS 规范不允许在 @media 条件中使用自定义属性。
 * ========================================================================== */