/* 基础结构\样式\全局变量定义.css */

/****************************************************************
 * 全局变量定义.css  ——  一次改变量，全站换主题

 * (所有「裸壳组件」—— ui-button、ui-input、color-display、
 *  dropdown-menu、ui-display 等——都依赖这些变量渲染。)
 ****************************************************************/

/* ==================== ❶ 默认（浅色） ==================== */
:root {
  /* ----- 尺寸 ----- */
  --控件高度: 40px;
  --控件间距: 6px;
  --圆角: 4px;
  --边框宽度: 0px;
  --最小宽度: 80px;
  --控件内边距: 4px 10px;

  /* ----- 字体 ----- */
  --内字体大小: 15px;
  --外字体大小: 12px;
  --标题字体大小: 20px;
  --字体: system-ui, sans-serif;

  /* ----- 颜色 (浅色) ----- */
  --主色: #ffffff;
  --主色-悬停: #e5e7eb;
  --悬停字体颜色: #f60b0b;
  --悬停占位符色: #cd146a;
  /* 默认占位符悬停色 */
  --背景色: #ffffff;
  --控件背景: #ffffff;
  --边框色: #d1d5db;
  --字体颜色: #1f2937;
  --按钮字体颜色: #1f2937;
  --禁用色: #9ca3af;
  --焦点色: #3b82f6;
  --阴影色: rgba(0, 0, 0, 0.05);
  --占位符色: #6b7280;
  --悬停字体粗细: 700;

  /* ----- 动画 ----- */
  --过渡时间: .2s;
  --动画缓动: ease-in-out;
}

/* ==================== ❷ 浅色主题 (可选) ==================== */
body.theme-light {
  --主色: #eef4ff;
  --主色-悬停: #d5e4ff;
  --悬停字体颜色: #cd146a;
  --悬停占位符色: #cd146a;
  /* ← 新增 */
}

/* ==================== ❸ 深色主题 ==================== */
body.theme-dark {
  --背景色: #111827;
  --控件背景: #fbfbfb;
  --边框色: #374151;
  --字体颜色: #0f0f0f;
  --按钮字体颜色: #111111;
  --占位符色: #d61821;
  --悬停占位符色: #5118d6;
  --主色: #374151;
  --主色-悬停: #4b5563;
  --悬停字体颜色: #a5e60d;
  --悬停占位符色: #5118d6;

  --焦点色: #60a5fa;
  --禁用色: #4b5563;
}

/* ==================== ❹ Ocean 主题示例 ==================== */
body.theme-ocean {
  --背景色: #e0f7fa;
  --控件背景: #ffffff;
  --边框色: #00acc1;
  --字体颜色: #004d40;
  --按钮字体颜色: #004d40;

  --主色: #00bcd4;
  --主色-悬停: #0097a7;
  --悬停字体颜色: #cf1919;
  --悬停占位符色: #5118d6;

  --焦点色: #00838f;
  --禁用色: #80deea;
}

/* ==========================================================
   ▼ 统一裸壳组件外观
   （若单独实例需要不同风格，直接覆写变量或行内 style）
   ========================================================== */

/* -----按钮组件----- ui-button ---------- */
ui-button {
  background: var(--控件背景, transparent);
  border: var(--边框宽度) solid var(--边框色, transparent);
  padding: var(--控件内边距);
  border-radius: var(--圆角);
  min-width: var(--最小宽度);
  color: var(--字体颜色);
}

ui-button:hover:not([disabled]) {
  background: var(--主色-悬停, var(--主色, transparent));
  color: var(--悬停字体颜色, currentColor);
  font-weight: var(--悬停字体粗细, 700);
}

/* -----输入框组件----- ui-input ---------- */
ui-input {
  background: var(--控件背景, transparent);
  border: var(--边框宽度) solid var(--边框色, transparent);
  padding: var(--控件内边距);
  border-radius: var(--圆角);
  min-width: var(--最小宽度);
  color: var(--字体颜色);
}

/* 👇 悬停占位符色：变量覆写 */
ui-input:hover {
  --占位符色: var(--悬停占位符色, #999);
}


/* ------颜色选择器_组件---- color-display ---------- */
color-display {
  background: var(--控件背景, transparent);
  border: var(--边框宽度) solid var(--边框色, transparent);
  padding: var(--控件内边距);
  border-radius: var(--圆角);
}

/* -----下拉菜单组件.js----- dropdown-menu  ---------- */
dropdown-menu {
  background: var(--控件背景, transparent);
  border: var(--边框宽度) solid var(--边框色, transparent);
  padding: var(--控件内边距);
  border-radius: var(--圆角);
  min-width: var(--最小宽度);
  color: var(--字体颜色);
}

dropdown-menu:hover:not([disabled]) {
  color: var(--悬停字体颜色, currentColor);
}

/* ------显示框_组件_开关.js---- ui-display ---------- */
ui-display {
  background: var(--控件背景, transparent);
  border: var(--边框宽度) solid var(--边框色, transparent);
  padding: var(--控件内边距);
  border-radius: var(--圆角);
  min-width: var(--最小宽度);
  color: var(--字体颜色);
}

/* 👇 悬停占位符色：变量覆写 */
ui-display:hover {
  --占位符色: var(--悬停占位符色, #999);
}

/* ---------- disabled 状态统一 ---------- */
ui-button[disabled],
ui-input[disabled],
dropdown-menu[disabled],
ui-display[disabled],
color-display[disabled] {
  opacity: .5;
  cursor: not-allowed;
  color: var(--禁用色);
}