/* ==========================================================================
   FeedScanSystem 设计 token
   --------------------------------------------------------------------------
   依据 UI-DESIGN.md §2–§9 建立。颜色、字体、字号、间距、圆角、阴影、
   **材质（玻璃/网格/颗粒）与动效**的唯一来源。

   规则：
     1. 新增样式一律引用变量，不要在 style.css 里硬编码色值。
     2. 主色锚定改造前的 #1a56db 为 600 档，保证与既有界面视觉零断裂。
     3. 语义色（成功/危险/警告）保持原有色相，仅修正不达标的档位。
     4. 材质与动效令牌**只在这里定义**；style.css 只消费，不新增魔法数字。

   ⚠ 字体约束（必须知道的一条硬限制）：
     本系统部署在**内网隔离环境**，客户端可能完全无外网 —— 因此**不能加载任何
     Web Font**（`@font-face` 指向外部地址会白屏等超时，中文字体包本身也有数 MB）。
     所以差异化不靠换字体，而靠三件可控的事：字重纪律（只用 400/500）、
     字距（标题收紧、编号等宽）、以及**编号的等宽数字 + 斜杠零**（本系统最关心
     0/O、1/I 的误读）。这在 UI-DESIGN.md §3 里有完整说明。
   ========================================================================== */

:root {
  /* ---------- 品牌主色：主色为 600，hover 方向为加深（→700） ---------- */
  --brand-50: #eef3ff;
  --brand-100: #dbe5ff;
  --brand-200: #bccffe;
  --brand-300: #91aefc;
  --brand-400: #5f86f8;
  --brand-500: #3a63f0;
  --brand-600: #1a56db;
  --brand-700: #1544b0;
  --brand-800: #123689;
  --brand-900: #102c6b;

  /* ---------- 中性灰 ---------- */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---------- 语义色 ---------- */
  /* 成功：600 与浅底搭配已达 6.9:1；按钮底色用 700，白字 5.48:1 */
  --success-50: #f0fdf4;
  --success-100: #d1fae5;
  --success-600: #059669;
  --success-700: #047857;
  --success-900: #065f46;

  /* 危险：600 白字 4.83:1，直接可用 */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-900: #991b1b;

  /* 警告：500 是扫码强调色，只能配深字；按钮底色用 700，白字 5.02:1 */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-900: #92400e;

  /* ---------- 底色与描边 ---------- */
  /* 页面底比改造前(#f5f7fa)略深半档：毛玻璃面板要"浮"得出来，
     底色必须先有纵深，否则玻璃与底子贴在一起、白得发闷。 */
  --bg-page: #eaeef6;
  --bg-surface: #ffffff;
  --bg-muted: var(--gray-50);
  --bg-nav: var(--brand-600);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  /* ---------- 材质：毛玻璃 ---------- */
  /* 三档透明度对应三种"距离感"：
       soft   —— 贴在内容流里的次级面板（不该抢主体）
       base   —— 常规卡片
       strong —— 必须读清文字的表单/表格/弹窗（透明度最高，保对比度） */
  --glass-bg-soft: rgba(255, 255, 255, 0.50);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-blur: 20px;
  --glass-saturate: 170%;
  /* 玻璃的「边」要有两条：一条朝光的白边（内），一条压暗的外描边。
     只留白边时，面板压在浅色网格上会失去轮廓；只留暗边又会显得脏。 */
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-hairline: rgba(16, 44, 107, 0.08);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* 导航用深色玻璃：白字压在上面的对比度实测 8.8:1（详见 UI-DESIGN.md §5） */
  --glass-nav-bg: rgba(13, 38, 92, 0.82);

  /* ---------- 材质：按钮毛玻璃（v1.3.15） ----------
     参数来自需求方给定配方：blur(21px) saturate(170%) / 29px 胶囊圆角 /
     0.5px 半透明白边 / 0 8px 16px rgba(0,0,0,.2)。
     原配方底色 rgba(255,255,255,.05) 是为深色背景设计的；本系统按钮压在
     浅色卡片上，白纱会隐形，故底色由各按钮变体自己的颜色降透明度提供
     （color-mix 88%），玻璃感靠 backdrop-filter + 白边 + 阴影表达。 */
  --btn-glass-blur: 21px;
  --btn-glass-saturate: 170%;
  --btn-glass-radius: 29px;
  --btn-glass-border: rgba(255, 255, 255, 0.4);
  --btn-glass-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

  /* ---------- 材质：渐变网格 ---------- */
  /* 2 个冷色（品牌蓝）+ 1 个青色做纵深。
     刻意不用紫：白底紫渐变是最典型的"AI 味"配方（UI-DESIGN.md §8 禁项）。

     浓度是实测调出来的，不是拍脑袋：首版用 0.20/0.16/0.12 时，
     叠在 #eaeef6 上几乎被冲没（玻璃等于白卡，看不出材质）。
     而光斑挂 `position: fixed`，所以"视口内可覆盖面积"比"页面上位置"更重要 ——
     第三层从 118%（视口之外，等于白给）挪到 84%，才真正参与观感。 */
  --mesh-layer:
    radial-gradient(52rem 35rem at 6% -14%, rgba(26, 86, 219, 0.26), transparent 66%),
    radial-gradient(48rem 33rem at 104% 2%, rgba(58, 99, 240, 0.21), transparent 62%),
    radial-gradient(46rem 34rem at 58% 84%, rgba(14, 165, 233, 0.17), transparent 64%);

  /* ---------- 材质：颗粒纹理 ---------- */
  /* SVG feTurbulence 生成，内联 data-URI —— 不依赖任何外部请求，离线可用。
     透明度压在 5%：只负责"去塑料感"，看得见纹路就算过。
     （首版 4% 在浅色底上 mix-blend overlay 后基本测不出，等于白写。） */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.05;

  /* ---------- 字体 ---------- */
  /* 按平台字形质量排序：苹果系 → Windows → 思源 → 兜底。
     不加载 Web Font（见文件头约束说明）。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
  /* 编号类内容（桶编号、任务编号、制剂编号）必须等宽，消除 0/O、1/I 歧义 */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------- 字号刻度：8px 基线 ---------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* 中文字距：正文放宽一点（0.01em）更透气；标题收紧才显精密 */
  --tracking-body: 0.01em;
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-wide: 0.06em;

  /* 字重只用两档：400 常规 / 500 强调。中文在 700 下笔画糊化。 */
  --weight-regular: 400;
  --weight-medium: 500;

  /* ---------- 间距：8px 基线 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 圆角 ---------- */
  /* 整体上调一档：玻璃材质在大圆角下才有"片材"的观感，小圆角会显得像方块贴纸。
     上限仍受 --radius-lg 约束在 12px，避免后台表格出现过度圆润的幼稚感。 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* ---------- 阴影：三级高度体系，带环境色 ---------- */
  /* 全部用品牌深蓝 rgba(16,44,107) 作阴影基色，而不是纯黑。
     纯黑阴影压在浅色网格上会发灰、发脏；带色阴影才像"被光照着"。 */
  --shadow-sm: 0 1px 2px rgba(16, 44, 107, 0.05), 0 1px 3px rgba(16, 44, 107, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 44, 107, 0.05), 0 8px 20px -6px rgba(16, 44, 107, 0.12);
  --shadow-lg: 0 4px 10px rgba(16, 44, 107, 0.06), 0 24px 48px -14px rgba(16, 44, 107, 0.20);
  /* 悬停时的"光晕"：只在主色元素上用，是这一版唯一的彩色阴影 */
  --shadow-glow: 0 8px 28px -8px rgba(26, 86, 219, 0.30);

  /* ---------- 层级 ---------- */
  /* 氛围层压在内容之下但高于页面底色；颗粒层在氛围之上、内容之下 */
  --z-atmosphere: 0;
  --z-grain: 1;
  --z-content: 2;
  --z-sticky: 100;
  --z-dropdown: 500;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------- 布局尺寸 ---------- */
  --nav-height: 56px;
  --container-max: 1200px;
  --touch-min: 44px;
  --touch-comfort: 48px;

  /* ---------- 动效 ---------- */
  /* 时长按"用途"分档，不按"感觉"分档：
       fast  160ms —— 悬停、按压这类必须跟手的反馈
       base  320ms —— 面板展开、卡片位移这类看得见的过渡
       slow  620ms —— 入场编排、弹窗这类"场景级"变化 */
  --duration-fast: 160ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  /* ease-out 是"出场"曲线：起步快、收尾稳，用于元素进入视野。
     换成 cubic-bezier(.16,1,.3,1) 后，所有既有过渡一并升级为更利落的收尾。 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* 弹性：只给"确认类"反馈用（勾选、徽标、按压回弹）。
     过冲到 1.4 是刻意的 —— 小于 1.2 时肉眼看不出弹性，等于白做。 */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* 入场错峰步长：20ms —— 保留「依次浮现」的顺序感，但整体等待压到
     100ms 以内（v1.3.13 用户反馈「整体动画太慢」后的全局提速：
     duration-base 320→180、slow 620→280、stagger 60→20，动画结构不变） */
  --stagger: 20ms;
}