/* ============================================================
 * 咖莱翼 · 外卖利润管家 — 主题桥接层（theme-bridge.css）
 * ------------------------------------------------------------
 * 【职责】把 pricing-app 移植过来的主题引擎（tokens/themes/theme.js）
 *         与本应用原有版式无缝对接，只做" harmonization"，不含业务样式。
 *
 * 【加载顺序】tokens.css → style.css → themes.css → 本文件
 *   - style.css 的 :root 与 themes.css 的 [data-*] 同为 (0,1,0) 特异性，
 *     themes.css 靠"加载在后"胜出 → 圆角/密度/字号档位才能覆盖基线；
 *   - 本文件最后加载，用于把「柔和（默认档）」校准回本应用原版式，
 *     并把密度/字号档位接线到本应用的实际元素上。
 *
 * 【铁律】默认档（柔和/舒适/标准）的渲染结果 = 改造前原版式；
 *         只有用户显式切换档位时，视觉才发生变化。
 * ============================================================ */

/* ---------- ① 圆角档位校准：柔和 = 原版式（卡 12px / 输入 8px） ---------- */
[data-radius="soft"] {
  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card: 12px;
}

/* ---------- ② 字号档位接线：本应用 body 固定 13.5px，这里随档位缩放 ---------- */
html[data-font="large"] body { font-size: 15px; }
html[data-font="large"] input,
html[data-font="large"] select { font-size: 14.5px; }
html[data-font="large"] button { font-size: 14px; }
html[data-font="large"] .topbar button { font-size: 12.5px; }
html[data-font="large"] table { font-size: 13.5px; }
html[data-font="large"] .muted { font-size: 13px; }
html[data-font="large"] .tip,
html[data-font="large"] .login-msg { font-size: 13.5px; }

/* ---------- ③ 密度档位接线：卡片内边距与布局栅格间距 ---------- */
html[data-density="compact"] .card { padding: 14px 16px; }
html[data-density="compact"] .layout { gap: 14px; padding: 14px 20px 32px; }
html[data-density="compact"] .topbar { height: 54px; }
html[data-density="loose"] .card { padding: 22px 26px; }
html[data-density="loose"] .layout { gap: 26px; padding: 26px 36px 48px; }
html[data-density="loose"] .topbar { height: 66px; }

/* ---------- ④ 外观设置弹窗：复用本应用 .modal-mask / .modal 体系 ----------
   theme.js 只操作 #appearanceModal 的 display，容器结构由本应用提供。
   .modal 默认 480px，外观面板内容较宽，放宽到 640px。 */
#appearanceModal .modal { width: 640px; }
#appearanceModal .modal h3 { margin-bottom: 6px; }
/* 面板里的次级按钮（应用/导出/导入）走本应用 ghost 风格，避免出现原生浏览器按钮 */
#appearanceModal .btn { background:#fff; color:var(--brand); border:1px solid var(--brand);
  border-radius:var(--radius-sm); padding:6px 12px; font-size:12px; font-weight:600;
  cursor:pointer; box-shadow:none; margin-top:0; }
#appearanceModal .btn:hover { background:var(--brand-soft); }