/* ============================================================
 * §H77.BH v2 (5/11 23:30 · 13号) · AIMJ 系统统一 font tokens · 仅字体/字号/字色 (撤 bg/card/border)
 *
 * 起因: super 5/11 23:25 拍 · 撤 bg/卡片色改动(主题不改) · 仅字体/字号/字色按豆包统一
 *       wizard 主题颜色跟 AIMJ 系统统一(不要自动变浅色)→ wizard.js theme key 改 'aimj_theme' 已 ship
 * 治: 仅 alias 字体 + 字号 + 字色 token · 撤 bg/card/border alias · 0 影响主题色
 *
 * load 顺序: 必最末 · cascade 接管字体相关 var · 主题色由现有 brand_tokens.css / wizard.css 控制
 * ============================================================ */

/* ========================================================
 * 字体 design tokens · 豆包风
 * 深主题 + 浅主题字色双套(沿 [data-theme="light"] 切换)
 * ======================================================== */
:root {
  /* === 字号 (豆包 14px base · 1.55 line-height) === */
  --aimj-font-base: 14px;
  --aimj-font-sm: 12px;
  --aimj-font-xs: 11px;
  --aimj-font-lg: 16px;
  --aimj-font-h3: 18px;
  --aimj-font-h2: 22px;
  --aimj-font-h1: 28px;
  --aimj-font-display: 36px;

  --aimj-line-height-base: 1.55;
  --aimj-line-height-tight: 1.35;
  --aimj-line-height-loose: 1.75;

  /* === 字体栈 (豆包字体优先序) === */
  --aimj-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  --aimj-font-mono: 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* === 字色 · 深主题 default (豆包白字 + 透明分级) === */
  --aimj-text-primary: #ffffff;
  --aimj-text-secondary: rgba(255, 255, 255, 0.72);
  --aimj-text-tertiary: rgba(255, 255, 255, 0.55);
  --aimj-text-muted: rgba(255, 255, 255, 0.42);
  --aimj-text-disabled: rgba(255, 255, 255, 0.28);
  --aimj-link: #3b82f6;

  /* ========================================================
   * Alias redirect · 老字色 var → 新 aimj 豆包字色
   * 仅字色 alias · 0 alias bg/card/border (super 拍主题不改)
   * ======================================================== */

  /* duanju_factory.css 老 var · 仅字色相关 */
  --df-ink: var(--aimj-text-primary);
  --df-muted: var(--aimj-text-muted);
  --df-fg: var(--aimj-text-primary);

  /* _v10_brand_tokens.css / style.css 老 var · 仅字色相关 */
  --text-primary: var(--aimj-text-primary);
  --text-secondary: var(--aimj-text-secondary);
  --text-muted: var(--aimj-text-muted);
  --text-disabled: var(--aimj-text-disabled);

  /* wizard.css 老 var · 仅字色相关 */
  --wz-text: var(--aimj-text-primary);
  --wz-text-muted: var(--aimj-text-muted);
}

/* ========================================================
 * 浅主题字色 · body[data-theme="light"]
 * 沿现有 brand_tokens.css [data-theme="light"] 设计 · 仅 override 字色 · 0 动 bg/card
 * ======================================================== */
body[data-theme="light"] {
  --aimj-text-primary: #111827;
  --aimj-text-secondary: rgba(15, 23, 42, 0.66);
  --aimj-text-tertiary: rgba(15, 23, 42, 0.52);
  --aimj-text-muted: rgba(15, 23, 42, 0.42);
  --aimj-text-disabled: rgba(15, 23, 42, 0.28);
  /* alias 自动跟 :root 同名 · 上面 :root alias 自动指向新切的值 */
}

/* ========================================================
 * 全局 base styling · 仅字体相关 · 0 改 bg / 主题色
 * super 5/11 拍主题先不改 · 只统一字体/字号/字色
 * ======================================================== */
body {
  font-family: var(--aimj-font-family);
  font-size: var(--aimj-font-base);
  line-height: var(--aimj-line-height-base);
  /* 0 设 background · 让现有 brand_tokens / wizard.css 控制主题色 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题统一豆包字号 · default 值 · 现有 page hardcode 时仍 win */
h1 { font-size: var(--aimj-font-h1); font-weight: 600; line-height: var(--aimj-line-height-tight); }
h2 { font-size: var(--aimj-font-h2); font-weight: 600; line-height: var(--aimj-line-height-tight); }
h3 { font-size: var(--aimj-font-h3); font-weight: 600; line-height: var(--aimj-line-height-tight); }
h4 { font-size: var(--aimj-font-lg); font-weight: 600; }

/* tabular numerals · 数字 / 百分比统一 */
.aimj-tabular,
[data-tabular] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * §H77.BJ v1 (5/27 02:30 · BUG3 件 1 · demo v3 落地阶段 0)
 *
 * 起因: super 5/27 拍 demo v3 落地 OK · 派 13号 重做分镜 UI 前 BUG3 先 ship 设计令牌系统
 * spec: docs/spec/PLAN_BOARD_UI_REDESIGN_V3_LANDING.md §4
 * 治: 加 5 套缺的 token (spacing/radius/shadow/accent/fn-color) + .btn-aimj-* 统一按钮 + 跟随系统双主题
 * 0 改 UI 视觉 · 0 改现有页面 · 仅给 13号 件 2-6 重做时调用
 * ============================================================ */

:root {
  /* === 1. 间距 (8 倍数 · 复用 Tailwind 心智模型) === */
  --aimj-space-1: 4px;
  --aimj-space-2: 8px;
  --aimj-space-3: 12px;
  --aimj-space-4: 16px;
  --aimj-space-5: 20px;
  --aimj-space-6: 24px;
  --aimj-space-8: 32px;
  --aimj-space-10: 40px;
  --aimj-space-12: 48px;
  --aimj-space-16: 64px;

  /* === 2. 圆角 === */
  --aimj-radius-xs: 4px;
  --aimj-radius-sm: 6px;
  --aimj-radius-md: 8px;
  --aimj-radius-lg: 12px;
  --aimj-radius-xl: 16px;
  --aimj-radius-2xl: 20px;
  --aimj-radius-full: 999px;

  /* === 3. 阴影 (深主题 default · 暗底用低不透明) === */
  --aimj-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --aimj-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.28);
  --aimj-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.32);
  --aimj-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.36);
  --aimj-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4);
  --aimj-shadow-focus: 0 0 0 3px rgba(14, 159, 142, 0.32);

  /* === 4. 强调色 (语义) === */
  --aimj-color-primary: #0e9f8e;
  --aimj-color-primary-hover: #14b8a5;
  --aimj-color-primary-soft: rgba(14, 159, 142, 0.15);
  --aimj-color-primary-on: #ffffff;

  --aimj-color-success: #3dd68c;
  --aimj-color-success-soft: rgba(61, 214, 140, 0.15);
  --aimj-color-warning: #ff9f1c;
  --aimj-color-warning-soft: rgba(255, 159, 28, 0.15);
  --aimj-color-danger: #ff4d4f;
  --aimj-color-danger-soft: rgba(255, 77, 79, 0.15);
  --aimj-color-info: #4a9eff;
  --aimj-color-info-soft: rgba(74, 158, 255, 0.15);
  --aimj-color-purple: #9c6ef0;
  --aimj-color-purple-soft: rgba(156, 110, 240, 0.15);

  /* === 5. shot_function 6 色 (526 标准专用 · 跟 demo v3 一致) === */
  --aimj-fn-hook: #ff4d4f;
  --aimj-fn-ots: #0e9f8e;
  --aimj-fn-reverse: #ff9f1c;
  --aimj-fn-reaction: #4a9eff;
  --aimj-fn-climax: #3dd68c;
  --aimj-fn-cliff: #9c6ef0;
  --aimj-fn-establishing: #6b7280;
  --aimj-fn-dialogue: #a3a3a3;

  /* === 6. surface / border (深主题 default · 仅命名供 13号 件 2-6 用 · 不改现有页) === */
  --aimj-surface-1: #1a1a1f;
  --aimj-surface-2: #22222a;
  --aimj-surface-3: #2c2c36;
  --aimj-surface-hover: rgba(255, 255, 255, 0.06);
  --aimj-border-1: rgba(255, 255, 255, 0.08);
  --aimj-border-2: rgba(255, 255, 255, 0.14);
  --aimj-border-strong: rgba(255, 255, 255, 0.22);

  /* === 7. 动效 timing === */
  --aimj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aimj-duration-fast: 120ms;
  --aimj-duration-base: 200ms;
  --aimj-duration-slow: 320ms;
}

/* ========================================================
 * 跟随系统双主题 · prefers-color-scheme media query
 * 用户没显式设 data-theme 时 · CSS var 自动跟系统切
 * 显式 body[data-theme="..."] 优先级高于 media query
 * ======================================================== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --aimj-text-primary: #111827;
    --aimj-text-secondary: rgba(15, 23, 42, 0.66);
    --aimj-text-tertiary: rgba(15, 23, 42, 0.52);
    --aimj-text-muted: rgba(15, 23, 42, 0.42);
    --aimj-text-disabled: rgba(15, 23, 42, 0.28);

    --aimj-surface-1: #ffffff;
    --aimj-surface-2: #f7f8fa;
    --aimj-surface-3: #eef0f4;
    --aimj-surface-hover: rgba(0, 0, 0, 0.04);
    --aimj-border-1: rgba(0, 0, 0, 0.08);
    --aimj-border-2: rgba(0, 0, 0, 0.14);
    --aimj-border-strong: rgba(0, 0, 0, 0.22);

    --aimj-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --aimj-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --aimj-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --aimj-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
    --aimj-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
  }
}

/* 用户显式选浅色 · 覆盖系统 */
body[data-theme="light"] {
  --aimj-surface-1: #ffffff;
  --aimj-surface-2: #f7f8fa;
  --aimj-surface-3: #eef0f4;
  --aimj-surface-hover: rgba(0, 0, 0, 0.04);
  --aimj-border-1: rgba(0, 0, 0, 0.08);
  --aimj-border-2: rgba(0, 0, 0, 0.14);
  --aimj-border-strong: rgba(0, 0, 0, 0.22);

  --aimj-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --aimj-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --aimj-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --aimj-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
  --aimj-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* ========================================================
 * .btn-aimj-* 统一按钮系统 (13号 件 2-6 重做时调用)
 * 0 影响现有 .btn / .pl-btn 等 · 完全新命名空间
 * ======================================================== */
.btn-aimj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aimj-space-2);
  padding: var(--aimj-space-2) var(--aimj-space-4);
  border-radius: var(--aimj-radius-md);
  font-family: inherit;
  font-size: var(--aimj-font-sm);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
  color: var(--aimj-text-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--aimj-duration-fast) var(--aimj-ease-out),
              border-color var(--aimj-duration-fast) var(--aimj-ease-out),
              color var(--aimj-duration-fast) var(--aimj-ease-out),
              box-shadow var(--aimj-duration-fast) var(--aimj-ease-out);
}
.btn-aimj:focus-visible {
  outline: none;
  box-shadow: var(--aimj-shadow-focus);
}
.btn-aimj:disabled,
.btn-aimj[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-aimj-primary {
  background: var(--aimj-color-primary);
  color: var(--aimj-color-primary-on);
}
.btn-aimj-primary:hover:not(:disabled) {
  background: var(--aimj-color-primary-hover);
}

.btn-aimj-secondary {
  background: var(--aimj-surface-2);
  border-color: var(--aimj-border-2);
  color: var(--aimj-text-primary);
}
.btn-aimj-secondary:hover:not(:disabled) {
  background: var(--aimj-surface-3);
  border-color: var(--aimj-border-strong);
}

.btn-aimj-ghost {
  background: transparent;
  color: var(--aimj-text-secondary);
}
.btn-aimj-ghost:hover:not(:disabled) {
  background: var(--aimj-surface-hover);
  color: var(--aimj-text-primary);
}

.btn-aimj-danger {
  background: var(--aimj-color-danger);
  color: #ffffff;
}
.btn-aimj-danger:hover:not(:disabled) {
  background: #e63a3c;
}

.btn-aimj-soft-primary {
  background: var(--aimj-color-primary-soft);
  color: var(--aimj-color-primary);
}
.btn-aimj-soft-primary:hover:not(:disabled) {
  background: rgba(14, 159, 142, 0.22);
}

/* 尺寸变体 */
.btn-aimj-xs {
  padding: var(--aimj-space-1) var(--aimj-space-2);
  font-size: var(--aimj-font-xs);
  border-radius: var(--aimj-radius-sm);
}
.btn-aimj-sm {
  padding: var(--aimj-space-1) var(--aimj-space-3);
  font-size: var(--aimj-font-xs);
}
.btn-aimj-lg {
  padding: var(--aimj-space-3) var(--aimj-space-5);
  font-size: var(--aimj-font-base);
  border-radius: var(--aimj-radius-lg);
}
.btn-aimj-icon {
  padding: var(--aimj-space-2);
  border-radius: var(--aimj-radius-md);
}

/* ========================================================
 * 按钮完整状态机 (super 5/27 拍补 · 0 漏)
 * 8 态: idle / hover / active / focus / loading / disabled / success / error
 * 全 .btn-aimj 默支持 :hover / :active / :focus-visible / :disabled
 * loading / success / error 用 data-state 属性切
 * ======================================================== */
.btn-aimj:active:not(:disabled) {
  transform: translateY(1px);
}

/* loading 态: 显 spinner · 禁点击 · 文字保留半透明 */
.btn-aimj[data-state="loading"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn-aimj[data-state="loading"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--aimj-color-primary-on);
  animation: btn-aimj-spin 0.7s linear infinite;
}
.btn-aimj-secondary[data-state="loading"]::after,
.btn-aimj-ghost[data-state="loading"]::after {
  color: var(--aimj-color-primary);
}
@keyframes btn-aimj-spin {
  to { transform: rotate(360deg); }
}

/* success 态: 短暂绿色 · ~1.6s 后切回 idle (JS 控) */
.btn-aimj[data-state="success"] {
  background: var(--aimj-color-success) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  pointer-events: none;
}

/* error 态: 短暂红色 · ~2s 后切回 idle (JS 控) */
.btn-aimj[data-state="error"] {
  background: var(--aimj-color-danger) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* progress 态: 用 ::before 渲染填充条 (生首帧 / 生视频长任务) · style="--btn-progress:60%" */
.btn-aimj[data-state="progress"] {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.btn-aimj[data-state="progress"]::before {
  content: "";
  position: absolute; inset: 0;
  width: var(--btn-progress, 0%);
  background: linear-gradient(90deg, var(--aimj-color-primary-soft), rgba(255,255,255,0.08));
  transition: width var(--aimj-duration-slow) var(--aimj-ease-out);
  pointer-events: none;
}

/* ========================================================
 * 主题切换 button 三态 (system / dark / light)
 * 13号 件 2-6 wire 到顶部工具栏 · 调 window.aimjCycleTheme()
 * ======================================================== */