/* =========================================================================
 * claude-design-system.css — Anthropic claude.ai 视觉语言 for TOPVOP
 *
 * 应用方式：
 *   <html data-theme="claude-light">  或  data-theme="claude-dark"
 *   <link rel="stylesheet" href="/static/claude-design-system.css">  AFTER 原 <style>
 *
 * 设计原则：
 *   1. 变量层覆盖 — 不动原 .card/.modal/.input-card 等 layout，只换色板/字号/阴影
 *   2. 暖色调 — bg=warm cream / accent=terracotta / 不用冷蓝
 *   3. 克制 — 阴影柔和、圆角稳重、边框纤细、间距宽裕
 *   4. light/dark 双模式 + prefers-color-scheme fallback
 *   5. 不引入 webfont (避免请求阻塞 / 离线场景)；用 system serif + Inter 系
 * ======================================================================== */

/* ---- Light mode (默认) ------------------------------------------------- */
:root,
:root[data-theme="claude-light"] {
  /* 基础色板 — 取自 claude.ai 暖米色调 */
  --bg:           #FAF9F5;   /* 主背景 warm cream */
  --surface:      #FFFFFF;   /* 卡片 / panel */
  --surface-2:    #F4F2EC;   /* 二级 panel / hover */
  --border:       #E8E4D9;   /* 纤细边框 */
  --border-strong:#D4CFBF;   /* 强调边框 */
  --text:         #1F1E1A;   /* 主文字 暖黑 */
  --text-strong:  #0F0E0B;
  --muted:        #6B6A65;   /* 辅文字 暖灰 */
  --muted-2:      #8C8A82;

  /* 品牌色 — Anthropic terracotta/clay */
  --accent:       #C96442;   /* 主 CTA */
  --accent-hover: #B5573A;
  --accent-fg:    #FFFFFF;   /* CTA 文字 */
  --accent-soft:  rgba(201,100,66,0.10);
  --accent-2:     #A08D6B;   /* 次品牌 暖 tan (替代原冷蓝) */

  /* 语义色 — 都是暖系 */
  --high:         #5A8A3A;   /* sage green 替代电子绿 */
  --high-soft:    rgba(90,138,58,0.12);
  --med:          #B58A35;   /* mustard */
  --med-soft:     rgba(181,138,53,0.12);
  --low:          #B0533D;   /* warm red */
  --low-soft:     rgba(176,83,61,0.12);

  /* 阴影层 — 柔和暖灰 */
  --shadow-sm:    0 1px 2px rgba(15,14,11,0.04), 0 1px 3px rgba(15,14,11,0.04);
  --shadow-md:    0 4px 14px rgba(15,14,11,0.06), 0 2px 4px rgba(15,14,11,0.04);
  --shadow-lg:    0 24px 48px rgba(15,14,11,0.10), 0 8px 16px rgba(15,14,11,0.06);

  /* 字体栈 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style",
                "STSong", "Songti SC", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", "JetBrains Mono",
               Consolas, monospace;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* 过渡 */
  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Dark mode (claude.ai 风暖暗) ------------------------------------- */
:root[data-theme="claude-dark"] {
  --bg:           #262624;   /* 暖暗 — 不是冷蓝灰 */
  --surface:      #30302E;
  --surface-2:    #3A3A37;
  --border:       #403F3B;
  --border-strong:#555550;
  --text:         #F4F3EE;
  --text-strong:  #FFFFFF;
  --muted:        #9A968A;
  --muted-2:      #777268;

  --accent:       #D97757;
  --accent-hover: #E18567;
  --accent-fg:    #1A0F08;
  --accent-soft:  rgba(217,119,87,0.16);
  --accent-2:     #C5A36A;

  --high:         #7AAD5A;
  --high-soft:    rgba(122,173,90,0.18);
  --med:          #D4A04E;
  --med-soft:     rgba(212,160,78,0.18);
  --low:          #D97757;
  --low-soft:     rgba(217,119,87,0.16);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg:    0 24px 48px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.30);
}

/* ---- 系统级偏好兜底 — 用户没显式 toggle 时跟系统 ----------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #262624;
    --surface:      #30302E;
    --surface-2:    #3A3A37;
    --border:       #403F3B;
    --border-strong:#555550;
    --text:         #F4F3EE;
    --text-strong:  #FFFFFF;
    --muted:        #9A968A;
    --muted-2:      #777268;
    --accent:       #D97757;
    --accent-hover: #E18567;
    --accent-fg:    #1A0F08;
    --accent-soft:  rgba(217,119,87,0.16);
    --accent-2:     #C5A36A;
    --high:         #7AAD5A;
    --high-soft:    rgba(122,173,90,0.18);
    --med:          #D4A04E;
    --med-soft:     rgba(212,160,78,0.18);
    --low:          #D97757;
    --low-soft:     rgba(217,119,87,0.16);
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.15);
    --shadow-md:    0 4px 14px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
    --shadow-lg:    0 24px 48px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.30);
  }
}

/* =========================================================================
 * Typography & body
 * ======================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.005em;
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition-base), color var(--transition-base);
}

/* h1 用衬线 — 给页面一个 "Anthropic 文档式" 的 intelligent feel */
.wrap > header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.wrap > header h1 .sub {
  font-family: var(--font-sans);
  color: var(--accent);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
}
.wrap > header p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Modal 标题也用衬线 */
.modal-title h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.modal-title h2 .zh {
  font-family: var(--font-sans);
  color: var(--accent);
  font-weight: 400;
}

/* Section 小标题 */
.modal-section h3 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Mono 字体统一 */
code, pre, .moment-prompt, .directive-emphasis,
.change-op, .change-payload {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* =========================================================================
 * Components — 在原 selector 基础上加 polish
 * ======================================================================== */

/* Cards & panels — 更柔的圆角 + 微阴影 */
.input-card,
.card,
.summary,
.active-director-banner,
.modal,
details.debug,
.apply-bar,
.apply-summary,
.runtime-payload {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.input-card { padding: 20px 22px; }
.card { padding: 18px 20px; }

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.card.top:hover, .card.runner-up:hover {
  box-shadow: var(--shadow-md);
}

/* Active director banner — 加阴影区分主路径 */
.active-director-banner {
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.active-director-banner .adb-check {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Modal — 大阴影 + 更圆润 */
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.modal-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 22px 26px 16px;
}
.modal-bg {
  background: rgba(15, 14, 11, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Buttons — primary CTA 用 terracotta */
button {
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 9px 16px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  border: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
}
button:hover {
  background: var(--accent-hover);
  filter: none; /* 覆盖原 brightness(1.1) */
  box-shadow: 0 2px 6px var(--accent-soft);
}
button:active { transform: translateY(0.5px); }
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 400;
}
button.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
  filter: none;
}

/* Inputs */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea {
  padding: 14px 16px;
  line-height: 1.65;
}
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Sample tags — 更柔的 chip */
.sample-tag {
  border: 1px solid var(--border);
  border-style: solid;  /* 覆盖原 dashed */
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  transition: all var(--transition-fast);
}
.sample-tag:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Confidence pills — 暖色重制 */
.conf-badge { font-weight: 500; padding: 3px 10px; }
.conf-high { background: var(--high-soft); color: var(--high); }
.conf-med  { background: var(--med-soft);  color: var(--med); }
.conf-low  { background: var(--low-soft);  color: var(--low); }
.conf-na   { background: var(--surface-2); color: var(--muted); }

/* Pills (modal) */
.pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}

/* Card "推荐"/"备选" badges — 更精致 */
.card.top::before,
.card.runner-up::before {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.card.top::before { background: var(--accent); color: var(--accent-fg); }
.card.runner-up::before { background: var(--accent-2); color: var(--accent-fg); }
.card.top { border-color: var(--accent); }
.card.runner-up { border-color: var(--accent-2); }

/* Empty state */
.empty {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
}

/* Footer — 轻 */
.footer { border-top: 1px solid var(--border); color: var(--muted-2); }
.footer code {
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Scrollbars — 暖灰，跟主题协调 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* =========================================================================
 * Theme toggle button — 头部右上角
 * ======================================================================== */
.cds-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.cds-theme-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.cds-theme-toggle .cds-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* =========================================================================
 * Misc fix-ups for hardcoded inline-hex colors that escape var() theming
 * (在 light mode 下的少量补丁 — dark mode 直接走原值就 OK)
 * ======================================================================== */
:root[data-theme="claude-light"] {
  /* 给 light mode 一些选择性深色 → 浅色映射 */
  color-scheme: light;
}
:root[data-theme="claude-dark"],
:root:not([data-theme]) {
  color-scheme: dark;
}

/* AntD-like dashed-border alignment for cards in light mode */
:root[data-theme="claude-light"] .films { border-top-style: solid; border-top-color: var(--border); }
:root[data-theme="claude-light"] .moment-prompt,
:root[data-theme="claude-light"] .directive-emphasis,
:root[data-theme="claude-light"] .change-payload {
  border-style: solid;
  background: var(--surface-2);
}

/* =========================================================================
 * Selection highlight
 * ======================================================================== */
::selection {
  background: var(--accent-soft);
  color: var(--text-strong);
}
