/* =====================================================================
   tokens.css — 232319.xyz 三站统一设计变量（皮肤层 · 唯一真源）· v2
   ---------------------------------------------------------------------
   设计方向：与 shop.232319.xyz 同族 —— 中性灰阶、扁平、耐看。
   - 无渐变 / 无毛玻璃 / 无重阴影；表面靠「白卡 + 1px 细描边 + 浅色调底」区分层级。
   - 颜色只在「有功能含义」的地方出现：主操作蓝、盈亏绿红、状态栏四态、热力 5 档。
   Muse 换肤只改这个文件（再跑 tools/sync-shared.sh）。结构层（HTML / JS）不需要动。
   - 浅色：:root
   - 深色：@media (prefers-color-scheme: dark) { :root { ... } }，随系统自动切换
   - 所有数值和 design/DESIGN-SPEC.md 的变量表一一对应（表由脚本从本文件生成）
   ===================================================================== */

/* Geist（拉丁字母与数字，29 KB，jsDelivr）。中文自动回落到 PingFang / 微软雅黑 / Noto Sans CJK。
   不想加载外部字体：删掉这个 @font-face 即可，--font-sans 会直接回落系统字体。 */
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.8/files/geist-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* ---------- 1. 颜色 · 底色与表面 ---------- */
  --color-bg:            #fafafa;   /* 页面底色（同 shop 站） */
  --color-surface:       #ffffff;   /* 卡片 / 面板 / 输入框底 */
  --color-surface-2:     #f3f3f5;   /* 浅色调底：分段轨道、表头、侧栏选中项、行悬停、标签底 */
  --color-surface-3:     #ebebee;   /* 按下态、进度条轨道 */
  --color-border:        #e5e5e8;   /* 卡片描边、分隔线 */
  --color-border-strong: #d6d6db;   /* 输入框描边、虚线格、悬停描边 */

  /* ---------- 2. 颜色 · 文字 ---------- */
  --color-text:          #1d1d1f;   /* 主文字、标题、数字 */
  --color-text-2:        #6e6e73;   /* 次要文字：说明、标签、表头 */
  --color-text-3:        #8e8e93;   /* 弱文字：页脚、占位、未来日期 */

  /* ---------- 3. 颜色 · 主操作（蓝，克制使用：主按钮 / 焦点 / 链接悬停） ---------- */
  --color-primary:        #0071e3;
  --color-primary-hover:  #0077ed;
  --color-primary-active: #0062c4;
  --color-primary-soft:   #e8f1fc;  /* 选中行、提示底 */
  --color-primary-text:   #0066cc;  /* 浅底上的蓝字 */
  --color-on-primary:     #ffffff;

  /* ---------- 4. 颜色 · 墨色（近黑：选中分段 / 当前导航指示 / Toast / 次级实心按钮） ---------- */
  --color-ink:           #1d1d1f;
  --color-ink-hover:     #333336;
  --color-ink-active:    #000000;
  --color-on-ink:        #ffffff;

  /* ---------- 5. 颜色 · 语义（只在有功能含义时使用） ---------- */
  --color-success:       #25854f;   /* 盈利 / 实时行情 */
  --color-success-soft:  #eaf5ee;
  --color-danger:        #d92d20;   /* 亏损 / 加载失败 / 删除 */
  --color-danger-soft:   #fdeceb;
  --color-warning:       #a15c07;   /* 现货代理（与永续有价差） */
  --color-warning-soft:  #fdf4e3;
  --color-offline:       #b54708;   /* 已降级站内快照 */
  --color-offline-soft:  #fdf0e6;
  --color-focus-ring:    rgba(0, 113, 227, 0.32);

  /* ---------- 6. 颜色 · Yong 热力图 5 档（0 · 1–24 · 25–49 · 50–99 · 100+） ---------- */
  --heat-0: #ededf0;  --heat-0-fg: #6e6e73;  --heat-0-date: #8e8e93;
  --heat-1: #d3ecdb;  --heat-1-fg: #1d1d1f;  --heat-1-date: #4c6b55;
  --heat-2: #8fd0a4;  --heat-2-fg: #0d2c18;  --heat-2-date: #245236;
  --heat-3: #3a9a5c;  --heat-3-fg: #ffffff;  --heat-3-date: #dcf2e3;
  --heat-4: #1d6338;  --heat-4-fg: #ffffff;  --heat-4-date: #c7ead2;
  --heat-brand: #1d6338;            /* Yong 头像 / 总消息主卡 / 累计条 */
  --heat-brand-fg: #ffffff;

  /* ---------- 7. 颜色 · Jiaoyi 图表 ----------
     7a. 画布底 / 文字 / 网格 / 边框：由 js/skin.js 读取并 applyOptions（仅皮肤，不碰数据和序列）
     7b. --chart-fixed-*：K 线 / 成交量 / EMA / 打点颜色写死在原始 JS（冻结，不可改），
         这里只用于图例色点，必须与 JS 保持一致；改这些变量不会改变图上颜色。 */
  --chart-bg:          #ffffff;
  --chart-text:        #6e6e73;
  --chart-grid:        #f2f2f4;
  --chart-border:      #e5e5e8;
  --chart-fixed-up:        #16a34a;   /* 阳线（JS） */
  --chart-fixed-down:      #dc2626;   /* 阴线（JS） */
  --chart-fixed-ema-fast:  #2962ff;   /* EMA 7（JS） */
  --chart-fixed-ema-slow:  #f59e0b;   /* EMA 25（JS） */
  --chart-fixed-marker-blue: #2962ff; /* 蓝上箭头（JS） */
  --chart-fixed-marker-red:  #dc2626; /* 红下箭头（JS） */

  /* ---------- 8. 首页动态网格背景（canvas 颜色写死在原 main.js，只能用 CSS 滤镜整体换肤） ---------- */
  --home-canvas-filter:  none;      /* 深色下整体反相，使浅色网格变成深色网格 */
  --home-canvas-opacity: 0.7;       /* 降低存在感，让内容做主角 */

  /* ---------- 9. 字体 ---------- */
  --font-sans: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号（px）/ 行高 —— 字号阶梯 12·13·14·16·18·20·24·32·40·64 */
  --text-xs:   12px;  --lh-xs:   1.5;   /* 表头、标签、页脚、图例、眉题 */
  --text-sm:   13px;  --lh-sm:   1.5;   /* 表格、按钮、输入框、说明 */
  --text-base: 14px;  --lh-base: 1.6;   /* 正文、状态栏 */
  --text-md:   16px;  --lh-md:   1.5;   /* 大正文、签名 */
  --text-lg:   18px;  --lh-lg:   1.4;   /* 卡片标题 */
  --text-xl:   20px;  --lh-xl:   1.3;   /* 首页磁贴名、热力格数字 */
  --text-2xl:  24px;  --lh-2xl:  1.25;  /* KPI 数字 */
  --text-3xl:  32px;  --lh-3xl:  1.15;  /* 页面主标题 */
  --text-4xl:  40px;  --lh-4xl:  1.1;   /* 首页姓名、Yong 主卡数字 */
  --text-display: 64px; --lh-display: 1; /* 首页时钟 */

  /* 字重 */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --tracking-tight: -0.025em; /* 标题、大数字（同 shop 站紧字距） */
  --tracking-wide:  0.04em;   /* 眉题 */

  /* ---------- 10. 间距（4px 基准） ---------- */
  --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;

  /* ---------- 11. 圆角（以 --radius 12px 为基准，同 shop 站比例） ---------- */
  --radius:      12px;
  --radius-xs:   6px;   /* 图例色块、表格内小输入框 */
  --radius-sm:   8px;   /* 输入框、分段内按钮、侧栏项 */
  --radius-md:   10px;  /* 状态栏、热力格、图表框 */
  --radius-lg:   12px;  /* 面板、KPI 卡 */
  --radius-xl:   16px;  /* 区块卡片 */
  --radius-2xl:  20px;  /* 首页导航卡、Yong 主卡 */
  --radius-pill: 999px; /* 按钮、标签、下拉、Toast */

  /* ---------- 12. 阴影（扁平：只有 1px 的极浅投影，用于浮在页面上的卡片） ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10);  /* 分段控件选中块 */
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---------- 13. 布局 / 尺寸 ---------- */
  --container-home:   1080px;
  --container-yong:   1200px;
  --container-jiaoyi: 1440px;
  --gutter:           32px;   /* 容器左右内边距（手机 16px） */
  --sidebar-w:        248px;  /* Jiaoyi 侧栏宽 */
  --panel-w:          360px;  /* Jiaoyi 图表旁录入面板宽 */
  --tabbar-h:         64px;   /* Jiaoyi 手机底部标签栏高 */
  --control-h:        36px;   /* 按钮 / 输入框 / 分段高度（触屏 44px） */
  --control-h-sm:     32px;   /* 小按钮 / 表格内输入框（触屏 44px） */
  --tap-min:          44px;   /* 最小可点区域 */
  --chart-h:          clamp(480px, calc(100vh - 320px), 720px);  /* Jiaoyi 图表高（≤760 为 420px） */
  --heat-cell-w:      112px;   /* Yong 热力格列宽（手机为自适应等分） */
  --heat-cell-h:      76px;   /* Yong 热力格高（手机 64px） */

  /* ---------- 14. 动效 ---------- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;

  /* ---------- 15. 层级 ---------- */
  --z-header: 20;
  --z-tabbar: 30;
  --z-toast:  999;

  /* ---------- 16. 断点（仅文档用途：CSS 的 @media 不能读变量，下面的值在各 css 里写成字面量） ----------
     --bp-sm: 560px   手机    （≤560）
     --bp-md: 760px   平板竖屏（≤760）
     --bp-lg: 1100px  平板横屏/小笔记本（≤1100：Jiaoyi 侧栏收为底部标签栏）；>1100 为桌面
  */
  --bp-sm: 560px;
  --bp-md: 760px;
  --bp-lg: 1100px;
}

/* ===================== 深色主题（随系统自动切换） ===================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0a0a0a;
    --color-surface:       #141414;
    --color-surface-2:     #1c1c1e;
    --color-surface-3:     #262628;
    --color-border:        #262628;
    --color-border-strong: #3a3a3d;

    --color-text:          #ededed;
    --color-text-2:        #a1a1a6;
    --color-text-3:        #6e6e73;

    --color-primary:        #0a84ff;
    --color-primary-hover:  #3395ff;
    --color-primary-active: #0071e3;
    --color-primary-soft:   #0c2238;
    --color-primary-text:   #64b0ff;
    --color-on-primary:     #ffffff;

    --color-ink:           #ededed;
    --color-ink-hover:     #ffffff;
    --color-ink-active:    #c7c7cc;
    --color-on-ink:        #111111;

    --color-success:       #4cc27a;
    --color-success-soft:  #10251a;
    --color-danger:        #ff6961;
    --color-danger-soft:   #2c1412;
    --color-warning:       #f0b44c;
    --color-warning-soft:  #2a210f;
    --color-offline:       #ff9f5a;
    --color-offline-soft:  #2b1a0e;
    --color-focus-ring:    rgba(10, 132, 255, 0.45);

    --heat-0: #1c1c1e;  --heat-0-fg: #8e8e93;  --heat-0-date: #6e6e73;
    --heat-1: #163322;  --heat-1-fg: #cfeedb;  --heat-1-date: #87b897;
    --heat-2: #1f6338;  --heat-2-fg: #ffffff;  --heat-2-date: #b5e3c4;
    --heat-3: #36a35f;  --heat-3-fg: #04170a;  --heat-3-date: #0c3a1c;
    --heat-4: #7ddb9c;  --heat-4-fg: #04170a;  --heat-4-date: #155229;
    --heat-brand: #1f6338;
    --heat-brand-fg: #ffffff;

    --chart-bg:          #141414;
    --chart-text:        #a1a1a6;
    --chart-grid:        #1e1e20;
    --chart-border:      #262628;

    --home-canvas-filter:  invert(1) hue-rotate(180deg);
    --home-canvas-opacity: 0.55;

    --shadow-xs: none;
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* 手机档：只改尺寸类变量 */
@media (max-width: 560px) {
  :root {
    --gutter:       16px;
    --text-3xl:     26px;
    --text-4xl:     32px;
    --text-display: 48px;
    --heat-cell-h:  64px;
  }
}
@media (max-width: 760px) {
  :root { --chart-h: 420px; --gutter: 16px; }
}
/* 触屏 / 窄屏：所有可点控件 ≥ 44px */
@media (max-width: 760px), (pointer: coarse) {
  :root {
    --control-h:    44px;
    --control-h-sm: 44px;
  }
}