/* ============================================================================
   tokens.css —— 设计 token
   取值来源：线上站点构建产物 assets/index-BQQTfqvJ.css（真实数值，非猜测）
     · :root / html.dark 两套 CSS 变量块
     · SCSS :export 设计 token（menuText / menuActiveText / menuBg / menuHover /
       sideBarWidth / colorPrimary / colorSuccess / colorWarning / colorDanger / colorInfo）
   线上未定义却在 CSS 里被 var() 引用的变量（--el-color-primary、--current-color、
   --current-color-light、--current-color-dark-bg 等）由运行时主题系统注入，
   本实现同样在运行时注入，见 shell/theme.js。
   ========================================================================= */

:root {
  /* —— SCSS :export 设计 token（线上原值） —— */
  --jxc-color-primary: #0053cf;
  --jxc-color-success: #67c23a;
  --jxc-color-warning: #e6a23c;
  --jxc-color-danger: #f56c6c;
  --jxc-color-info: #909399;

  /* —— 侧边栏 / 菜单（SCSS :export 原值） —— */
  --jxc-sidebar-width: 200px;
  --jxc-menu-text: #bfcbd9;
  --jxc-menu-active-text: #0053cf;
  --jxc-menu-bg: #1a1f2e;
  --jxc-menu-hover: #263445;
  --jxc-menu-light-bg: #fff;
  --jxc-menu-light-hover: #f0f1f5;
  --jxc-menu-light-text: #303133;
  --jxc-menu-light-active-text: #0053cf;

  /* —— 业务页 token（线上 --jxc-* 原值） —— */
  --jxc-primary: #0053cf;
  --jxc-bg: #f7f9fc;
  --jxc-surface: #fff;
  --jxc-card-radius: 12px;
  --jxc-card-shadow: 0 2px 12px #0000000f;
  --jxc-inbound-accent: #e65100;

  /* —— 布局骨架（线上固定值） —— */
  --jxc-navbar-height: 50px;
  --jxc-tags-height: 34px;
  --jxc-sidebar-logo-height: 58px;
  --jxc-main-gutter: 20px;
  --jxc-navbar-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  /* —— 亮色主题部件（线上 :root 段，dark 块之外的那一套） —— */
  --jxc-sidebar-bg: #1a1f2e;
  --jxc-sidebar-text: #bfcbd9;
  --jxc-navbar-bg: #fff;
  --jxc-navbar-text: #303133;

  /* —— 文本与描边（Element Plus 亮色基线，线上组件实际取值） —— */
  --jxc-text-primary: #303133;
  --jxc-text-regular: #606266;
  --jxc-text-secondary: #909399;
  --jxc-text-placeholder: #a8abb2;
  --jxc-border: #dcdfe6;
  --jxc-border-light: #e4e7ed;
  --jxc-border-lighter: #ebeef5;
  --jxc-fill: #f0f2f5;
  --jxc-fill-light: #fafafa;

  /* —— 表格（线上覆盖值） —— */
  --jxc-table-header-bg: #f8f8f9;
  --jxc-table-header-text: #515a6e;
  --jxc-table-header-height: 40px;
  --jxc-table-row-hover: #f5f7fa;
  --jxc-table-border: #ebeef5;

  /* ---------- 拟态（neumorphism）材质 ----------
     思路：卡片/按钮与**页面底色**同色系，靠一对反向阴影造出「从底板上挤出来 / 压进去」
     的体积感，而不是靠边框把区域框起来。所以「凸起」= 左上高光 + 右下暗影，
     「凹陷」= 把这两个方向对调并加一点内阴影。

     两个必须同时成立的条件（少一个整套就失效，看起来只是脏）：
       1. surface 与 bg 的明度差要很小 —— 差大了阴影就看不见（底色本身已经分层）。
       2. 高光要**比 surface 亮**、暗影要**比 bg 暗**，否则只是两块灰。

     ⚠ 文字不参与这套材质：数值、标签仍然用实色，绝不加阴影 ——
     拟态最容易翻车的地方就是给文字也上软阴影，那样数字会发虚、认不出来。 */
  --jxc-neu-light: rgba(255, 255, 255, .92);
  --jxc-neu-dark: rgba(163, 177, 198, .38);
  --jxc-neu-out: -2px -2px 6px var(--jxc-neu-light), 3px 3px 9px var(--jxc-neu-dark);
  --jxc-neu-out-sm: -1px -1px 3px var(--jxc-neu-light), 2px 2px 5px var(--jxc-neu-dark);
  --jxc-neu-out-lg: -4px -4px 14px var(--jxc-neu-light), 6px 6px 18px var(--jxc-neu-dark);
  --jxc-neu-in: inset 2px 2px 5px var(--jxc-neu-dark), inset -2px -2px 5px var(--jxc-neu-light);
  --jxc-neu-in-sm: inset 1px 1px 3px var(--jxc-neu-dark), inset -1px -1px 2px var(--jxc-neu-light);
  /* 拟态下边框要几乎消失，只留一丝勾勒（纯拟态没有边框，但完全没有边框时
     相邻卡片的边缘在低对比屏上会糊成一片）。 */
  --jxc-neu-border: rgba(255, 255, 255, .55);
  /* 按下 / 选中的下沉量 */
  --jxc-neu-press: inset 3px 3px 7px var(--jxc-neu-dark), inset -3px -3px 7px var(--jxc-neu-light);

  /* —— 圆角与动效 —— */
  --jxc-radius-sm: 4px;
  --jxc-radius-md: 4px;
  --jxc-radius-lg: 8px;
  --jxc-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --jxc-duration: 0.28s;
}

/* 侧边栏浅色风格：线上 theme-light（menuLight* 一组 token） */
:root[data-side-theme='theme-light'] {
  --jxc-sidebar-bg: var(--jxc-menu-light-bg);
  --jxc-sidebar-text: var(--jxc-menu-light-text);
  --jxc-menu-bg: var(--jxc-menu-light-bg);
  --jxc-menu-hover: var(--jxc-menu-light-hover);
  --jxc-menu-active-text: var(--jxc-menu-light-active-text);

  /* —— 暗色主题（线上 html.dark 变量块，逐条对应） —— */
  --jxc-sidebar-border: 1px solid #e8eaf0;
}

:root[data-theme='dark'] {
  --jxc-bg-color: #141414;
  --jxc-bg-overlay: #1d1e1f;
  --jxc-text-primary: #fff;
  --jxc-text-regular: #d0d0d0;
  --jxc-border: #434343;
  --jxc-border-light: #434343;
  --jxc-menu-text: #d0d0d0;
  --jxc-sidebar-logo-text: #d0d0d0;
  --jxc-primary-bg: #18212b;
  --jxc-sidebar-bg: #141414;
  --jxc-sidebar-text: #fff;
  --jxc-menu-hover: #2d2d2d;
  --jxc-menu-active-text: #0053cf;
  --jxc-navbar-bg: #141414;
  --jxc-navbar-text: #fff;
  --jxc-tags-bg: #141414;
  --jxc-tags-item-bg: #1d1e1f;
  --jxc-tags-item-border: #303030;
  --jxc-tags-item-text: #d0d0d0;
  --jxc-tags-item-hover: #2d2d2d;
  --jxc-blockquote-bg: #1d1e1f;
  --jxc-blockquote-border: #303030;
  --jxc-blockquote-text: #d0d0d0;

  /* 业务页暗色（线上 --jxc-bg / --jxc-surface 的 dark 覆盖） */
  --jxc-bg: #141824;
  --jxc-surface: #1a1f2e;

  --jxc-text-secondary: #a3a6ad;
  --jxc-border-lighter: #303030;
  --jxc-fill: #1d1e1f;
  --jxc-fill-light: #232324;
  --jxc-table-header-bg: #1d1e1f;
  --jxc-table-header-text: #d0d0d0;
  --jxc-table-border: #303030;
  --jxc-table-row-hover: #1d1e1f;
  --jxc-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --jxc-navbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

  /* ---------- 拟态材质 · 暗色 ----------
     暗色下**不能照搬亮色的做法**：亮色靠「白高光」提体积，暗色里白色高光会很脏。
     暗色拟态靠的是「比底色稍亮的面 + 更黑的暗影」，
     高光用极低透明度的白（.06），暗影用纯黑但不透明度更高，
     这样凸起仍然看得出来，又不会浮一层灰。 */
  --jxc-neu-light: rgba(255, 255, 255, .055);
  --jxc-neu-dark: rgba(0, 0, 0, .55);
  --jxc-neu-border: rgba(255, 255, 255, .045);
  --jxc-neu-press: inset 3px 3px 7px var(--jxc-neu-dark), inset -3px -3px 7px var(--jxc-neu-light);
}

/* 主题色派生由 shell/theme.js 写入：--el-color-primary-light-1..9 / dark-1..9
   与站点自定义的 --current-color / --current-color-light / --current-color-dark-bg。
   这里只给出去 JS 时的兜底，保证样式表本身可独立渲染。 */
:root {
  --current-color: var(--jxc-color-primary);
  --current-color-light: #e6eefb;
  --current-color-dark-bg: #e6eefb;
}