/* ==================================================================
 * styles/tokens.css —— 设计 token 基座（M01 建立，M03 扩充/权威化）
 * ------------------------------------------------------------------
 * 铁律（宪法 C5 / 总纲 §2.2）：
 *   · 任何模块【禁止硬编码色值/字号/间距】，只能引用这里的 CSS 变量
 *   · 用户自定义配色 = 覆写这些变量即刻生效（app.theme.applyCustomTokens）
 *   · 不用 color-mix() 等新特性，跨浏览器稳定（这是我们从 WaveMaker 吸取的教训）
 *
 * 三模式：day(日间) / night(夜间) / eye(护眼)
 * 数值出处：Ardot 设计规范文件 732439309072911 · 第①页「设计基础」
 * ================================================================== */

:root {
  /* ---------- 字体族（M03 将内嵌 woff2 并定义 @font-face；此处为安全回退）---------- */
  --font-ui: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", -apple-system,
             BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-mono: "Cascadia Mono", "Consolas", "Courier New", monospace;

  /* ---------- 用户可调旋钮（M03：界面偏好滑块直接写这三个变量）----------
   * --font-scale  界面字号倍率  0.85 ~ 1.40
   * --btn-scale   按钮大小倍率  0.80 ~ 1.60
   * --ui-density  间距密度倍率  0.80 ~ 1.50
   * 为什么用 calc 而不是在 JS 里重算所有变量：
   *   这样"一个旋钮生效全站"纯由 CSS 完成，JS 只改一个数，零重排风险、零遗漏。
   * 注：calc() 与 CSS 变量在所有常青浏览器均支持；本项目不支持 IE 与极低版本 Safari。
   */
  --font-scale: 1;
  --btn-scale: 1;
  --ui-density: 1;

  /* ---------- 字号阶梯（全部随 --font-scale 缩放）---------- */
  --fs-h1: calc(28px * var(--font-scale));
  --fs-h2: calc(22px * var(--font-scale));
  --fs-h3: calc(18px * var(--font-scale));
  --fs-body: calc(16px * var(--font-scale));
  --fs-aux: calc(13px * var(--font-scale));
  --fs-btn: calc(14px * var(--font-scale));

  /* ---------- 行高 ---------- */
  --lh-title: 1.35;
  --lh-body: 1.85;   /* 正文行高：长篇阅读舒适区 */

  /* ---------- 间距栅格（4/8 制，随 --ui-density 缩放）---------- */
  --space-1: calc(4px * var(--ui-density));
  --space-2: calc(8px * var(--ui-density));
  --space-3: calc(12px * var(--ui-density));
  --space-4: calc(16px * var(--ui-density));
  --space-5: calc(20px * var(--ui-density));
  --space-6: calc(24px * var(--ui-density));
  --space-8: calc(32px * var(--ui-density));
  --space-12: calc(48px * var(--ui-density));

  /* ---------- 圆角 ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ---------- 控件尺寸：按钮高度三档（app.css 中再 × --btn-scale）---------- */
  --btn-h-s: 32px;
  --btn-h-m: 40px;
  --btn-h-l: 48px;

  /* ---------- 顶栏/面板尺寸（--panel-left-w 可由 UI 滑块直接覆盖）---------- */
  --topbar-h: 48px;
  --statusbar-h: 28px;
  --panel-left-w: 260px;
  --panel-right-w: 320px;

  /* ---------- 过渡 ---------- */
  --t-fast: 120ms;
  --t-base: 200ms;

  /* ---------- 语义色（三模式共用）---------- */
  --c-danger: #A32D2D;
  --c-warning: #BA7517;
  --c-success: #3B6D11;
  --c-accent: #534AB7;
}

/* ---------------- 日间模式（默认）---------------- */
:root,
:root[data-theme="day"] {
  --bg-app: #FFFFFF;
  --bg-panel: #F5F6F8;
  --bg-elevated: #FFFFFF;
  --bg-hover: #EEF0F4;
  --bg-active: #E4E7ED;

  --fg-default: #1A1D23;
  --fg-muted: #5F5E5A;
  --fg-invert: #FFFFFF;
  --fg-on-primary: #FFFFFF;

  --c-primary: #185FA5;
  --c-primary-soft: #E7F0FA;

  --border-default: #DCDFE5;
  --border-strong: #C2C7D0;
  color-scheme: light;
}

/* ---------------- 夜间模式 ---------------- */
:root[data-theme="night"] {
  --bg-app: #0E1116;
  --bg-panel: #1A1F26;
  --bg-elevated: #20262F;
  --bg-hover: #232A33;
  --bg-active: #2C3441;

  --fg-default: #E6EAF0;
  --fg-muted: #9AA4B2;
  --fg-invert: #0E1116;
  --fg-on-primary: #FFFFFF;

  --c-primary: #378ADD;
  --c-primary-soft: #16283C;

  --border-default: #2A3140;
  --border-strong: #3A4453;

  --c-danger: #F28B82;
  --c-warning: #EFBF6B;
  --c-success: #8FD07A;
  --c-accent: #9C8FE8;
  color-scheme: dark;
}

/* ---------------- 护眼模式 ---------------- */
:root[data-theme="eye"] {
  --bg-app: #EAE3D2;
  --bg-panel: #F3EEDF;
  --bg-elevated: #F7F3E8;
  --bg-hover: #E7E1CE;
  --bg-active: #DCD5BF;

  --fg-default: #2C2A24;
  --fg-muted: #6B6656;
  --fg-invert: #EAE3D2;
  --fg-on-primary: #FFFFFF;

  --c-primary: #6E7B4E;
  --c-primary-soft: #E4E7D2;

  --border-default: #D3CBB4;
  --border-strong: #BDB394;
  color-scheme: light;
}