/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css —— 550v 网页家族的**变量层**（唯一的规范值在这里，别在页面里另起一套）

   用法（页面里）：
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="components.css">
     页面自己的东西写第三个文件，只写"这个页面特有的"。

   主题：默认**深色**（`:root`），亮色靠 `<html data-theme="light">` 整套换。
   为什么要两套变量而不是一套反色：见 README「两套主题 = 两套物理」。

   ⚠️ 这些值是从三个在用页面里**实测抄出来**的，改动前先读 README「改这一份会影响谁」。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 深色（默认）───────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* 底 / 卡 / 线 / 字 */
  --bg:#080b0f; --card:#0f141b; --card2:#0b1015; --rule:#1e2937; --rule2:#141b24;
  --text:#e6edf5; --dim:#9fb0c2; --dim2:#7a8798;

  /* 命名色：一律按"它代表什么"取名，别按色相取名 */
  --fire:#e8a06a;   /* 暖：警示、支出、热 */
  --wind:#7fc7bd;   /* 青绿：中性偏冷 */
  --lime:#d6e07a;   /* 黄绿：**标题竖条与主强调** */
  --green:#6ccf9e;  /* 绿：正常、入账、达标 */
  --amber:#eab069;  /* 琥珀：待办、提醒 */
  --blue:#57a9e6;   /* 蓝：信息、链接、选中 */
  --batt:#55bcd8;   /* 电池/仪表专用 */
  --sun:#b08f63;    /* 日光：低饱和暖黄（曾经是高饱和 #eec26c，用户说"太晃眼"）*/
  --day:#7086a8;    /* 夜色/次要蓝灰 */

  --mono:"Cascadia Mono","JetBrains Mono",Consolas,monospace;

  /* 卡片边框流光带的两个色（亮色那套要覆盖它们）*/
  --spin-hot:rgba(96,186,236,.60); --spin-soft:rgba(70,140,196,.16);

  /* 尺寸刻度：① --u 随视口放大缩小（"尺寸本身随视口走"，不是 zoom）
     ② --fill 由 JS 按"富余高度"写进来（一屏装下时摊到间距上）。 */
  --u: clamp(0.78, calc(0.30 + 0.075 * (100vh / 100px) + 0.015 * (100vw / 100px)), 1.7);
  --fill: 0px;
}

/* ── 亮色（`<html data-theme="light">`）─────────────────────────────────
   ⚠️ 亮色不是深色的反色，是**另一套物理**：内描边压深 + 外投影 + 顶高光（玻璃），
      而深色是 emissive 发光。keyframes 也要整套换名（*-lt），见 components.css。 */
:root[data-theme="light"]{
  color-scheme:light;
  /* 这三组是被 v2/v3 各覆盖过一次后的**最终生效值**（`--bg:#eaeef5`→`#e8ecf3`→`#e2e8f1`）：
     一路把页面底压沉、卡片从纯白降到 #f2f5fa，"卡片能浮起来"才看得出来。 */
  --bg:#e2e8f1; --card:#f2f5fa; --card2:#e9eef7; --rule:#cfd9e8; --rule2:#e0e7f2;
  --text:#1c2431; --dim:#5a6a80; --dim2:#6e7c92;
  --fire:#b5713a; --wind:#3f8f86; --lime:#7d8f24; --green:#2f8f6a;
  --amber:#a8802f; --blue:#2f6fa8; --batt:#2a8fa8; --sun:#8a6f4a; --day:#4a6285;
  --spin-hot:rgba(47,111,168,.75); --spin-soft:rgba(47,111,168,.16);
}