/**
 * 未来智驾 - 跟随系统双色板
 * Bootstrap 5.3 data-bs-theme="auto"（html 上由 color-mode JS 切换 light/dark）
 * 本文件用 CSS 变量定义两套色板，全部颜色通过变量引用
 *
 * 配色依据（2026-08-04 研究整理）：
 *  - 浅色板：米白底 #FAF8F5（反射率≈45% 接近纸张，避免纯白眩光）+ 深灰字 #323232（优于纯黑），
 *    正极性对比度长文阅读科学最优（NN/g / Human Factors）
 *  - 暗色板：中性暖灰 #1A1A1A（去蓝化，避免全站蓝系）+ 近白字 #D9D9D9（白0.85，降光刺激）
 *  - 全部正文/次级文字对比度 ≥4.5:1（WCAG AA），正文达 AAA
 */

/* ═══════════════════════════════════
   浅色板（默认 / prefers light）
   ═══════════════════════════════════ */
:root {
  --bg-body: #FAF8F5;          /* 米白页面背景 */
  --bg-elevated: #FFFFFF;      /* 卡片 */
  --bg-hover: #F0EDE8;         /* 卡片 hover */
  --bg-nav: rgba(250, 248, 245, 0.85);
  --border: #E3DED5;
  --border-hover: #C9C2B5;
  --radius: 10px;
  --font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', sans-serif;

  --text-primary: #323232;     /* 正文 12.1:1 */
  --text-secondary: #5A5A5A;   /* 次级 6.5:1 */
  --text-muted: #6E6E6E;       /* 弱文字 4.8:1 */
  --text-heading: #1A1A1A;     /* H1/H2 16.4:1 */
  --text-h3: #2C3E50;          /* H3 深蓝灰 10.4:1 */
  --text-strong: #1A1A1A;      /* 加粗 */

  --accent: #1A6FB5;           /* 品牌深蓝 5.0:1 */
  --accent-dim: rgba(26, 111, 181, 0.10);
  --accent-border: rgba(26, 111, 181, 0.30);
  --link-hover: #155A8A;

  --cover-gradient: linear-gradient(135deg, #E8EDF2 0%, #DDE4EB 100%);
  --cover-day: #1A1A1A;
  --cover-month: #6E6E6E;
  --hero-gradient: linear-gradient(135deg, #17395C 20%, #1A6FB5 60%, #155A8A 100%);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);

  --badge-daily-bg: rgba(26, 111, 181, 0.10);   --badge-daily-fg: #155A8A;   --badge-daily-border: rgba(26, 111, 181, 0.30);
  --badge-weekly-bg: rgba(22, 122, 76, 0.10);   --badge-weekly-fg: #167A4C;  --badge-weekly-border: rgba(22, 122, 76, 0.30);
  --badge-deep-bg: rgba(154, 107, 0, 0.10);     --badge-deep-fg: #9A6B00;    --badge-deep-border: rgba(154, 107, 0, 0.30);

  --toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --nav-link-hover-bg: rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════
   暗色板（prefers dark）
   ═══════════════════════════════════ */
[data-bs-theme="dark"] {
  --bg-body: #1A1A1A;          /* 中性暖灰（去蓝） */
  --bg-elevated: #222222;
  --bg-hover: #2A2A2A;
  --bg-nav: rgba(26, 26, 26, 0.85);
  --border: #3A3A3A;
  --border-hover: #4A4A4A;

  --text-primary: #D9D9D9;     /* 正文 白0.85 12.3:1 */
  --text-secondary: #A0A0A0;   /* 6.7:1 */
  --text-muted: #949494;       /* 5.7:1 */
  --text-heading: #F2EFEA;     /* 暖白 15.2:1 */
  --text-h3: #C9C2B8;          /* 暖白 9.9:1 */
  --text-strong: #F2EFEA;

  --accent: #7ABFFF;           /* 柔和蓝 8.9:1 */
  --accent-dim: rgba(122, 191, 255, 0.12);
  --accent-border: rgba(122, 191, 255, 0.30);
  --link-hover: #9AC9FF;

  --cover-gradient: linear-gradient(135deg, #2A2A2A 0%, #222222 100%);
  --cover-day: #F2EFEA;
  --cover-month: #A0A0A0;
  --hero-gradient: linear-gradient(135deg, #E6ECF3 20%, #7DB9F0 60%, #8B9CF7 100%);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.35);

  --badge-daily-bg: rgba(122, 191, 255, 0.12);  --badge-daily-fg: #6DB9FF;  --badge-daily-border: rgba(122, 191, 255, 0.25);
  --badge-weekly-bg: rgba(88, 212, 160, 0.12);  --badge-weekly-fg: #58D4A0; --badge-weekly-border: rgba(88, 212, 160, 0.25);
  --badge-deep-bg: rgba(232, 183, 48, 0.12);    --badge-deep-fg: #E8B730;   --badge-deep-border: rgba(232, 183, 48, 0.25);

  --toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --nav-link-hover-bg: rgba(255, 255, 255, 0.05);
}

/* 纯 CSS 兜底：无 JS 时也跟随系统暗色（CDN 失败降级保护） */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --bg-body: #1A1A1A;
    --bg-elevated: #222222;
    --bg-hover: #2A2A2A;
    --bg-nav: rgba(26, 26, 26, 0.85);
    --border: #3A3A3A;
    --border-hover: #4A4A4A;

    --text-primary: #D9D9D9;
    --text-secondary: #A0A0A0;
    --text-muted: #949494;
    --text-heading: #F2EFEA;
    --text-h3: #C9C2B8;
    --text-strong: #F2EFEA;

    --accent: #7ABFFF;
    --accent-dim: rgba(122, 191, 255, 0.12);
    --accent-border: rgba(122, 191, 255, 0.30);
    --link-hover: #9AC9FF;

    --cover-gradient: linear-gradient(135deg, #2A2A2A 0%, #222222 100%);
    --cover-day: #F2EFEA;
    --cover-month: #A0A0A0;
    --hero-gradient: linear-gradient(135deg, #E6ECF3 20%, #7DB9F0 60%, #8B9CF7 100%);
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.35);

    --badge-daily-bg: rgba(122, 191, 255, 0.12);  --badge-daily-fg: #6DB9FF;  --badge-daily-border: rgba(122, 191, 255, 0.25);
    --badge-weekly-bg: rgba(88, 212, 160, 0.12);  --badge-weekly-fg: #58D4A0; --badge-weekly-border: rgba(88, 212, 160, 0.25);
    --badge-deep-bg: rgba(232, 183, 48, 0.12);    --badge-deep-fg: #E8B730;   --badge-deep-border: rgba(232, 183, 48, 0.25);

    --toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --nav-link-hover-bg: rgba(255, 255, 255, 0.05);
  }
}

/* ═══════════════════════════════════
   基础
   ═══════════════════════════════════ */
body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { transition: color 0.15s; color: var(--accent); }
a:hover { color: var(--link-hover); }

/* ── 导航栏 ── */
.navbar {
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0;
}
.navbar-brand {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  color: var(--text-heading);
}
.navbar-nav .nav-link {
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem !important;
  border-radius: 6px;
  transition: all 0.15s;
  color: var(--text-secondary);
}
.navbar-nav .nav-link:hover { background: var(--nav-link-hover-bg); color: var(--text-heading); }
.navbar-nav .nav-link.active { color: var(--accent); }

.navbar-toggler-icon {
  background-image: var(--toggler-icon);
}
.navbar-toggler { border-color: var(--border); }

/* ── Hero ── */
.hero {
  padding: 3rem 0 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.hero .subtitle {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: 1px;
  background: var(--hero-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 2rem;
}
.hero-stat .number {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.hero-stat .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── 文章卡片 ── */
.article-card {
  display: flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
.article-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  box-shadow: var(--shadow);
}

.card-cover-img {
  display: block;
  flex-shrink: 0;
  width: 200px;
  min-height: 112px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--cover-gradient);
}
.card-cover-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.article-card:hover .card-cover-img img {
  transform: scale(1.05);
}

.card-main {
  flex: 1;
  padding: 1.4rem 1.6rem;
}

.article-card .meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.article-card .date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.article-card h2 {
  font-size: 1.08rem;
  font-weight: 620;
  line-height: 1.45;
  margin: 0 0 0.5rem;
}
.article-card h2 a {
  color: var(--text-heading);
  text-decoration: none;
  transition: color 0.15s;
}
.article-card h2 a:hover { color: var(--accent); }

.article-card .digest {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── 标签 ── */
.badge-daily  { background: var(--badge-daily-bg); color: var(--badge-daily-fg); border: 1px solid var(--badge-daily-border); }
.badge-weekly { background: var(--badge-weekly-bg); color: var(--badge-weekly-fg); border: 1px solid var(--badge-weekly-border); }
.badge-deep   { background: var(--badge-deep-bg); color: var(--badge-deep-fg); border: 1px solid var(--badge-deep-border); }

/* ── 详情页 ── */
article > header {
  margin-bottom: 1.5rem;
}
article > header h1 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 1px;
  margin: 32px 0 12px;
  color: var(--text-heading);
}
article > header .meta-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── 文章正文（2026-08-04 与公众号模板同标准）──
 * 对齐参考文章: https://mp.weixin.qq.com/s/dq3HScyeMr1Vsokzm7lN0g
 * 16px / 行高 1.6 / 字距 0.034em / 段间距 24px
 * 层级：正文16 < H3 17 < H2 19 < H1 21 */
.article-body {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.034em;
  color: var(--text-primary);
}

/* H2: 板块标题 19px 加粗 行高1.5 */
.article-body h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  margin: 1.75rem 0 0.625rem;
  color: var(--text-heading);
}
.article-body h2:first-of-type {
  margin-top: 0;
}

/* H2→H3 间距 12px */
.article-body h2 + h3 { margin-top: 0.75rem; }

/* H3: 新闻标题 17px 加粗 行高1.6 */
.article-body h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--text-h3);
  margin: 1.375rem 0 0.5rem;
}

/* 日报 H3: 与周报/深度统一 17px（保证层级：正文16 < H3 17 < H2 19） */
.article-body.page-daily h3 {
  font-size: 1.0625rem;
}

.article-body p { margin-bottom: 1.5rem; }
.article-body strong { font-weight: 650; color: var(--text-strong); }
.article-body ol, .article-body ul { padding-left: 1.8rem; margin-bottom: 1.5rem; }
.article-body li { margin-bottom: 0.35rem; }

/* 信源：14px 行高1.6 */
.article-body h2:last-of-type ~ p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.article-body blockquote {
  border-left: 3px solid var(--border-hover);
  padding: 0.6rem 1.1rem;
  margin: 1.2rem 0;
  font-style: italic;
  color: var(--text-secondary);
}

/* ── 上下篇 ── */
.article-nav {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}
.article-nav a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.article-nav a:hover { color: var(--accent); }

/* ── 分类页 ── */
.category-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-heading);
}
.category-header .count {
  color: var(--text-muted);
  font-weight: 400;
}

/* ── 面包屑 ── */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li.active { color: var(--text-muted); }
.breadcrumb li + li::before {
  content: '/';
  color: var(--text-muted);
  margin: 0 0.5rem;
}

/* ── 分页 ── */
.pagination .page-link {
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border);
}
.pagination .page-link:hover { color: var(--accent); }
.pagination .active .page-link {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── 页脚 ── */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.84rem;
}
footer a { color: var(--text-secondary); text-decoration: none; }
footer a:hover { color: var(--text-heading); }

/* ── 响应式 ── */
@media (max-width: 768px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero .subtitle { font-size: 1.2rem; }
  .hero-stats { gap: 1.8rem; }
  .hero-stat .number { font-size: 1.3rem; }
  .article-card { padding: 1.2rem 1.3rem; }
  .article-card h2 { font-size: 1rem; }
  .card-cover-img { width: 140px; min-height: 79px; }
  article > header h1 { font-size: 1.3125rem; }
  .article-body h2 { font-size: 1.1875rem; }
  .article-body h3 { font-size: 1.0625rem; }
  .article-body.page-daily h3 { font-size: 1.0625rem; }
  .article-body { font-size: 1rem; }
}