/* 作者：claude */
/* 指纹检测站 Design Tokens V0.1 —— 取值的唯一来源（含脚本用到的取值）。说明见 UI规范/design-tokens.md */
/* 改了这里以后，运行 UI规范/同步原型样式.py，把样式同步进原型 */

/* 运行时变量：当前档位的两种颜色，由脚本按分数设置；注册为颜色属性，变化时可以平滑过渡 */
@property --tier-from{syntax:"<color>";inherits:true;initial-value:#FF6B6B}
@property --tier-to{syntax:"<color>";inherits:true;initial-value:#E0457B}

:root{
  color-scheme:dark;

  /* ---------- 颜色：底色与表面 ---------- */
  --color-bg-page:#0A0F1A;                    /* 页面底色 */
  --color-surface-card:rgba(17,26,43,.5);     /* 卡片、面板（毛玻璃） */
  --color-surface-raised:rgba(21,32,56,.5);   /* 专项入口卡 */
  --color-surface-nav:rgba(10,15,26,.92);     /* 顶部导航 */
  --color-surface-track:rgba(10,15,26,.6);    /* 真实度进度条底槽 */
  --color-surface-inverse:#FFFFFF;            /* 轻提示（toast）底色 */

  /* ---------- 颜色：线框 ---------- */
  --color-line-default:#213049;               /* 卡片边框、分隔线 */
  --color-line-strong:#2D3F60;                /* 图标按钮边框、国家代码框 */

  /* ---------- 颜色：文字 ---------- */
  --color-text-primary:#FFFFFF;               /* 标题、主要内容、检测到的值 */
  --color-text-secondary:#A8B3C7;             /* 次要文案 */
  --color-text-tertiary:#76839A;              /* 说明小字、字段名、缺测状态文字（页面底对比度 5.0，卡片底 4.8） */
  --color-text-inverse:#0A0F1A;               /* 浅底上的文字（toast） */
  --color-text-link:#22D3EE;                  /* 链接和可点击文字，等于强调色 */

  /* ---------- 颜色：图标与强调 ---------- */
  --color-icon-default:#7E8BA3;               /* 普通图标 */
  --color-accent:#22D3EE;                     /* 强调色：青蓝 */
  --color-accent-soft:rgba(34,211,238,.12);   /* 强调色浅底：专项入口图标底 */

  /* ---------- 颜色：状态 ---------- */
  --color-status-pass:#5BD98A;                /* 未发现矛盾 */
  --color-status-pass-bg:rgba(91,217,138,.12);
  --color-status-find:#FF7A7A;                /* 发现矛盾、不一致的值 */
  --color-status-find-bg:rgba(255,122,122,.13);
  --color-status-find-underline:rgba(255,122,122,.6);
  --color-status-hint:#B39DFF;                /* 提示（不计分） */
  --color-status-hint-bg:rgba(179,157,255,.14);
  --color-status-incomplete:#9AA6BA;          /* 未完成、无法检查（虚线框） */

  /* ---------- 颜色：真实度档位（渐变起止色） ---------- */
  --color-tier-low-from:#FF6B6B;     --color-tier-low-to:#E0457B;      /* 低于 60% */
  --color-tier-mid-from:#F5B942;     --color-tier-mid-to:#F97316;      /* 60% 到小于 100% */
  --color-tier-top-from:#2DD4BF;     --color-tier-top-to:#22D3EE;      /* 100% */
  --color-tier-neutral-from:#6B7FA8; --color-tier-neutral-to:#8EA2C8;  /* 覆盖不足、检测出错 */
  --tier-bound-mid:60;               /* 中档下限（含） */
  --tier-bound-top:100;              /* 高档分数 */
  /* 档位色在各处的混合比例 */
  --bar-fill-mix-from:80%;           /* 进度条填充起点：档位起色占比，其余为页面底色 */
  --bar-fill-mix-to:85%;             /* 进度条填充终点 */
  --bar-border-mix:45%;              /* 进度条边框：档位起色占比，其余为强线框色 */
  --color-sheen:rgba(255,255,255,.28); /* 检测中进度条扫光的高光 */

  /* ---------- 字体 ---------- */
  /* 正文字体按语言分组；页面按 <html lang> 选用，见文件末尾的语言覆盖 */
  --font-family-sans-zh:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",system-ui,sans-serif;
  --font-family-sans-en:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-family-sans:var(--font-family-sans-zh);
  --font-family-mono:"JetBrains Mono","Cascadia Mono","SFMono-Regular",Consolas,monospace;

  --font-size-ip:44px;               /* 首屏 IP */
  --font-size-ip-mobile:30px;        /* 首屏 IP（窄屏） */
  --font-size-location:22px;         /* 首屏地区 */
  --font-size-section:20px;          /* 区块标题 */
  --font-size-brand:18px;            /* 网站名称 */
  --font-size-label:16px;            /* 总览卡名称 */
  --font-size-body:15px;             /* 正文、卡片标题、进度条文字 */
  --font-size-body-panel:14.5px;     /* 面板里的值、面板标签 */
  --font-size-body-sm:14px;          /* 导航、明细行、结论摘要 */
  --font-size-note:13.5px;           /* 判定卡说明、折叠按钮、toast */
  --font-size-caption:13px;          /* 副标题、页脚、面板等宽值、解读 */
  --font-size-caption-sm:12.5px;     /* 进度条下说明、字段名、链接、小说明 */
  --font-size-micro:12px;            /* 状态标签、规则编号、版本号、国家代码 */
  --font-size-help:10px;             /* “？”说明图标 */

  --font-weight-regular:400;
  --font-weight-medium:500;          /* 状态标签 */
  --font-weight-semibold:600;        /* IP、折叠行和摘要里的加粗 */
  --font-weight-bold:700;            /* 网站名称、区块标题、总览卡名称、卡片标题、面板标签 */

  --line-height-body:1.7;
  --line-height-ip:1.2;
  --line-height-tag:20px;

  --letter-spacing-brand:.02em;
  --letter-spacing-eyebrow:.1em;
  --letter-spacing-ip:.01em;

  /* ---------- 间距（4 的倍数为主，组件里用到的半档也列出） ---------- */
  --space-1:4px;  --space-1h:6px;
  --space-2:8px;  --space-2h:10px;
  --space-3:12px; --space-3h:14px;
  --space-4:16px; --space-4h:18px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-11:44px;
  --gutter:16px;                     /* 页面左右留白（最小） */

  /* ---------- 圆角 ---------- */
  --radius-xs:4px;                   /* 国家代码框 */
  --radius-tag:5px;                  /* 状态标签 */
  --radius-sm:6px;                   /* 导航项、菜单按钮、样本图 */
  --radius-md:8px;                   /* 图标按钮、toast */
  --radius-lg:10px;                  /* 专项入口图标底、面板标签上角 */
  --radius-xl:12px;                  /* 专项入口卡 */
  --radius-card:14px;                /* 卡片、面板 */
  --radius-pill:18px;                /* 真实度进度条（高度的一半） */

  /* ---------- 边框 ---------- */
  --border-default:1px solid var(--color-line-default);
  --border-strong:1px solid var(--color-line-strong);
  --border-row:1px dashed var(--color-line-default);     /* 总览卡行分隔 */
  --border-incomplete:1px dashed var(--color-status-incomplete);

  /* ---------- 效果 ---------- */
  --blur-glass:3px;                  /* 卡片毛玻璃：背后模糊 */
  --shadow-text-on-bar:0 1px 3px rgba(0,0,0,.55);
  --focus-ring:2px solid var(--color-accent);
  --focus-ring-offset:2px;

  /* 背景光影：四团光晕，颜色取当前档位色 */
  --glow-opacity:.72;
  --glow-mix-strong:68%;             /* 上方两团 */
  --glow-mix-soft:52%;               /* 下方两团 */

  /* 首屏纹理：圆角空心三角，同一行上下相间 */
  --texture-triangle-side:20px;      /* 以下三个参数和图块尺寸由脚本读取，用来生成纹理图块 */
  --texture-triangle-stroke:2.5px;
  --texture-triangle-corner:4.4px;
  --texture-tile-size:128px 64px;    /* 横向两个三角各占 64px */
  --texture-opacity:.05;
  --texture-blur:1px;
  --texture-mix:50%;                 /* 档位色与页面底色各半 */
  --texture-extend:260px;            /* 纹理超出首屏向下延伸的距离 */

  /* ---------- 动效 ---------- */
  --motion-tier:.9s;                 /* 档位颜色过渡 */
  --motion-bar:.4s;                  /* 进度条长度 */
  --motion-chevron:.2s;
  --motion-sheen:1.4s;               /* 检测中进度条扫光 */
  --motion-blink:1s;                 /* “检测中”闪点 */
  --motion-toast:1.8s;               /* 轻提示停留时间（脚本读取） */
  --motion-glow-1:14s; --motion-glow-2:17s; --motion-glow-3:12s; --motion-glow-4:18s;
  --ease-standard:ease;
  --ease-glow:ease-in-out;

  /* ---------- 布局与层级 ---------- */
  --layout-max-width:1200px;
  --layout-nav-height:60px;
  --layout-bar-max-width:640px;      /* 真实度进度条最大宽度 */
  --layout-bar-height:36px;
  /* 放文字的固定列宽：换语言时按文字长度覆盖 */
  --layout-overview-label:110px;     /* 总览卡名称列 */
  --layout-overview-label-mobile:92px;
  --layout-summary-label:56px;       /* 结论摘要的小标题列 */
  --z-background:0;
  --z-content:1;
  --z-toast:50;

  /* ---------- 图标 ---------- */
  --icon-size:18px;
  --icon-stroke:1.7;
  --icon-stroke-brand:1.6;           /* 网站标识线宽 */
  --icon-size-brand:26px;
  --icon-size-tool:22px;
  --icon-box-tool:40px;
  --icon-button-size:36px;
  --icon-help-size:15px;

  /* 运行时变量的默认值 */
  --tier-from:var(--color-tier-low-from);
  --tier-to:var(--color-tier-low-to);
}

/* ---------- 语言覆盖：按 <html lang="..."> 生效，新增语言时在这里加一段 ---------- */
:root:lang(en){
  --font-family-sans:var(--font-family-sans-en);
  --line-height-body:1.6;            /* 拉丁文字行高略小 */
  --letter-spacing-eyebrow:.06em;
  --layout-overview-label:160px;     /* 英文名称通常比中文长 30%—50%，例如 Operating system */
  --layout-overview-label-mobile:128px;
  --layout-summary-label:96px;
}