/**
 * vtwo 设计令牌（黑白灰正式主题）
 * 作用域：body.vtwo-page / .vtwo
 * 与 frontend/vtwo shadcn 语义变量对齐；旧蓝品牌色改为近黑主色。
 * 文档：docs/design/DESIGN.md
 */

body.vtwo-page,
body.vtwo-page .vtwo {
  /* Surfaces — 对应 --background / --card */
  --vtwo-bg: #ffffff;
  --vtwo-card: #ffffff;
  --vtwo-soft: #f5f5f5;
  --vtwo-ink: #171717;
  --vtwo-muted: #525252;
  --vtwo-line: #e5e5e5;

  /* Brand / focus — 近黑主色，不再使用旧蓝 #3369e7 */
  --vtwo-brand: #171717;
  --vtwo-brand-fg: #ffffff;
  --vtwo-focus: #525252;
  --vtwo-danger: #dc2626;
  --vtwo-input: #a3a3a3;

  /* shadcn 语义别名（旧模板可渐进引用） */
  --background: var(--vtwo-bg);
  --foreground: var(--vtwo-ink);
  --card: var(--vtwo-card);
  --card-foreground: var(--vtwo-ink);
  --primary: var(--vtwo-brand);
  --primary-foreground: var(--vtwo-brand-fg);
  --secondary: var(--vtwo-soft);
  --secondary-foreground: var(--vtwo-ink);
  --muted: var(--vtwo-soft);
  --muted-foreground: var(--vtwo-muted);
  --border: var(--vtwo-line);
  --input: var(--vtwo-input);
  --ring: var(--vtwo-focus);
  --destructive: var(--vtwo-danger);

  /* Layout */
  --vtwo-container-max: var(--yw-container-max, 1920px);
  --vtwo-pad-x: 48px;
  --vtwo-pad-x-lg: 32px;
  --vtwo-pad-x-md: 24px;
  --vtwo-pad-x-sm: 16px;
  --vtwo-gutter: 24px;
  --vtwo-gutter-sm: 16px;
  --vtwo-sidebar-w: 260px;

  /* Radius / type / elevation */
  --vtwo-radius-sm: 8px;
  --vtwo-radius: 12px;
  --vtwo-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --vtwo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --vtwo-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1199px) {
  body.vtwo-page {
    --vtwo-pad-x: var(--vtwo-pad-x-lg);
  }
}

@media (max-width: 991px) {
  body.vtwo-page {
    --vtwo-pad-x: var(--vtwo-pad-x-md);
    --vtwo-gutter: var(--vtwo-gutter-sm);
  }
}

@media (max-width: 767px) {
  body.vtwo-page {
    --vtwo-pad-x: var(--vtwo-pad-x-sm);
  }
}

/* Focus ring */
body.vtwo-page a:focus-visible,
body.vtwo-page button:focus-visible,
body.vtwo-page input:focus-visible,
body.vtwo-page .vtwo-tm-chip:focus-visible,
body.vtwo-page .vtwo-btn-primary:focus-visible {
  outline: 2px solid var(--vtwo-focus);
  outline-offset: 2px;
}

/* Primary button — 近黑底白字 */
body.vtwo-page .vtwo-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--vtwo-radius-sm);
  background: var(--vtwo-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.vtwo-page .vtwo-btn-primary:hover {
  background: #000;
}

/* 旧 .is-brand 与主按钮统一为近黑，避免残留蓝 */
body.vtwo-page .vtwo-btn-primary.is-brand {
  background: var(--vtwo-brand);
  color: var(--vtwo-brand-fg);
}

body.vtwo-page .vtwo-btn-primary.is-brand:hover {
  background: #000;
}

body.vtwo-page .vtwo-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--vtwo-line);
  border-radius: var(--vtwo-radius-sm);
  background: #fff;
  color: var(--vtwo-ink);
  font-size: 14px;
  cursor: pointer;
}

body.vtwo-page .vtwo-btn-ghost:hover {
  border-color: var(--vtwo-ink);
}

/* 内容链接：深色 + 下划线 */
body.vtwo-page .vtwo a.vtwo-link,
body.vtwo-page #vtwo-root a:not([class]) {
  color: var(--vtwo-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.vtwo-page *,
  body.vtwo-page *::before,
  body.vtwo-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}