/* tokens.css — 电竞显示器设计变量（唯一来源）
   首页 style.css 里保留同名 :root 兜底；内页先引 tokens.css 再引 style.css/components.css。
   颜色语义：深色底 / 浅色反转区块 / 强调色 / 文字 / 描边。 */

:root {
  /* 背景 */
  --bg: #080f24;              /* 页面主底色 */
  --bg-deep: #070d1e;         /* 页脚更深底色 */
  --bg-hero: #0a1330;         /* 首屏渐变起点 */
  --bg-cat: #0e1f4b;          /* 分类索引用深蓝 */
  --bg-elevated: #0c1835;     /* 精选/面板对照区块 */
  --bg-alt: #0a142c;          /* 移动端导航抽屉 */
  --surface: #101f3d;         /* 卡片表面 */
  --surface-2: #0c1830;       /* 表格表面 */
  --surface-alt: #0a1730;     /* 缩略图与表头 */

  /* 浅色反转区块 */
  --light: #dce6f5;           /* 选型路径 / 收录说明底色 */
  --light-2: #eef3fb;         /* 浅底卡片 */
  --light-ink: #0d1a33;       /* 浅底主文字 */
  --light-muted: #4a5a72;     /* 浅底次要文字 */
  --light-line: rgba(30, 55, 95, .14);

  /* 文字 */
  --ink: #eef3fb;             /* 深底主文字 */
  --ink-alt: #cbd7ea;         /* 导航文字 */
  --ink-invert: #ffffff;      /* 按钮/深色底反白 */
  --muted: #9fb0cc;           /* 深底次要文字 */
  --muted-2: #7f92b3;         /* 深底弱化说明 */
  --muted-alt: #8ba0bd;       /* 浅底箭头/装饰 */

  /* 强调色 */
  --brand: #2f7cf6;           /* 主按钮、编号、价格 */
  --brand-soft: rgba(47, 124, 246, .16);
  --accent: #8fc2f5;          /* 标题渐变末端 */
  --cyan: #4fc3f7;            /* 图标、焦点环 */

  /* 描边与阴影 */
  --line: rgba(126, 160, 215, .18);
  --line-strong: rgba(126, 160, 215, .32);
  --line-alt: rgba(255, 255, 255, .02);
  --shade: rgba(3, 8, 20, .45);   /* 吸顶导航阴影 */
  --shadow-1: 0 10px 30px rgba(3, 8, 20, .45);

  /* 圆角 */
  --radius: 10px;
  --radius-sm: 8px;

  /* 版式 */
  --container: 1352px;
  --gutter: 44px;
  --font: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* 字号阶（首页与内页共用） */
  --fs-1: 11px;
  --fs-2: 11.5px;
  --fs-3: 12px;
  --fs-4: 12.5px;
  --fs-5: 13px;
  --fs-6: 13.5px;
  --fs-7: 14px;
  --fs-8: 14.5px;
  --fs-9: 15px;
  --fs-10: 16px;
  --fs-11: 17px;
  --fs-12: 17.5px;
  --fs-13: 18px;
  --fs-14: 19px;
  --fs-15: 22px;
  --fs-16: 27px;
  --fs-17: 28px;
  --fs-18: 32px;
  --fs-19: 42px;
  --fs-20: 47px;

  /* 圆角阶 */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 7px;
  --r-5: 8px;
  --r-6: 10px;
  --r-7: 12px;
  --r-8: 50%;
}