kangshifu-board/legacy/css/tokens.css

/* ==========================================================================
   产品创新看板 · Design tokens（v3 · iOS Liquid Glass）

   玻璃是"透光"的：面板不是一块实心色，而是叠在彩色光场上的半透明磨砂。
   没有光场，backdrop-filter 就没有东西可以模糊，玻璃感也就无从谈起。
   所以这里先立两层底：
     1) 光场 .ambient —— 四团极淡的色光 + 一道从左上斜下的天光，极缓漂移
     2) 噪点 —— 细颗粒让玻璃有"物理材质"而不是纯 CSS 渐变
   再立三层玻璃：
     L1 面板（最透，让底色透上来）
     L2 卡片/指标（稍实一层）
     L3 浮层（抽屉/顶栏，更实，保证远看也清楚）
   光照只有一种：左上 → 右下。所有内高光在顶边，所有阴影往下偏右。

   可读性铁律：正文/数字永远落在 --ink 系列上，对比度按最坏情况
   （玻璃 + 下方最亮的光）算过 ≥ 4.5:1；表头、浮层等必要时加实底衬底。
   ========================================================================== */
:root{
  /* ---------- 光场颜色（只出现在背景层，绝不直接承载文字） ---------- */
  --haze-1:#7aa7ff;   /* 左上偏蓝 */
  --haze-2:#e3d3ff;   /* 右上偏紫 */
  --haze-3:#9ff0d4;   /* 左下偏薄荷 */
  --haze-4:#ffe1c2;   /* 右下偏暖橙 */
  --bg:#eef1f8;

  /* ---------- 玻璃（L1 → L3，越浮越实） ---------- */
  --glass-1:rgba(255,255,255,.26);
  --glass-2:rgba(255,255,255,.42);
  --glass-3:rgba(255,255,255,.58);
  --glass-solid:rgba(255,255,255,.80);   /* 长文阅读衬底 / 表格头 */
  --glass-inset:rgba(255,255,255,.30);
  --blur-1:blur(28px) saturate(185%);
  --blur-2:blur(20px) saturate(175%);
  --blur-3:blur(32px) saturate(190%);

  /* ---------- 发丝边：上亮下暗的渐变边，模拟玻璃边缘折光 ---------- */
  --edge:linear-gradient(150deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.55) 28%,
      rgba(255,255,255,.18) 62%,
      rgba(255,255,255,.42) 100%);
  --edge-soft:linear-gradient(150deg,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.42) 40%,
      rgba(255,255,255,.12) 100%);
  --hairline:1px solid rgba(255,255,255,.62);
  --rule:rgba(24,34,56,.075);
  --rule-strong:rgba(24,34,56,.13);

  /* ---------- 光照：顶部内高光 + 往下偏右的极浅影（只做浮起，不做凹陷） ---------- */
  --light-top:inset 0 1px 0 rgba(255,255,255,.70);
  --lift-1:0 10px 30px -16px rgba(32,48,90,.14);
  --lift-2:0 18px 50px -28px rgba(32,48,90,.24);
  --lift-3:0 40px 90px -40px rgba(32,48,90,.36);

  /* ---------- 文字 ---------- */
  --ink:#141b2a;      /* 正文/数字：在玻璃最亮处仍 ≥ 14:1 */
  --ink-2:#3b4557;    /* 次级正文 ≈ 8:1 */
  --ink-3:#5c6678;    /* 说明文字 ≈ 5.2:1 */
  --ink-4:#7b8494;    /* 仅装饰/极弱元信息，不承载关键信息 */

  /* ---------- 强调色：只用来指路 ---------- */
  --accent:#1d5cf0;
  --accent-ink:#1747bd;
  --accent-wash:rgba(29,92,240,.09);
  --accent-glow:0 0 18px rgba(29,92,240,.28);
  --accent-line:rgba(29,92,240,.34);

  /* ---------- 状态：极轻色标 ---------- */
  --ok:#147a55;      --ok-wash:rgba(20,122,85,.10);
  --warn:#8a5a00;    --warn-wash:rgba(138,90,0,.10);
  --mute:#5f6878;    --mute-wash:rgba(95,104,120,.09);
  --risk:#a63a2c;    --risk-wash:rgba(166,58,44,.09);

  /* 证据/层 色相（小圆点、细条用，不做大面积底色） */
  --c-raw:#3d7a58;
  --c-process:#2f63c8;
  --c-sediment:#6b49a8;
  --c-record:#6f7787;

  --r-xl:24px; --r-lg:18px; --r-md:13px; --r-sm:9px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC",
         "Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",
         "WenQuanYi Micro Hei","Helvetica Neue",Arial,sans-serif;
  --font-num:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,
         "Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --sidebar:228px;
  --topbar:64px;
}