/* ==========================================================================
   HANABARA STUDIO — Design Tokens & Component Kit  (design-tokens.css)
   --------------------------------------------------------------------------
   单一来源的设计系统。**所有页面第一个加载它**（index / settings / forum /
   paint_check），各页面自己的 style.css / shared.css / 内联 <style> 在其后加载，
   因此本文件是 additive：既有规则仍然生效 → 零视觉回归；各页面只是额外获得了
   「完整 token 词汇表 + 可复用组件类」。

   设计语言：shadcn 风格的深色中性面板 —— 克制的 1px 描边、统一圆角、中性灰阶、
   品牌红 #E60012 作为唯一强调色。

   规则（保持前端一致性，新代码请遵守）：
     1. 颜色/圆角/间距/字号 一律用下面的 --ds-* token，不要再写裸 hex / 魔法数字。
     2. 新 UI 用 .ds-btn / .ds-card / .ds-input / .ds-badge / .ds-modal 组件类。
     3. 旧的 --text/--dim/--surface/--accent/--bg-primary/--danger… 仍可用
        （下方做了别名映射到同一套 canonical 值），方便存量代码渐进迁移。

   本文件只含 :root 与 .ds-* 命名类，**不含裸元素选择器**，不会改动现有 DOM 外观。
   ========================================================================== */

:root {
  /* ======================= 中性面板灰阶（由深到浅） ======================= */
  --ds-bg:        #0a0a0a;   /* 页面背景 */
  --ds-surface-1: #111111;   /* 次级背景 / 抽屉 */
  --ds-surface-2: #151515;   /* 卡片 */
  --ds-surface-3: #1a1a1a;   /* 三级 / hover 面 */
  --ds-surface-4: #222222;   /* 输入框 / 控件 */
  --ds-elevated:  #181818;   /* 模态 / popover */

  /* ============================== 描边 ============================== */
  --ds-border:        #2a2a2a;  /* 默认细描边（shadcn 克制风） */
  --ds-border-strong: #333333;  /* 强调描边 / 控件边 */
  --ds-border-muted:  #1f1f1f;  /* 极弱分隔 */
  --ds-border-w:      1px;

  /* ============================== 文字 ============================== */
  --ds-text:       #ffffff;   /* 主文字 */
  --ds-text-2:     #aaaaaa;   /* 次文字 */
  --ds-text-muted: #888888;   /* 弱化 */
  --ds-text-dim:   #666666;   /* 更弱 */
  --ds-text-faint: #555555;   /* 占位 / disabled */

  /* ========================= 品牌 + 语义色 ========================= */
  --ds-accent:       #E60012;  /* 企业红 —— 全站唯一强调色 */
  --ds-accent-hover: #ff1a2e;
  --ds-accent-fg:    #ffffff;  /* 红底上的文字 */
  --ds-success: #4ade80;
  --ds-warning: #fbbf24;
  --ds-danger:  #f87171;
  --ds-info:    #60a5fa;

  /* ===================== 圆角（统一 scale） ===================== */
  --ds-radius-xs:   3px;
  --ds-radius-sm:   4px;
  --ds-radius-md:   6px;
  --ds-radius-lg:   8px;
  --ds-radius-xl:   12px;
  --ds-radius-2xl:  16px;
  --ds-radius-full: 9999px;

  /* ===================== 间距（4px 基准 scale） ===================== */
  --ds-space-1: 2px;  --ds-space-2: 4px;  --ds-space-3: 6px;  --ds-space-4: 8px;
  --ds-space-5: 10px; --ds-space-6: 12px; --ds-space-8: 16px;
  --ds-space-10: 20px; --ds-space-12: 24px; --ds-space-16: 32px;

  /* ===================== 字号（T-shirt scale） ===================== */
  --ds-fs-2xs:  9px;  --ds-fs-xs: 10px; --ds-fs-sm: 11px; --ds-fs-base: 12px;
  --ds-fs-md:  13px;  --ds-fs-lg: 14px; --ds-fs-xl: 16px; --ds-fs-2xl: 18px;
  --ds-fs-3xl: 20px;  --ds-fs-4xl: 24px;

  /* ============================ 字重 ============================ */
  --ds-fw-normal: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700;

  /* ====================== 阴影 / 高度（elevation） ====================== */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --ds-shadow-md: 0 4px 12px rgba(0,0,0,0.50);
  --ds-shadow-lg: 0 10px 40px rgba(0,0,0,0.55);
  --ds-shadow-xl: 0 20px 60px rgba(0,0,0,0.60);

  /* ====================== 遮罩 / scrim ====================== */
  --ds-overlay:      rgba(0,0,0,0.80);
  --ds-overlay-blur: 6px;

  /* ============================ 过渡 ============================ */
  --ds-t-fast: 0.15s ease; --ds-t-normal: 0.2s ease; --ds-t-slow: 0.3s ease;

  /* ====================== 控件高度 ====================== */
  --ds-h-sm: 28px; --ds-h-md: 34px; --ds-h-lg: 40px;

  /* ====================== 焦点环（shadcn ring） ====================== */
  --ds-ring: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 30%, transparent);

  /* ====================== z-index scale ====================== */
  /* --ds-z-ctxmenu：右键菜单是跟随光标的瞬态层，必须压过一切弹窗
     （index.html 的 #modal-mask 9200 / 口型对比 100000 / toast 100001） */
  --ds-z-dropdown: 100; --ds-z-sticky: 200; --ds-z-overlay: 300; --ds-z-modal: 400; --ds-z-toast: 500; --ds-z-ctxmenu: 100002;

  /* ======================================================================
     向后兼容别名 —— 把全站三套既有 token 词汇表映射到同一套 canonical 值，
     让每个页面解析出【一致】的颜色/圆角。各页面自己的 :root 若仍重复定义，
     会就地覆盖（值相同 → 无变化）；本段保证缺失处也有统一兜底。
     ====================================================================== */
  /* — style.css 词汇 — */
  --bg:            var(--ds-bg);
  --surface:       var(--ds-surface-2);
  --surface-hover: var(--ds-surface-3);
  --border:        var(--ds-border-strong);
  --dim:           var(--ds-text-muted);
  --accent:        var(--ds-accent);
  /* — shared.css 词汇 — */
  --surface-alt:    var(--ds-surface-3);
  --surface-dark:   var(--ds-surface-1);
  --surface-darker: var(--ds-bg);
  --surface-input:  var(--ds-surface-4);
  --border-light:   var(--ds-border);
  --border-medium:  var(--ds-border-strong);
  --text-dim:       var(--ds-text-dim);
  --text-dimmer:    var(--ds-text-faint);
  --radius-sm: var(--ds-radius-sm);
  --radius-md: var(--ds-radius-md);
  --radius-lg: var(--ds-radius-lg);
  --radius-xl: var(--ds-radius-xl);
  --transition-fast:   var(--ds-t-fast);
  --transition-normal: var(--ds-t-normal);
  --transition-slow:   var(--ds-t-slow);
  /* — settings.html 词汇 — */
  --bg-primary:   var(--ds-bg);
  --bg-secondary: var(--ds-surface-1);
  --bg-tertiary:  var(--ds-surface-3);
  --bg-card:      var(--ds-surface-2);
  --text-primary:   var(--ds-text);
  --text-secondary: var(--ds-text-2);
  --accent-hover: var(--ds-accent-hover);
  --success: var(--ds-success);
  --warning: var(--ds-warning);
  --danger:  var(--ds-danger);
  --info:    var(--ds-info);
  --border-color: var(--ds-border-strong);
}

/* ==========================================================================
   组件类 —— 可复用、token 驱动、shadcn 风。命名空间 .ds-* 以保证与既有
   .btn/.modal/.card/.badge 规则零冲突；新 UI 直接用这些类即可全站一致。
   ========================================================================== */

/* ----------------------------- 按钮 ----------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-space-3);
  height: var(--ds-h-md); padding: 0 var(--ds-space-8);
  border: var(--ds-border-w) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-3); color: var(--ds-text);
  font-size: var(--ds-fs-base); font-weight: var(--ds-fw-semibold);
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--ds-t-fast), border-color var(--ds-t-fast), color var(--ds-t-fast), opacity var(--ds-t-fast);
  -webkit-appearance: none; appearance: none;
}
.ds-btn:hover { background: var(--ds-surface-4); border-color: var(--ds-text-faint); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ds-btn:disabled, .ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; pointer-events: none; }

.ds-btn--primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-fg); }
.ds-btn--primary:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); }
.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ds-text-2); }
.ds-btn--ghost:hover { background: var(--ds-surface-3); border-color: var(--ds-border); color: var(--ds-text); }
.ds-btn--outline { background: transparent; }
.ds-btn--danger { background: var(--ds-danger); border-color: var(--ds-danger); color: #1a0000; }
.ds-btn--danger:hover { background: color-mix(in srgb, var(--ds-danger) 85%, #fff); }

.ds-btn--sm { height: var(--ds-h-sm); padding: 0 var(--ds-space-5); font-size: var(--ds-fs-sm); }
.ds-btn--lg { height: var(--ds-h-lg); padding: 0 var(--ds-space-10); font-size: var(--ds-fs-lg); }
.ds-btn--icon { width: var(--ds-h-md); padding: 0; }
.ds-btn--icon.ds-btn--sm { width: var(--ds-h-sm); }
.ds-btn--block { width: 100%; }

/* ----------------------------- 卡片 ----------------------------- */
.ds-card {
  background: var(--ds-surface-2);
  border: var(--ds-border-w) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-8);
}
.ds-card--interactive { transition: transform var(--ds-t-normal), border-color var(--ds-t-normal), box-shadow var(--ds-t-normal); cursor: pointer; }
.ds-card--interactive:hover { transform: translateY(-2px); border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-md); }

/* ----------------------------- 输入 ----------------------------- */
.ds-input, .ds-textarea, .ds-select {
  width: 100%; height: var(--ds-h-md); padding: 0 var(--ds-space-5);
  background: var(--ds-surface-4);
  border: var(--ds-border-w) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text); font-size: var(--ds-fs-base); font-family: inherit;
  outline: none; transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast);
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
.ds-textarea { height: auto; min-height: 72px; padding: var(--ds-space-4) var(--ds-space-5); line-height: 1.5; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-faint); }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus { border-color: var(--ds-accent); box-shadow: var(--ds-ring); }

/* ----------------------------- 徽章 ----------------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: var(--ds-border-w) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-3); color: var(--ds-text-2);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold);
  line-height: 1.4; white-space: nowrap; user-select: none;
}
.ds-badge--pill { border-radius: var(--ds-radius-full); }
.ds-badge--accent  { color: var(--ds-accent);  border-color: color-mix(in srgb, var(--ds-accent) 45%, transparent);  background: color-mix(in srgb, var(--ds-accent) 14%, transparent); }
.ds-badge--success { color: var(--ds-success); border-color: color-mix(in srgb, var(--ds-success) 45%, transparent); background: color-mix(in srgb, var(--ds-success) 14%, transparent); }
.ds-badge--warning { color: var(--ds-warning); border-color: color-mix(in srgb, var(--ds-warning) 45%, transparent); background: color-mix(in srgb, var(--ds-warning) 14%, transparent); }
.ds-badge--danger  { color: var(--ds-danger);  border-color: color-mix(in srgb, var(--ds-danger) 45%, transparent);  background: color-mix(in srgb, var(--ds-danger) 14%, transparent); }
.ds-badge--info    { color: var(--ds-info);    border-color: color-mix(in srgb, var(--ds-info) 45%, transparent);    background: color-mix(in srgb, var(--ds-info) 14%, transparent); }

/* ----------------------------- 模态 ----------------------------- */
.ds-modal-overlay {
  position: fixed; inset: 0; z-index: var(--ds-z-modal);
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-overlay); backdrop-filter: blur(var(--ds-overlay-blur));
}
.ds-modal {
  background: var(--ds-elevated);
  border: var(--ds-border-w) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-10);
  box-shadow: var(--ds-shadow-lg);
  max-width: min(92vw, 700px); max-height: 90vh; overflow-y: auto;
}
.ds-modal-ft { display: flex; justify-content: flex-end; gap: var(--ds-space-5); margin-top: var(--ds-space-10); }

/* ----------------------- 自定义右键菜单（ctx-menu.js） ----------------------- */
.ctxmenu {
  position: fixed; z-index: var(--ds-z-ctxmenu); min-width: 180px; padding: var(--ds-space-2);
  background: var(--ds-elevated); border: var(--ds-border-w) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg);
  font-size: var(--ds-fs-base); color: var(--ds-text); user-select: none;
  animation: ctxmenuIn .09s ease-out;
}
@keyframes ctxmenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ctxmenu-item {
  display: flex; align-items: center; gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-5); border-radius: var(--ds-radius-md);
  cursor: pointer; white-space: nowrap; color: var(--ds-text-2);
}
.ctxmenu-item:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.ctxmenu-item > i { font-size: var(--ds-fs-lg); width: 16px; text-align: center; flex-shrink: 0; }
.ctxmenu-item .ctxmenu-key { margin-left: auto; font-size: var(--ds-fs-xs); color: var(--ds-text-faint); }
.ctxmenu-item.danger { color: var(--ds-danger); }
.ctxmenu-item.danger:hover { background: color-mix(in srgb, var(--ds-danger) 16%, transparent); }
.ctxmenu-item.disabled { color: var(--ds-text-muted); cursor: default; font-weight: var(--ds-fw-semibold); }
.ctxmenu-item.disabled:hover { background: transparent; color: var(--ds-text-muted); }
.ctxmenu-sep { height: 1px; margin: var(--ds-space-2) var(--ds-space-3); background: var(--ds-border); }

/* ----------------------- 无障碍：减少动态 ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-card--interactive, .ds-input, .ds-textarea, .ds-select { transition: none; }
}