/* ==========================================================
   我的二次元小窝 · 自定义样式
   只在这里改外观；删掉本文件（或去掉 _config.butterfly.yml 里的 inject 行）即可恢复主题原样
   ========================================================== */

/* ---------- 第 1 步：樱花粉配色 ---------- */

/* 调色板：后面几步都用这些变量 */
:root {
  --sakura: #ff8fb1;        /* 主色：樱花粉 */
  --sakura-deep: #c8557f;   /* 深樱粉：用于文字链接，保证白底上看得清 */
  --sakura-light: #ffc3d8;  /* 浅粉 */
  --sakura-pale: #fff0f5;   /* 极淡粉：底色 */
  --lavender: #d9c8ff;      /* 点缀：薰衣草紫 */
  --sky: #b8e4ff;           /* 点缀：天空蓝 */
  --ink: #5a4a52;           /* 正文：暖灰紫 */
}

/* 浅色模式（深色模式保持主题默认） */
:root:not([data-theme='dark']) {
  --font-color: var(--ink);
  --blockquote-color: var(--ink);
  --blockquote-bg: rgba(255, 143, 177, 0.08);
  --hr-border: var(--sakura-light);
  --hr-before-color: var(--sakura);
  --btn-hover-color: var(--sakura-deep);
  --text-bg-hover: rgba(255, 143, 177, 0.7);
  --headline-presudo: var(--sakura-light);
}

/* 选中文字 */
::selection {
  background: var(--sakura-light);
  color: #4a2a38;
}

/* 文章正文里的链接 */
:root:not([data-theme='dark']) #article-container a:not(.headerlink):not(.fancybox):not(.btn-beautify) {
  color: var(--sakura-deep);
  border-bottom: 1px dashed var(--sakura-light);
  text-decoration: none;
}
:root:not([data-theme='dark']) #article-container a:not(.headerlink):not(.fancybox):not(.btn-beautify):hover {
  color: var(--sakura);
  border-bottom-style: solid;
}

/* 文章里的标题颜色 */
:root:not([data-theme='dark']) #article-container :is(h1, h2, h3, h4) {
  color: #6b3d55;
}

/* ---------- 第 2 步：背景图 + 半透明卡片 ---------- */
/* 背景图在后台“站点设置 → 全站背景图”里换；没设置时用 _config.butterfly.yml 的 background 颜色 */

:root:not([data-theme='dark']) {
  --card-bg: rgba(255, 255, 255, 0.82);   /* 卡片透明度：数字越小越透 */
  --bg-veil: rgba(255, 245, 248, 0.18);   /* 背景上的淡粉薄纱：让花哨的图柔和一点 */
}

/* 卡片毛玻璃 */
.layout > div:first-child:not(.nc),
#recent-posts .recent-post-item,
#aside-content .card-widget,
.layout .pagination > *:not(.space),
.type-404 .error-content {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 背景薄纱（深色模式由主题自带的暗色遮罩处理） */
:root:not([data-theme='dark']) #web_bg::before {
  position: absolute;
  inset: 0;
  background: var(--bg-veil);
  content: '';
}