/* Art design tokens — ported from client/src/style.css */

/* 小程序里 min-height:100% 常失效，用 100vh 铺满视口；底色走 --art-bg，避免硬编码浅色闪屏 */
page {
  min-height: 100vh;
  background-color: rgb(var(--art-bg));
}

page,
.page-root {
  --art-bg: 250, 248, 244;
  --art-surface: 255, 255, 255;
  --art-border: rgba(0, 0, 0, 0.08);
  --art-text: 23, 23, 23;
  --art-muted: 107, 107, 107;
  --art-accent: 212, 179, 131;
  --art-error: 239, 68, 68;
  --art-admin-bg: 10, 10, 10;
  --art-admin-card: 18, 18, 20;
  --art-admin-hover: 26, 26, 28;
  --art-nav-bg: rgba(250, 248, 244, 0.9);
  --art-card-bg: rgba(255, 255, 255, 0.55);
  --art-card-border: rgba(0, 0, 0, 0.07);
  --art-hover-border: rgba(212, 179, 131, 0.55);
  --art-shadow: 0 18px 40px -12px rgba(80, 55, 20, 0.14);
  --art-overlay: rgba(0, 0, 0, 0.45);
  background-color: rgb(var(--art-bg));
  color: rgb(var(--art-text));
  font-family: 'Noto Sans SC', 'PingFang SC', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
}

.page-root.theme-dark,
.theme-dark {
  --art-bg: 5, 5, 5;
  --art-surface: 18, 18, 20;
  --art-border: rgba(255, 255, 255, 0.08);
  --art-text: 236, 236, 236;
  --art-muted: 136, 136, 136;
  --art-accent: 212, 179, 131;
  --art-nav-bg: rgba(5, 5, 5, 0.85);
  --art-card-bg: rgba(255, 255, 255, 0.02);
  --art-card-border: rgba(255, 255, 255, 0.06);
  --art-hover-border: rgba(212, 179, 131, 0.3);
  --art-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  --art-overlay: rgba(0, 0, 0, 0.9);
  background-color: rgb(var(--art-bg));
  color: rgb(var(--art-text));
}

.page-root.admin-mode,
.admin-mode {
  --art-bg: 10, 10, 10;
  --art-surface: 18, 18, 20;
  --art-text: 236, 236, 236;
  --art-muted: 136, 136, 136;
  background-color: rgb(var(--art-admin-bg));
}

.glass-nav {
  background: var(--art-nav-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--art-card-border);
}

.art-card {
  background: var(--art-card-bg);
  border: 1px solid var(--art-card-border);
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.art-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 179, 131, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.art-card-press:active {
  transform: translateY(-8rpx);
  border-color: var(--art-hover-border);
  box-shadow: var(--art-shadow);
}

.art-card-press:active::before {
  opacity: 1;
}

.admin-card {
  background: rgb(var(--art-admin-card));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16rpx;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.admin-card:active {
  background: rgb(var(--art-admin-hover));
  border-color: rgba(212, 179, 131, 0.25);
}

.text-art-accent { color: rgb(var(--art-accent)); }
.text-art-muted { color: rgb(var(--art-muted)); }
.text-art-text { color: rgb(var(--art-text)); }

.font-serif-italic {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-style: italic;
}

.font-mono-label {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 22rpx;
}

.page-pad { padding: 32rpx 32rpx 200rpx; }
.page-pad-tab { padding-bottom: 200rpx; }

.section-title {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-style: italic;
  font-size: 48rpx;
  color: rgb(var(--art-text));
}

.hero-eyebrow {
  color: rgb(var(--art-accent));
  font-family: 'JetBrains Mono', monospace;
  font-size: 22rpx;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24rpx;
}

@keyframes art-reveal {
  from { opacity: 0; transform: translateY(24rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-reveal {
  animation: art-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-reveal-delay {
  animation: art-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.fab-float {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fab-float:active {
  transform: scale(0.92);
}

/* Article markdown (mp-html / rich content) */
.article-md {
  font-size: 30rpx;
  line-height: 1.85;
  color: rgb(var(--art-text));
  word-break: break-word;
}
.article-md h1, .article-md h2, .article-md h3 {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  margin: 1.2em 0 0.5em;
  line-height: 1.35;
}
.article-md h1 { font-size: 44rpx; }
.article-md h2 { font-size: 38rpx; }
.article-md h3 { font-size: 34rpx; }
.article-md p { margin: 0.75em 0; }
.article-md a { color: rgb(var(--art-accent)); text-decoration: underline; }
.article-md blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 6rpx solid rgb(var(--art-accent));
  color: rgb(var(--art-muted));
  background: rgba(212, 179, 131, 0.08);
}
.article-md ul, .article-md ol { padding-left: 1.4em; margin: 0.75em 0; }
.article-md img { max-width: 100%; border-radius: 12rpx; margin: 0.75em 0; }
.article-md code {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.88em;
  background: rgba(127, 127, 127, 0.12);
  padding: 0.1em 0.35em;
  border-radius: 6rpx;
}
.article-md pre {
  background: #1e1e1e;
  color: #e8e8e8;
  padding: 24rpx;
  border-radius: 16rpx;
  overflow-x: auto;
  margin: 1em 0;
  font-size: 24rpx;
  line-height: 1.6;
}
.article-md pre code { background: transparent; padding: 0; color: inherit; }
.article-md table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 26rpx; }
.article-md th, .article-md td { border: 1px solid var(--art-border); padding: 12rpx; }

/* wot-ui 深浅色兜底：避免默认浅色组件压在 art 深色底上 */
.page-root,
.theme-dark {
  --wot-navbar-color: rgb(var(--art-text));
  --wot-navbar-desc-color: rgb(var(--art-text));
  --wot-navbar-bg: rgb(var(--art-bg));
}

/* C 端暗色：输入保持轻量透明，贴合卡片氛围 */
.theme-dark:not(.admin-mode) .wd-input,
.page-root.theme-dark:not(.admin-mode) .wd-input {
  --wot-input-bg: transparent;
  --wot-color-bg: rgb(var(--art-surface));
  --wot-input-inner-color: rgb(var(--art-text));
  --wot-input-inner-placeholder-color: rgb(var(--art-muted));
  color: rgb(var(--art-text));
}

.theme-dark:not(.admin-mode) .wd-input__inner,
.page-root.theme-dark:not(.admin-mode) .wd-input__inner {
  color: rgb(var(--art-text)) !important;
}

.theme-dark:not(.admin-mode) .wd-textarea,
.page-root.theme-dark:not(.admin-mode) .wd-textarea {
  --wot-textarea-bg: transparent;
  --wot-textarea-inner-color: rgb(var(--art-text));
  --wot-textarea-inner-placeholder-color: rgb(var(--art-muted));
}

.theme-dark .wd-cell,
.page-root.theme-dark .wd-cell {
  --wot-cell-bg: rgb(var(--art-surface));
  --wot-cell-title-color: rgb(var(--art-text));
  --wot-cell-value-color: rgb(var(--art-muted));
  --wot-cell-label-color: rgb(var(--art-muted));
}

/* 后台表单：可见底色 + 边框，避免与 admin-card 融成一片 */
.admin-mode .admin-card.form-card,
.page-root.admin-mode .admin-card.form-card {
  padding: 24rpx;
}

.admin-mode .wd-input,
.page-root.admin-mode .wd-input,
.admin-mode .form-card .wd-input,
.page-root.admin-mode .form-card .wd-input {
  --wot-input-bg: rgba(255, 255, 255, 0.06);
  --wot-input-inner-color: rgb(var(--art-text));
  --wot-input-inner-placeholder-color: rgb(var(--art-muted));
  --wot-color-bg: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  padding: 4rpx 8rpx;
  box-sizing: border-box;
  color: rgb(var(--art-text));
}

.admin-mode .wd-input__inner,
.page-root.admin-mode .wd-input__inner {
  color: rgb(var(--art-text)) !important;
}

.admin-mode .wd-textarea,
.page-root.admin-mode .wd-textarea,
.admin-mode .form-card .wd-textarea,
.page-root.admin-mode .form-card .wd-textarea {
  --wot-textarea-bg: rgba(255, 255, 255, 0.06);
  --wot-textarea-inner-color: rgb(var(--art-text));
  --wot-textarea-inner-placeholder-color: rgb(var(--art-muted));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  padding: 8rpx;
  box-sizing: border-box;
  color: rgb(var(--art-text));
}

.admin-mode .admin-card {
  border-color: rgba(255, 255, 255, 0.1);
}

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 8rpx;
}

.admin-form-field__label {
  font-size: 24rpx;
  color: rgb(var(--art-muted));
  letter-spacing: 0.04em;
}

/* ActionSheet / Popup：暗色下避免默认白底 */
.theme-dark,
.page-root.theme-dark {
  --wot-action-sheet-bg: rgb(var(--art-surface));
  --wot-action-sheet-color: rgb(var(--art-text));
  --wot-action-sheet-cancel-color: rgb(var(--art-muted));
  --wot-popup-bg: rgb(var(--art-surface));
  --wot-color-bg: rgb(var(--art-surface));
  --wot-color-title: rgb(var(--art-text));
  --wot-color-content: rgb(var(--art-text));
  --wot-color-secondary: rgb(var(--art-muted));
  --wot-color-border: var(--art-border);
}
