/* ============================================================
 * 咖算云中控 · 外观引擎桥接层（Theme Bridge）
 * ------------------------------------------------------------
 * 作用：把 咖莱翼 主应用的 CalayTheme 外观引擎（theme.js + themes.css）
 *       桥接到中控自己的设计令牌词汇，使「配色方案设置」面板在中控
 *       完全可用，且零改 theme.js / themes.css（保持与源仓同步能力）。
 *
 * 中控令牌词汇 ≠ 主应用，需要补四组映射：
 *   ① 颜色：主应用写 --blue-* → 中控组件读 --c-brand-*（含 --c-info-*、焦点光晕）
 *   ② 面板词汇：.ap-* 面板样式用的 --primary/--text/--card-bg/--radius-* 等
 *              → 中控的 --c-brand-*/--fg-*/--bg-*/--bd-*/--rd-*
 *   ③ 布局维度：themes.css 的 [data-density]/[data-radius]/[data-font]
 *              写的是主应用词汇（--space-*/--radius-*/--fs-base），
 *              中控读 --sp-*/--rd-*/--fs-* → 这里重映射，使面板真正生效
 *   ④ 外壳：中控 components.css 缺 .modal-* / .btn 类 → 这里自包含补齐
 *
 * 【明暗共存关键】主应用 CalayTheme 把「配色主题」写到 <html>[data-theme]，
 *   中控自有 toggleTheme 把「明暗」写到 <body>[data-theme]。
 *   两者在不同元素、互不覆盖。暗色时 <body> 上的 --c-brand-500（浅蓝）
 *   比 <html> 桥接值离组件更近而胜出，正好让暗色用浅蓝主色。
 * ============================================================ */

/* ── ① 颜色桥接：--blue-* → --c-brand-* ──────────────────────
 * 放在 :root，优先级高于 tokens.css 基线条目；但低于 <body>[data-theme=dark]
 * （body 离组件更近），故暗色下自动回落到浅蓝主色。 */
:root {
  --c-brand-50:  var(--blue-50,  #eff5ff);
  --c-brand-100: var(--blue-100, #dbe8ff);
  --c-brand-200: var(--blue-200, #bcd3ff);
  --c-brand-300: var(--blue-300, #8eb5ff);
  --c-brand-400: var(--blue-400, #5b8dff);
  --c-brand-500: var(--blue-500, #2b6cff);
  --c-brand-600: var(--blue-600, #1a54e0);
  --c-brand-700: var(--blue-700, #1543b8);
  --c-brand-800: var(--blue-800, #123a94);
  --c-brand-900: var(--blue-900, #0f2f75);

  --c-info-50:  var(--blue-50,  #eff5ff);
  --c-info-500: var(--blue-500, #2b6cff);

  /* 焦点光晕跟随主色 RGB（theme.js 内联写 --primary-rgb） */
  --sh-focus:      0 0 0 3px rgba(var(--primary-rgb, 43, 108, 255), .18);
  --sh-focus-bad:  0 0 0 3px rgba(224, 72, 60, .18);
}

/* ── ② 面板词汇桥接：.ap-* 面板用的主应用令牌 → 中控令牌 ──────
 * 仅被外观面板内部引用；中控业务 CSS 不用这些名字，不会误伤。 */
:root {
  /* 品牌相关 */
  --primary:       var(--c-brand-500);
  --primary-light: var(--c-brand-100);
  --primary-dark:  var(--c-brand-700);

  /* 表面 / 文字 / 边框 */
  --card-bg:       var(--bg-surface);
  --text:          var(--fg-primary);
  --text-secondary: var(--fg-second);
  --border:        var(--bd-base);
  --border-dark:   var(--bd-strong);
  --gray-25:       var(--c-n-25);
  --gray-50:       var(--c-n-50);

  /* 圆角（面板用 --radius-*，中控用 --rd-*） */
  --radius-sm:   var(--rd-sm);
  --radius:      var(--rd-md);
  --radius-md:   var(--rd-md);
  --radius-lg:   var(--rd-lg);
  --radius-xl:   var(--rd-xl);
  --radius-card: var(--rd-lg);

  /* 字号（面板用 --fs-xs/sm/md/lg，中控用 --fs-11..） */
  --fs-xs:  var(--fs-11);
  --fs-sm:  var(--fs-12);
  --fs-md:  var(--fs-13);
  --fs-lg:  var(--fs-16);

  /* 字重 / 行高 */
  --fw-semibold: var(--fw-semi);
  --fw-medium:   var(--fw-medium);
  --lh-normal:   var(--lh-base);

  /* 阴影 / 层级 */
  --shadow-lg: var(--sh-lg);
  --shadow-xl: var(--sh-lg);
  --z-toast:   var(--z-toast);
}

/* ── ③ 布局维度桥接：让面板里的密度/圆角/字号拖动真正改中控 UI ──
 * theme.js 把维度写到 <html>[data-density]/[data-radius]/[data-font]，
 * 这里把它们重映射成中控令牌。放在属性选择器上，与 themes.css 同名
 * 规则同靶 html，本文件靠加载顺序在后而胜出（只覆盖中控需要的令牌）。 */

/* 密度：紧凑 / 舒适 / 宽松 */
[data-density="compact"] {
  --sp-3: 8px;  --sp-4: 12px; --sp-5: 16px; --sp-6: 20px;
  --density-row-h: 30px; --h-control: 30px; --h-topbar: 46px;
  --fs-13: 12px; --fs-14: 13px; --fs-16: 15px;
}
[data-density="comfortable"] {
  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --density-row-h: 38px; --h-control: 34px; --h-topbar: 52px;
  --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
}
[data-density="loose"] {
  --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 40px;
  --density-row-h: 44px; --h-control: 38px; --h-topbar: 56px;
  --fs-13: 14px; --fs-14: 15px; --fs-16: 17px;
}

/* 圆角：方正 / 柔和 / 圆润 */
[data-radius="square"] {
  --rd-xs: 2px; --rd-sm: 2px; --rd-md: 2px; --rd-lg: 3px; --rd-xl: 4px; --rd-full: 999px;
}
[data-radius="soft"] {
  --rd-xs: 4px; --rd-sm: 5px; --rd-md: 8px; --rd-lg: 10px; --rd-xl: 14px; --rd-full: 999px;
}
[data-radius="round"] {
  --rd-xs: 8px; --rd-sm: 10px; --rd-md: 14px; --rd-lg: 20px; --rd-xl: 26px; --rd-full: 999px;
}

/* 字号：放大档（基准档用 :root 默认，不覆盖） */
[data-font="large"] {
  --fs-11: 12px; --fs-12: 13px; --fs-13: 14px; --fs-14: 15px;
  --fs-16: 17px; --fs-18: 19px; --fs-20: 21px; --fs-24: 26px;
}

/* ── ④ 外壳：弹窗 + 面板按钮（中控 components.css 缺这些类） ── */

/* 弹窗遮罩（theme.js 在打开时把 display 置为 flex） */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  background: var(--bg-scrim); padding: var(--sp-4);
}
.modal-content {
  width: 100%; max-width: 680px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-surface); color: var(--fg-primary);
  border: 1px solid var(--bd-base); border-radius: var(--rd-lg);
  box-shadow: var(--sh-lg);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--bd-subtle);
}
.modal-header h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--fg-primary); }
.modal-close {
  border: none; background: transparent; color: var(--fg-second);
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 2px 8px; border-radius: var(--rd-sm);
}
.modal-close:hover { background: var(--bg-sunken); color: var(--fg-primary); }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-footer {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--bd-subtle);
}

/* 面板里的 .btn / .btn-outline / .btn-sm（theme.js 写死的类名） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control-sm); padding: 0 var(--sp-3);
  border: 1px solid var(--bd-base); background: var(--bg-surface); color: var(--fg-primary);
  border-radius: var(--rd-sm); font-size: var(--fs-12); font-weight: var(--fw-medium);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-sunken); }
.btn-outline { background: transparent; border-color: var(--bd-strong); color: var(--fg-primary); }
.btn-sm { height: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--fs-12); }