/* ============================================================================
   MotherDuck-inspired visual system
   依据 .claude/skills/motherduck-design.md：暖米色背景、深灰文字、2px 几何边框、天蓝 CTA、Mono 标题体系
   ============================================================================ */

:root {
  --color-bg: #F4EFEA;
  --color-surface: #FFF9F2;
  --color-surface-2: #EFE6DC;
  --color-text: #383838;
  --color-text-soft: #5F5A55;
  --color-muted: #8A8178;
  --color-border: #383838;
  --color-accent: #97D4FF;
  --color-accent-strong: #58B7F6;
  --color-success: #B8E986;
  --color-warning: #FFD166;
  --color-danger: #FF8A7A;
  --border-medium: 2px solid var(--color-border);
  --shadow-offset: 7px 7px 0 #383838;
  --shadow-offset-sm: 4px 4px 0 #383838;
  --radius-reset: 0px;

  /* 兼容原页面变量 */
  --bg: var(--color-bg);
  --bg-soft: var(--color-surface-2);
  --bg-card: var(--color-surface);
  --bg-card-hover: #FFFFFF;
  --border: var(--color-border);
  --border-soft: var(--color-border);
  --text: var(--color-text);
  --text-soft: var(--color-text-soft);
  --text-mute: var(--color-muted);
  --primary: var(--color-accent-strong);
  --primary-2: #383838;
  --accent: var(--color-accent);
  --green: var(--color-success);
  --yellow: var(--color-warning);
  --red: var(--color-danger);
  --code-bg: #252525;
  --radius: var(--radius-reset);
  --radius-sm: var(--radius-reset);
  --shadow: var(--shadow-offset);
  --grad-1: linear-gradient(135deg, #97D4FF 0%, #CDEEFF 100%);
  --grad-2: linear-gradient(135deg, rgba(151, 212, 255, 0.55), rgba(255, 249, 242, 0.85));
  --grad-card: #FFF9F2;
}

/* 基础气质：从暗色科技风改为暖米色几何工作台 */
html,
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
body::before {
  background:
    linear-gradient(90deg, rgba(56,56,56,0.045) 1px, transparent 1px),
    linear-gradient(rgba(56,56,56,0.045) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: 1 !important;
}
::selection {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* Mono 用于标题、导航、按钮、指标、徽标 */
h1,
h2,
h3,
h4,
.logo,
.logo-mark,
.nav-menu a,
.nav-cta,
.btn,
.section-tag,
.stat-num,
.stat-label,
.cat-card .count,
.article-meta,
.article-foot,
.tool-pill,
.badge,
.sidebar h3,
.toc a,
th,
.copy-btn,
.tag,
.cmd-card .key,
footer,
.foot-col h4 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  letter-spacing: -0.02em;
}

/* 导航：硬边框、无玻璃拟态 */
.nav {
  background: var(--color-bg) !important;
  border-bottom: var(--border-medium) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.logo-mark {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset-sm) !important;
}
.nav-menu a,
.foot-col a,
footer a,
section a {
  color: var(--color-text) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.nav-menu a::after {
  background: var(--color-text) !important;
  height: 2px !important;
}
.nav-cta,
.btn-primary,
.subscribe-form button {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset-sm) !important;
  transform: none !important;
}
.nav-cta:hover,
.btn-primary:hover,
.subscribe-form button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 9px 9px 0 #383838 !important;
}
.btn-ghost {
  background: var(--color-surface) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}
.btn-ghost:hover {
  background: var(--color-accent) !important;
}

/* Hero：几何工作台布局 */
.hero {
  background: transparent !important;
}
.hero-eyebrow,
.badge,
.tag {
  background: var(--color-accent) !important;
  border: var(--border-medium) !important;
  color: var(--color-text) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #383838 !important;
  text-transform: uppercase;
}
.hero-eyebrow::before {
  background: var(--color-text) !important;
  box-shadow: none !important;
}
.hero h1,
header.hero h1 {
  color: var(--color-text) !important;
  text-transform: none;
}
.hero h1 .grad {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--color-text) !important;
  text-decoration: underline;
  text-decoration-thickness: 8px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: -2px;
}
.hero p,
.hero p.lead,
header.hero p,
section p,
section ul,
section ol,
.article-card p,
.cat-card p,
.subscribe p,
.foot-brand p {
  color: var(--color-text-soft) !important;
}
.hero-stats {
  border-top: var(--border-medium) !important;
}
.stat-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--color-text) !important;
}
.stat-label {
  color: var(--color-muted) !important;
  text-transform: uppercase;
}
.hero-visual {
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset) !important;
  background: var(--color-surface) !important;
}
.hero-visual::after {
  background: linear-gradient(180deg, transparent 60%, rgba(244,239,234,0.35) 100%) !important;
}
.hero-visual .float-card {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset-sm) !important;
  backdrop-filter: none !important;
}
.fc-icon,
.cat-icon {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
}

/* Section 和卡片 */
.section-tag {
  color: var(--color-text) !important;
  background: var(--color-accent) !important;
  border: var(--border-medium) !important;
  padding: 4px 10px;
  display: inline-block;
  box-shadow: 3px 3px 0 #383838;
}
.section-head h2 {
  color: var(--color-text) !important;
}
.cat-card,
.article-card,
.tools-wrap,
.subscribe,
section,
.sidebar,
header.hero,
details,
.cmd-card {
  background: var(--color-surface) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset) !important;
}
.cat-card:hover,
.article-card:hover,
.tool-pill:hover,
.cmd-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 10px 10px 0 #383838 !important;
  border-color: var(--color-border) !important;
  background: #FFFFFF !important;
}
.cat-card::before {
  height: 8px !important;
  background: var(--color-accent) !important;
  opacity: 1 !important;
  border-bottom: var(--border-medium);
}
.cat-card h3,
.article-card h3,
section h2,
section h3,
section h4 {
  color: var(--color-text) !important;
}
.article-cover {
  color: var(--color-text) !important;
  border-bottom: var(--border-medium) !important;
  background: var(--color-accent) !important;
  text-shadow: none !important;
}
.article-cover.cv1,
.article-cover.cv2,
.article-cover.cv3,
.article-cover.cv4,
.article-cover.cv5,
.article-cover.cv6 {
  background: var(--color-accent) !important;
}
.article-cover::after {
  background:
    linear-gradient(90deg, rgba(56,56,56,0.09) 1px, transparent 1px),
    linear-gradient(rgba(56,56,56,0.09) 1px, transparent 1px) !important;
  background-size: 18px 18px !important;
}
.article-foot {
  border-top: var(--border-medium) !important;
  color: var(--color-muted) !important;
}
.article-foot .read-more {
  color: var(--color-text) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.tool-pill {
  background: var(--color-surface) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}
.tool-pill .name {
  color: var(--color-text) !important;
}
.tool-pill .type {
  color: var(--color-muted) !important;
}
.tools-wrap::before {
  background: var(--color-accent) !important;
  width: 180px !important;
  height: 180px !important;
  top: -50px !important;
  right: -50px !important;
  border: var(--border-medium) !important;
  border-radius: 50% !important;
  opacity: .45;
}

/* 表单 */
.subscribe-form input {
  background: var(--color-surface) !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}
.subscribe-form input:focus {
  outline: 3px solid var(--color-accent) !important;
  border-color: var(--color-border) !important;
}
.subscribe-form input::placeholder {
  color: var(--color-muted) !important;
}

/* 文档页目录、代码、表格 */
.layout {
  background: transparent !important;
}
.sidebar {
  padding: 0 !important;
  overflow: hidden !important;
}
.sidebar h3 {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--color-accent) !important;
  border-bottom: var(--border-medium) !important;
  font-size: 15px !important;
  letter-spacing: -0.03em !important;
}
.toc {
  padding: 10px !important;
  max-height: calc(100vh - 108px) !important;
  overflow-y: auto !important;
}
.toc a {
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 40px !important;
  margin-bottom: 6px !important;
  padding: 6px 8px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 2px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  line-height: 1.35 !important;
  font-size: 13px !important;
  letter-spacing: -0.03em !important;
}
.toc a::before {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 26px !important;
  margin: 0 !important;
  background: var(--color-surface-2) !important;
  border: var(--border-medium) !important;
  color: var(--color-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.toc a:hover {
  background: #FFFFFF !important;
  border-color: var(--color-border) !important;
  box-shadow: 3px 3px 0 #383838 !important;
}
.toc a.active {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: 4px 4px 0 #383838 !important;
  font-weight: 700 !important;
}
.toc a.active::before {
  background: var(--color-text) !important;
  color: var(--color-surface) !important;
}
section h2 {
  border-bottom: var(--border-medium) !important;
}
section h2::before {
  display: none !important;
}
code {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
pre {
  background: #252525 !important;
  color: #F4EFEA !important;
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-offset-sm) !important;
}
pre code {
  background: transparent !important;
  color: #F4EFEA !important;
  border: none !important;
}
pre::before {
  color: #F4EFEA !important;
}
.copy-btn {
  background: var(--color-accent) !important;
  border: var(--border-medium) !important;
  color: var(--color-text) !important;
  border-radius: 0 !important;
}
.copy-btn:hover,
.copy-btn.copied {
  background: var(--color-success) !important;
  color: var(--color-text) !important;
}
table {
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
}
thead {
  background: var(--color-accent) !important;
}
th,
td {
  border-bottom: var(--border-medium) !important;
}
th {
  color: var(--color-text) !important;
}
tbody tr:hover {
  background: rgba(151,212,255,0.24) !important;
}
.tip,
.warn,
.note {
  border: var(--border-medium) !important;
  border-left: 10px solid var(--color-border) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
}
.warn { background: #FFF1BF !important; }
.tip { background: #DDF6C6 !important; }
.note { background: #D9F0FF !important; }

/* Footer */
footer,
footer.foot {
  background: var(--color-surface-2) !important;
  border-top: var(--border-medium) !important;
  color: var(--color-text-soft) !important;
}
.foot-bottom {
  border-top: var(--border-medium) !important;
  color: var(--color-text-soft) !important;
}
.social-icon {
  border: var(--border-medium) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}
.social-icon:hover {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* 移动端菜单修正 */
@media (max-width: 920px) {
  .toc {
    max-height: none !important;
  }
}
@media (max-width: 720px) {
  .nav-menu {
    background: var(--color-bg) !important;
    border-bottom: var(--border-medium) !important;
  }
}