/* ==========================================================================
   vulnspace —— 旗舰主题
   --------------------------------------------------------------------------
   全部原创实现。设计目标：科技感与阅读舒适兼得。

   本文件只覆盖 token 与追加少量主题特有的视觉处理，
   不复制任何第三方商业主题的代码、类名或标识。
   ========================================================================== */

:root {
  /* 主色：靛蓝。比默认值更饱和一点，让链接与按钮更有精神 */
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --accent-500: #06b6d4;

  /* 页面底色带一点冷调，与纯白卡片拉开层次 */
  --bg-body: #f5f7fb;
  --border: #e5eaf2;

  /* 圆角稍大，卡片观感更现代 */
  --radius-lg: 14px;
  --radius-xl: 18px;
}

/* 暗色皮肤：独立配色，不是简单反色 */
:root[data-theme="dark"] {
  --bg-body: #0d1420;
  --bg-surface: #161f2c;
  --bg-muted: #1f2a3a;
  --border: #253244;
  --border-strong: #33445c;
  --brand-500: #60a5fa;
  --brand-600: #93c5fd;
  --accent-500: #22d3ee;
}

/* --- 首页横幅：用渐变光晕营造科技感，且不加载任何图片 --------------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: min(760px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 72%),
    radial-gradient(closest-side, color-mix(in srgb, var(--accent-500) 12%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero__title {
  background: linear-gradient(120deg, var(--brand-500), var(--accent-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 暗色下渐变文字对比度会下降，改用纯色更清晰 */
:root[data-theme="dark"] .hero__title {
  background: none;
  color: var(--text-strong);
}

/* --- 文章卡片：封面用一层极淡的遮罩压住杂乱截图 ---------------------- */

.post-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__cover {
  position: relative;
}

/* 置顶卡片用左侧色条标识，比角标更克制 */
.post-card--top {
  border-left: 3px solid var(--brand-500);
}

/* --- 分类角标：无自定义颜色时按名称派生一个稳定的色相 ----------------- */

.badge--cat {
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--brand-500)) 28%, transparent);
}

/* --- 代码块：顶部加一条语言标识带，视觉上更接近现代技术站点 --------- */

.post__content pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  opacity: .7;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --- 页头：滚动后收窄，给内容让出空间 -------------------------------- */

.site-header.is-scrolled .site-header__inner {
  min-height: 56px;
}
.site-header__inner {
  transition: min-height var(--dur-base) var(--ease-out);
}

/* --- 移动端：卡片间距略收紧，一屏能看到更多条目 ---------------------- */

@media (max-width: 767px) {
  .post-list { gap: var(--space-4); }
  .hero { padding: var(--space-6) 0 var(--space-4); }
  .hero__title { font-size: var(--text-2xl); }
}

/* 尊重「减少动态效果」偏好：去掉悬停位移与缩放 */
@media (prefers-reduced-motion: reduce) {
  .post-card:hover { transform: none; }
  .post-card:hover .post-card__cover img { transform: none; }
}

/* ==========================================================================
   主题可视化配置钩子
   --------------------------------------------------------------------------
   对应 theme.json 里 options 声明的配置项。宿主会把每个配置项写成
   <html data-opt-<key>="<value>">，color 类型额外写成内联 --opt-<key>。
   这一节是「配置项 → 实际外观」的唯一落点，改动配置只影响这里。

   注意：本节必须留在 @layer 之外。tokens.css 整体在 @layer tokens 中，
   未分层样式在层叠顺序上优先于任何分层样式，因此这里的 :root 规则
   能稳定覆盖暗色皮肤的 token，而不必去堆 !important。
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --brand-500: var(--opt-accent, #2563eb);
  --brand-600: color-mix(in srgb, var(--opt-accent, #2563eb) 84%, #000000);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--opt-accent, #2563eb) 32%, transparent);
}

/* 暗色下把强调色提亮，否则深底上的中蓝对比度不足 */
:root[data-theme="dark"] {
  --brand-500: color-mix(in srgb, var(--opt-accent, #2563eb) 72%, #ffffff);
  --brand-600: color-mix(in srgb, var(--opt-accent, #2563eb) 88%, #ffffff);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--opt-accent, #2563eb) 38%, transparent);
}

/* 首页横幅开关：关掉后首页直接进入文章列表 */
html[data-opt-show-hero="0"] .hero { display: none; }

/* 卡片列数。基础规则在 @media 里给了 2 列，这里按配置覆盖。
   注意排除 post-list--compact（文章页「相关文章」）：两列小卡是版式设计，
   不跟随「卡片列数」配置，否则会被默认值压回单列、横版卡片挤成一团。 */
@media (min-width: 768px) {
  html[data-opt-card-columns="1"] .post-list:not(.post-list--compact) { grid-template-columns: minmax(0, 1fr); }
  html[data-opt-card-columns="2"] .post-list:not(.post-list--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-opt-card-columns="3"] .post-list:not(.post-list--compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 正文宽度：直接改 token，正文容器无需感知配置 */
html[data-opt-content-width="680"] { --content-max: 680px; }
html[data-opt-content-width="760"] { --content-max: 760px; }
html[data-opt-content-width="860"] { --content-max: 860px; }