/* ============================================================
   万川官网 · 设计底座
   ------------------------------------------------------------
   配色从品牌标识「月印万川」长出来，不是挑的：
     夜空 #1e40af → #15277a → #0a1442   （web/src/components/brand-mark.tsx 的渐变）
     月   #fef3c7 / #fcd9a0

   ★ 为什么主色取 #1e40af 而不是 web 端的 #2563eb：
     #2563eb 是 tailwind blue-600，公司另一个产品 lili 的官网用的就是它。
     两个站撞主色，客户会以为是同一个产品的两个页面。往品牌标识的深蓝走，
     既拉开距离，又是从自己的资产里长出来的。

   ★ 暖金是这套配色的关键。一整页蓝是所有 B2B SaaS 的样子；
     「月印万川」自带一个暖色，拿它做 CTA 与数据高亮，一眼就能认出来。

   ★ 字体自托管并按用字裁剪，见 css/fonts.css 与 tools/subset_fonts.py。
   ============================================================ */

:root {
  /* ── 夜空 ── */
  --ink-950: #0a1442;
  --ink-900: #101c4d;
  --ink-850: #15277a;
  --ink-800: #1a3491;
  --ink-700: #1e40af;   /* 主色 */
  --ink-600: #2551c4;
  --ink-500: #3b6fe0;

  /* ── 月 ── */
  --moon-50:  #fffdf5;
  --moon-100: #fef8e4;
  --moon-200: #fef3c7;
  --moon-300: #fcd9a0;
  --moon-400: #f2b45f;  /* 强调：CTA 下划线、数据高亮 */
  --moon-500: #d99429;

  /* ── 中性 ── */
  --slate-25:  #fcfdfe;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --red-500: #dc2626;
  --green-500: #059669;

  /* ── 语义 ── */
  --bg:          #ffffff;
  --bg-subtle:   var(--slate-50);
  --bg-sunken:   var(--slate-100);
  --bg-card:     #ffffff;
  --bg-inverse:  var(--ink-950);

  --text:        var(--slate-900);
  --text-soft:   var(--slate-600);
  --text-muted:  var(--slate-500);
  --text-onDark:      #eef2ff;
  --text-onDark-soft: #b9c4ee;

  --border:       var(--slate-200);
  --border-soft:  var(--slate-100);
  --border-onDark: rgba(190, 205, 255, 0.16);

  --accent:       var(--ink-700);
  --accent-hover: var(--ink-800);
  --highlight:    var(--moon-400);

  --success-bg:   #eef6ec;
  --success-text: #2f6b21;
  --warning-bg:   #fdf5e4;
  --warning-text: #8a6116;
  --danger-bg:    #fbeded;
  --danger-text:  #a33c3c;

  --card-hover-border: var(--slate-300);
  --tag-moon-bg: var(--moon-100);
  --tag-moon-text: var(--moon-500);
  --tag-moon-border: var(--moon-200);
  --tag-ink-bg: rgba(30,64,175,.08);
  --tag-ink-text: var(--ink-700);
  --tag-ink-border: rgba(30,64,175,.16);

  /* ── 尺度 ── */
  --container: 1160px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 4px 16px -4px rgba(15, 23, 42, .09), 0 2px 6px -2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 24px 56px -20px rgba(10, 20, 66, .22), 0 8px 20px -12px rgba(10, 20, 66, .14);

  /* ★ 顺序即分工：Geist 只有拉丁字形，汉字会自然穿透到 Noto Sans SC。
     两者都拿不到时才落系统字体（苹方 / 微软雅黑）——那是降级，不是设计。
     字体声明在 fonts.css，它必须排在 base.css 之前加载。 */
  --font-sans: "Geist", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* 深夜模式。
   页头的内联启动脚本会在首屏绘制前解析本地偏好或系统主题，并给 html 写入
   data-theme。脚本被禁用时，下面的媒体查询仍保证默认跟随系统。 */
:root[data-theme="dark"] {
    --bg:        #0b1020;
    --bg-subtle: #101731;
    --bg-sunken: #141c3a;
    --bg-card:   #131b36;

    --text:      #e8ecfb;
    --text-soft: #a9b4d8;
    --text-muted:#8390b8;

    --border:      rgba(168, 184, 235, .14);
    --border-soft: rgba(168, 184, 235, .08);

    --accent:       #6f97f0;
    --accent-hover: #8fb0f7;
    --green-500:    #52cda1;

    --success-bg:   rgba(5, 150, 105, .12);
    --success-text: #7ed9b9;
    --warning-bg:   rgba(242, 180, 95, .10);
    --warning-text: #efca87;
    --danger-bg:    rgba(220, 38, 38, .10);
    --danger-text:  #f0a0a0;

    --card-hover-border: rgba(168,184,235,.28);
    --tag-moon-bg: rgba(242,180,95,.12);
    --tag-moon-text: var(--moon-300);
    --tag-moon-border: rgba(242,180,95,.24);
    --tag-ink-bg: rgba(111,151,240,.14);
    --tag-ink-text: #9db6f5;
    --tag-ink-border: rgba(111,151,240,.26);

    --shadow:    0 4px 16px -4px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b1020;
    --bg-subtle: #101731;
    --bg-sunken: #141c3a;
    --bg-card: #131b36;
    --text: #e8ecfb;
    --text-soft: #a9b4d8;
    --text-muted: #8390b8;
    --border: rgba(168, 184, 235, .14);
    --border-soft: rgba(168, 184, 235, .08);
    --accent: #6f97f0;
    --accent-hover: #8fb0f7;
    --green-500: #52cda1;
    --success-bg: rgba(5, 150, 105, .12);
    --success-text: #7ed9b9;
    --warning-bg: rgba(242, 180, 95, .10);
    --warning-text: #efca87;
    --danger-bg: rgba(220, 38, 38, .10);
    --danger-text: #f0a0a0;
    --card-hover-border: rgba(168,184,235,.28);
    --tag-moon-bg: rgba(242,180,95,.12);
    --tag-moon-text: var(--moon-300);
    --tag-moon-border: rgba(242,180,95,.24);
    --tag-ink-bg: rgba(111,151,240,.14);
    --tag-ink-text: #9db6f5;
    --tag-ink-border: rgba(111,151,240,.26);
    --shadow: 0 4px 16px -4px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .65);
  }
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 中英混排时数字用等宽变体，表格与数据条不会跳动 */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }  /* 字距与行高在 fonts.css 统一调 */
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 布局原语 ── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }
.section--subtle { background: var(--bg-subtle); }
.section--dark {
  background: var(--bg-inverse);
  color: var(--text-onDark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 720px; margin: 0 0 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: var(--highlight);
}
.section--dark .eyebrow { color: var(--moon-300); }

.section-title { font-size: clamp(28px, 3.6vw, 42px); }
.section-lede {
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--text-soft);
}
.section--dark .section-lede { color: var(--text-onDark-soft); }

/* ── 按钮 ──
   ★ 主按钮用暖金而不是主色蓝：整页蓝底上一个蓝按钮会沉进背景里。
     暖金既是品牌色，又是页面上唯一的暖色，天然把视线拉过去。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn-primary {
  background: var(--ink-700); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(30, 64, 175, .5);
}
.btn-primary:hover { background: var(--ink-800); transform: translateY(-1px); }

.btn-moon {
  background: linear-gradient(135deg, var(--moon-300), var(--moon-400));
  color: var(--ink-950);
  box-shadow: 0 8px 24px -8px rgba(242, 180, 95, .6);
}
.btn-moon:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(242, 180, 95, .72); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { color: var(--text); background: var(--bg-sunken); }

.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-onDark {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.btn-onDark:hover { background: rgba(255,255,255,.15); }

.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }

/* ── 卡片 ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--card-hover-border); box-shadow: var(--shadow); }

/* ── 表格 ──
   横向溢出必须在自己的容器里滚，页面 body 永远不横向滚动。 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table th, .data-table td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 15px; line-height: 1.6;
}
.data-table thead th {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-bottom-width: 2px;
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── 标记 ──
   🔴 徽章内部文字永远不折行（CLAUDE.md 前端红线）。
      空间不够就加宽容器或缩短文案，绝不靠折行省空间。 */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; flex-shrink: 0;
  background: var(--bg-sunken); color: var(--text-soft);
  border: 1px solid var(--border);
}
.tag--moon { background: var(--tag-moon-bg); color: var(--tag-moon-text); border-color: var(--tag-moon-border); }
.tag--ink  { background: var(--tag-ink-bg); color: var(--tag-ink-text); border-color: var(--tag-ink-border); }
.tag--onDark { background: rgba(255,255,255,.09); color: var(--moon-200); border-color: rgba(255,255,255,.16); }

/* ── 脚注 ──
   ★ 这个站上每个数字都带条件，脚注是常驻组件不是补丁。
     带条件的数字比不带条件的更可信——这是设计决定，不是免责声明。 */
.footnote {
  margin-top: 18px;
  font-size: 13px; line-height: 1.7;
  color: var(--text-muted);
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.section--dark .footnote { color: var(--text-onDark-soft); border-left-color: var(--border-onDark); }

.mono { font-family: var(--font-mono); font-size: .92em; }

/* ── 网格 ── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .section { padding: 68px 0; }
  .section--tight { padding: 52px 0; }
  .section-head { margin-bottom: 40px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 24px; }

  /* 手机上不让数据表变成「只看得见第一列」的横向截图。
     表头保留给读屏器，可见行由 data-label 重复列名；中英文都由
     同一个 i18n key 生成，不另维护一份移动端文案。 */
  .table-scroll--cards { overflow: visible; border: 0; background: transparent; }
  .data-table--cards { display: block; width: 100%; min-width: 0; }
  .data-table--cards thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .data-table--cards tbody { display: grid; gap: 12px; }
  .data-table--cards tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
  }
  .data-table--cards td {
    display: grid;
    grid-template-columns: minmax(72px, .32fr) minmax(0, 1fr);
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .data-table--cards td:last-child { border-bottom: 0; }
  .data-table--cards td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
  }
  .data-table--cards td:first-child {
    color: var(--text);
    background: var(--bg-subtle);
    font-weight: 600;
  }
}
@media (max-width: 360px) {
  :root { --gutter: 18px; }
}