/* ================================================================
 *  THEME WARM — 暖色主题覆写
 *  参考配色：唐晶博客 · 米白/铜色/暖褐 调色盘
 *
 *  设计语言：
 *    - 底色 #faf8f5（暖米白）取代 #f6f6f8（冷灰）
 *    - 强调色 #c08b6c（铜色）注入温暖感
 *    - 文字 #2a2520（暖深褐）取代 #1e293b（冷灰蓝）
 *    - 衬线体 Noto Serif SC 用于正文，Inter 用于 UI
 *
 *  安装：在 head-base.html 的 transitions.css 之后加载此文件
 * ================================================================
 *  覆盖策略：CSS 变量 + 类选择器 + 必要 !important
 *  不变：不修改任何 Nunjucks 模板、JS、构建逻辑
 * ================================================================ */

/* =================================================================
   0. 自定义属性 / 色彩令牌
   ================================================================= */
:root {
  --warm-bg: #faf8f5;
  --warm-surface: #ffffff;
  --warm-sidebar: #f5f2ee;
  --warm-card: #ffffff;
  --warm-btn: #f5ebe3;
  --warm-btn-hover: #ede0d6;
  --warm-text: #2a2520;
  --warm-text-muted: #7a7068;
  --warm-text-light: #a0897e;
  --warm-accent: #c08b6c;
  --warm-accent-light: #f5ebe3;
  --warm-accent-deep: #a0694a;
  --warm-border: #e2ddd6;
  --warm-border-light: #ece8e2;
  --warm-shadow: rgba(192, 139, 108, 0.12);
  --warm-font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', 'Georgia', serif;
  --warm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --warm-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --warm-code-bg: #f7f5f0;
  --warm-code-border: #e8e2da;
}

/* 深色模式：温暖暗色 */
.dark {
  --warm-bg: #1a1714;
  --warm-surface: #221f1c;
  --warm-sidebar: #1e1b18;
  --warm-card: #25211e;
  --warm-btn: #2d2925;
  --warm-btn-hover: #36322d;
  --warm-text: #d4cdc4;
  --warm-text-muted: #a69a8e;
  --warm-text-light: #7a7068;
  --warm-accent: #c99a7a;
  --warm-accent-light: #2d2520;
  --warm-accent-deep: #d4a88a;
  --warm-border: #3a3530;
  --warm-border-light: #2e2a26;
  --warm-shadow: rgba(0, 0, 0, 0.25);
  --warm-code-bg: #1e1b18;
  --warm-code-border: #2e2a26;
}

/* =================================================================
   1. 基础页面背景 & 文字
   ================================================================= */
html,
body {
  background-color: var(--warm-bg) !important;
  color: var(--warm-text) !important;
  font-family: var(--warm-font-sans);
}

html.dark,
html.dark body {
  background-color: var(--warm-bg) !important;
}

/* 所有导入的 Google Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =================================================================
   2. 顶栏 Header
   ================================================================= */
header,
header.fixed,
[class*="header"] {
  background-color: rgba(250, 248, 245, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom-color: var(--warm-border) !important;
}

.dark header,
.dark header.fixed {
  background-color: rgba(26, 23, 20, 0.88) !important;
  border-bottom-color: var(--warm-border) !important;
}

/* header 内的全局文字 */
header *,
header.fixed * {
  color: var(--warm-text) !important;
}

header .text-slate-500,
header .text-gray-500,
header .text-gray-700,
header .text-[#616f89] {
  color: var(--warm-text-muted) !important;
}

.dark header .text-slate-500,
.dark header .text-gray-500,
.dark header .text-gray-700 {
  color: var(--warm-text-muted) !important;
}

/* header 按钮背景 */
header [class*="bg-"]:not(.bg-white):not(.bg-transparent),
header button,
header .t-btn-icon {
  background-color: var(--warm-btn) !important;
  border-color: var(--warm-border) !important;
}

.dark header [class*="bg-"]:not(.bg-transparent),
.dark header button,
.dark header .t-btn-icon {
  background-color: var(--warm-btn) !important;
  border-color: var(--warm-border) !important;
}

/* header 内的 SVG 图标颜色 */
header svg,
header .icon-breathe {
  color: var(--warm-text-muted) !important;
  fill: var(--warm-text-muted) !important;
}

/* header logo / 站点名 */
header h2,
header .font-bold {
  color: var(--warm-accent-deep) !important;
  font-family: var(--warm-font-serif);
  font-weight: 700 !important;
}

/* header 链接 (Home, About, View All) */
header a[href="/"],
header a[href*="about"],
header a[href*="all"] {
  color: var(--warm-text-muted) !important;
  transition: color 0.15s ease;
}

header a[href="/"]:hover,
header a[href*="about"]:hover,
header a[href*="all"]:hover {
  color: var(--warm-accent) !important;
}

/* =================================================================
   3. 首页 Hero / Sidebar
   ================================================================= */
.freecat-home-stage,
[class*="home-stage"] {
  background: var(--warm-bg) !important;
}

.freecat-home-sidebar,
[class*="home-sidebar"]:not([class*="inner"]) {
  background: var(--warm-sidebar) !important;
}

.freecat-home-posts {
  background: var(--warm-bg) !important;
}

/* hero 头像 */
.freecat-hero-avatar {
  background-color: color-mix(in srgb, white 82%, var(--warm-sidebar)) !important;
}

/* Hero title */
.freecat-home-sidebar-hero-text h1,
.freecat-home-sidebar-hero-text h2 {
  text-align: left;
}

.freecat-home-sidebar-hero-text h1 {
  color: var(--warm-accent-deep) !important;
  font-family: var(--warm-font-serif);
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.freecat-home-sidebar-hero-text h2 {
  color: var(--warm-text-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* =================================================================
   4. 文章卡片（首页右侧文章列表）
   ================================================================= */
.post-card {
  background: var(--warm-card) !important;
  border-color: var(--warm-border) !important;
  border-radius: 12px !important;
  transition: box-shadow 0.26s ease, border-color 0.26s ease !important;
  box-shadow: 0 1px 4px var(--warm-shadow) !important;
}

.post-card:hover {
  border-color: var(--warm-accent-light) !important;
  box-shadow: 0 4px 16px var(--warm-shadow) !important;
}

.post-card .post-card-title,
.post-card h3,
.post-card h2 {
  color: var(--warm-text) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  font-family: var(--warm-font-serif);
}

.post-card .post-card-excerpt,
.post-card p {
  color: var(--warm-text-muted) !important;
  line-height: 1.6 !important;
}

.post-card .post-card-date,
.post-card .post-card-meta,
.post-card time {
  color: var(--warm-text-light) !important;
  font-size: 0.82rem !important;
}

/* 文章卡片标签 */
.post-card .tag,
.post-card [class*="tag"] {
  background: var(--warm-accent-light) !important;
  color: var(--warm-accent-deep) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
}

/* =================================================================
   5. 文章详情页（template_post.html）
   ================================================================= */

/* 文章主体区域 */
[class*="page-blur-target"],
main,
article {
  background: transparent !important;
}

/* 文章标题 */
.post-title,
article h1:first-of-type {
  color: var(--warm-accent-deep) !important;
  font-family: var(--warm-font-serif);
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

/* 文章元信息（日期、最后编辑） */
article header .text-slate-500,
article header time,
article header span {
  color: var(--warm-text-muted) !important;
}

/* 文章分隔线 */
article header [class*="bg-slate-200"],
article header [class*="rounded-full"] {
  background-color: var(--warm-border) !important;
}

/* 文章正文 - 使用衬线体 */
article .prose,
article [class*="prose"] {
  font-family: var(--warm-font-serif) !important;
  color: var(--warm-text) !important;
}

article .prose p,
article .prose li,
article .prose td,
article .prose th,
article .prose blockquote {
  color: var(--warm-text) !important;
}

article .prose h1,
article .prose h2,
article .prose h3,
article .prose h4 {
  font-family: var(--warm-font-sans) !important;
  color: var(--warm-text) !important;
}

.dark article .prose h1,
.dark article .prose h2,
.dark article .prose h3,
.dark article .prose h4 {
  color: var(--warm-text) !important;
}

/* 引用块 */
article .prose blockquote {
  border-left-color: var(--warm-accent) !important;
  background-color: var(--warm-accent-light) !important;
  color: var(--warm-text-muted) !important;
}

.dark article .prose blockquote {
  background-color: var(--warm-accent-light) !important;
  border-left-color: var(--warm-accent-deep) !important;
  color: var(--warm-text) !important;
}

/* 代码块 - 暖色表面 */
article .prose .code-block-container {
  --code-surface: var(--warm-code-bg) !important;
  --code-surface-soft: var(--warm-code-bg) !important;
  --code-border: var(--warm-code-border) !important;
  --code-rule: var(--warm-code-border) !important;
}

/* 行内代码 */
article .prose :not(pre) > code {
  background-color: var(--warm-accent-light) !important;
  color: var(--warm-accent-deep) !important;
  border-color: var(--warm-border) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-family: var(--warm-font-mono);
}

/* 表格 */
article .prose th,
article .prose td {
  border-color: var(--warm-border) !important;
}

article .prose th {
  background-color: var(--warm-sidebar) !important;
  color: var(--warm-text) !important;
  font-weight: 600 !important;
}

/* 链接 */
article .prose a {
  color: var(--warm-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(192, 139, 108, 0.3) !important;
  transition: text-decoration-color 0.15s ease !important;
}

article .prose a:hover {
  text-decoration-color: var(--warm-accent) !important;
  opacity: 1 !important;
}

/* 分割线 */
article .prose hr {
  border-color: var(--warm-border) !important;
}

/* =================================================================
   6. "Go Back" 返回按钮
   ================================================================= */
a[data-go-back],
article a[data-go-back] {
  color: var(--warm-accent) !important;
}

a[data-go-back]:hover,
article a[data-go-back]:hover {
  color: var(--warm-accent-deep) !important;
}

a[data-go-back] svg {
  fill: var(--warm-accent) !important;
}

/* =================================================================
   7. 文章标签（post 页面上方）
   ================================================================= */
article header .tag,
article header [class*="tag"] {
  background-color: var(--warm-accent-light) !important;
  color: var(--warm-accent-deep) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  border: 1px solid var(--warm-border) !important;
  font-weight: 500 !important;
}

/* =================================================================
   8. 目录 TOC 面板
   ================================================================= */
.freecat-post-toc-panel h3 {
  color: var(--warm-accent-deep) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem !important;
}

.freecat-post-toc-panel nav a,
.freecat-post-toc-panel [class*="toc"] a {
  color: var(--warm-text-muted) !important;
  border-left-color: var(--warm-border) !important;
  transition: color 0.12s ease !important;
  text-decoration: none !important;
}

.freecat-post-toc-panel nav a:hover,
.freecat-post-toc-panel [class*="toc"] a:hover {
  color: var(--warm-accent) !important;
}

.freecat-post-toc-panel nav {
  border-left-color: var(--warm-border) !important;
}

/* =================================================================
   9. 页脚 Footer
   ================================================================= */
footer,
footer.page-blur-target,
[class*="footer"] {
  background-color: var(--warm-surface) !important;
  border-top-color: var(--warm-border) !important;
}

footer p,
footer [class*="text-"] {
  color: var(--warm-text) !important;
}

footer p:last-child,
footer .text-[#616f89],
footer .text-gray-500 {
  color: var(--warm-text-muted) !important;
}

.dark footer,
.dark footer.page-blur-target {
  background-color: var(--warm-surface) !important;
  border-top-color: var(--warm-border) !important;
}

/* =================================================================
   10. 分页器 Pagination
   ================================================================= */
#pagination-buttons a,
#pagination-buttons button,
.pagination a,
.pagination button {
  background-color: var(--warm-btn) !important;
  border-color: var(--warm-border) !important;
  color: var(--warm-text) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

#pagination-buttons a:hover,
#pagination-buttons button:hover {
  background-color: var(--warm-accent-light) !important;
  border-color: var(--warm-accent) !important;
  color: var(--warm-accent-deep) !important;
}

#pagination-buttons .current,
#pagination-buttons [aria-current="page"] {
  background-color: var(--warm-accent) !important;
  border-color: var(--warm-accent) !important;
  color: #ffffff !important;
}

/* =================================================================
   11. About 页面
   ================================================================= */

/* =================================================================
   12. 搜索遮罩 & 结果面板
   ================================================================= */
body.search-active .page-blur-target::before {
  background: radial-gradient(
    ellipse at center,
    rgba(250, 248, 245, 0.65) 0%,
    rgba(250, 248, 245, 0.95) 100%
  ) !important;
}

.dark body.search-active .page-blur-target::before {
  background: radial-gradient(
    ellipse at center,
    rgba(26, 23, 20, 0.5) 0%,
    rgba(26, 23, 20, 0.82) 100%
  ) !important;
}

#search-input {
  background-color: var(--warm-btn) !important;
  color: var(--warm-text) !important;
  border-color: var(--warm-border) !important;
}

#search-input::placeholder {
  color: var(--warm-text-light) !important;
}

#search-results-overlay {
  background-color: rgba(250, 248, 245, 0.85) !important;
}

.dark #search-results-overlay {
  background-color: rgba(26, 23, 20, 0.85) !important;
}

/* =================================================================
   13. 标签菜单 (Tag Menu)
   ================================================================= */
#tag-menu,
.tag-menu-panel,
[class*="tag-menu"] {
  background-color: var(--warm-surface) !important;
  border-color: var(--warm-border) !important;
}

#tag-menu a,
.tag-menu-panel a,
[class*="tag-menu"] a {
  color: var(--warm-text) !important;
  border-radius: 6px !important;
  transition: background-color 0.12s ease !important;
}

#tag-menu a:hover,
.tag-menu-panel a:hover {
  background-color: var(--warm-accent-light) !important;
  color: var(--warm-accent-deep) !important;
}

.dark #tag-menu,
.dark .tag-menu-panel {
  background-color: var(--warm-surface) !important;
  border-color: var(--warm-border) !important;
}

/* =================================================================
   14. Share 按钮
   ================================================================= */
#share-btn {
  border-color: var(--warm-border) !important;
  color: var(--warm-text-muted) !important;
}

#share-btn:hover {
  border-color: var(--warm-accent) !important;
  color: var(--warm-accent) !important;
}

/* =================================================================
   15. 滚动条
   ================================================================= */
::-webkit-scrollbar-thumb {
  background: var(--warm-border-light) !important;
  border-radius: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

/* =================================================================
   16. 浮动导航按钮
   ================================================================= */
.freecat-floating-nav-panel button,
.t-floating-nav {
  background-color: var(--warm-btn) !important;
  border-color: var(--warm-border) !important;
  color: var(--warm-text) !important;
}

.freecat-floating-nav-panel button:hover,
.t-floating-nav:hover {
  background-color: var(--warm-accent-light) !important;
  color: var(--warm-accent-deep) !important;
}

/* =================================================================
   17. 最近更新侧栏 (Recent Posts)
   ================================================================= */
.freecat-home-sidebar-recent h3,
[class*="recent"] h3 {
  color: var(--warm-accent-deep) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.freecat-home-sidebar-recent a,
[class*="recent"] a {
  color: var(--warm-text-muted) !important;
  transition: color 0.12s ease !important;
  text-decoration: none !important;
}

.freecat-home-sidebar-recent a:hover,
[class*="recent"] a:hover {
  color: var(--warm-accent) !important;
}

/* =================================================================
   18. "View All" 视图全部按钮
   ================================================================= */
#view-all-header a,
[class*="view-all"] a {
  color: var(--warm-accent) !important;
  border-color: var(--warm-border) !important;
}

#view-all-header a:hover,
[class*="view-all"] a:hover {
  background-color: var(--warm-accent-light) !important;
  border-color: var(--warm-accent) !important;
}

/* =================================================================
   19. 移动端适配
   ================================================================= */
@media (max-width: 1023px) {
  .freecat-home-sidebar {
    background: var(--warm-sidebar) !important;
  }

  .freecat-home-sidebar-hero-text h1,
  .freecat-home-sidebar-hero-text h2 {
    text-align: center !important;
  }
}

/* =================================================================
   20. About 页面
   ================================================================= */

/* =================================================================
   21. Post card 封面图区域
   ================================================================= */
.post-card .post-card-cover,
.post-card [class*="cover"] {
  border-bottom: 1px solid var(--warm-border-light) !important;
}

/* =================================================================
   22. 图片 caption
   ================================================================= */
article .prose .image-caption,
article .prose figcaption {
  color: var(--warm-text-light) !important;
  font-size: 0.85rem !important;
  font-style: italic !important;
}