/* ==================== 21st.dev Style Theme Override ==================== */
/* 仅在暗色主题下生效，覆盖原有变量为 shadcn/ui 中性深色基调 */

[data-theme="dark"] {
  --bg-page: #161625;
  /* 主色调 - 更克制的蓝紫 */
  --primary: #818CF8;
  --primary-light: #A5B4FC;
  --primary-dark: #6366F1;
  --primary-gradient: linear-gradient(135deg, #818CF8, #A78BFA);
  --primary-glow: rgba(129, 140, 248, 0.15);

  /* 中性色 - 21st.dev 标志性深灰黑 */
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --text-placeholder: #52525B;
  --border: #27272A;
  --border-light: #1E1E22;

  /* 阴影 - 更柔和、更大扩散 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-hover: 0 12px 48px rgba(129, 140, 248, 0.12), 0 4px 16px rgba(0, 0, 0, 0.4);

  /* 圆角 - 统一加大 */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* 全局字体优化 - 21st.dev 使用 Inter 风格 */
[data-theme="dark"] body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* 卡片精致边框光晕效果 */
[data-theme="dark"] .info-card,
[data-theme="dark"] .site-card,
[data-theme="dark"] .quick-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .admin-card {
  border: 1px solid var(--border);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

[data-theme="dark"] .info-card:hover,
[data-theme="dark"] .site-card:hover,
[data-theme="dark"] .quick-card:hover {
  border-color: rgba(129, 140, 248, 0.3);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 导航栏底部微光线 */
[data-theme="dark"] .navbar {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* 搜索框聚焦光晕 */
[data-theme="dark"] .search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

/* 按钮悬停微光 */
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-tool-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* 分割线更细腻 */
[data-theme="dark"] hr,
[data-theme="dark"] .section-title::after {
  border-color: var(--border);
}