/* ============================================================
   花落与你共赏 · Firefly 风格移植
   ============================================================
   来源：https://github.com/CuteLeaf/Firefly 的 src/styles/variables.styl
   做法：把 Firefly 的真实设计变量，映射到 shadcn 主题的 CSS 变量上。

   Firefly 的标志性特征（全部来自它的源码，不是我猜的）：
     · --hue: 250            → 蓝色相，所有颜色由它派生
     · --page-bg  0.95/0.01  → 浅色页面底（带一点蓝调）
     · --card-bg  white      → 纯白卡片
     · --radius-large 1rem   → 大圆角，卡片感的核心
     · 柔和阴影               → 0 4px 6px rgba(0,0,0,.1)

   改主题色只需要动下面 --ff-hue 一个数（Firefly 也支持 0-360 任意色相）。
   ============================================================ */

html:root {
  /* ★ 唯一需要改的：色相。250 = Firefly 默认蓝 */
  --ff-hue: 250;

  /* 大圆角 —— Firefly 的 --radius-large
     必须用 html:root 提高优先级，否则会被主题的 :root 盖掉 */
  --radius: 1rem;
}

/* ============================================================
   亮色主题（Firefly 的主场外观）
   ============================================================ */
html:root,
html.light {
  color-scheme: light !important;

  /* 页面底：Firefly --page-bg */
  --background: oklch(0.95 0.01 var(--ff-hue));
  /* 正文：Firefly --deep-text */
  --foreground: oklch(0.25 0.02 var(--ff-hue));

  /* 卡片：Firefly --card-bg: white */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0.02 var(--ff-hue));
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0.02 var(--ff-hue));
  --popover-border: oklch(0.88 0.02 var(--ff-hue));
  --shadow-popover: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* 主色：Firefly --primary */
  --primary: oklch(0.7 0.14 var(--ff-hue));
  --primary-foreground: oklch(1 0 0);
  --ring: oklch(0.7 0.14 var(--ff-hue));
  /* 链接：Firefly --btn-content */
  --link: oklch(0.55 0.12 var(--ff-hue));

  /* 次级 / 静默：Firefly --muted */
  --secondary: oklch(0.95 0.025 var(--ff-hue));
  --secondary-foreground: oklch(0.35 0.03 var(--ff-hue));
  --muted: oklch(0.93 0.015 var(--ff-hue));
  /* Firefly --content-meta: rgba(0,0,0,.7) */
  --muted-foreground: oklch(0.5 0.02 var(--ff-hue));

  /* 强调：Firefly --btn-regular-bg 系 */
  --accent: oklch(0.95 0.025 var(--ff-hue));
  --accent-foreground: oklch(0.35 0.03 var(--ff-hue));
  --accent2: color-mix(in oklab, var(--accent) 60%, transparent);

  /* 分隔线：Firefly --line-color: rgba(0,0,0,.1) */
  --border: oklch(0.88 0.02 var(--ff-hue));
  --input: oklch(0.88 0.02 var(--ff-hue));
  --edge: oklch(0.88 0.02 var(--ff-hue));

  /* 面板 / 代码块：Firefly --codeblock-bg / --codeblock-topbar-bg */
  --surface: oklch(0.97 0.01 var(--ff-hue));
  --surface-foreground: oklch(0.5 0.02 var(--ff-hue));
  --code: oklch(0.17 0.015 var(--ff-hue));
  --code-foreground: oklch(0.9 0.02 var(--ff-hue));
  --code-highlight: oklch(0.3 0.02 var(--ff-hue));
  --code-number: oklch(0.55 0.02 var(--ff-hue));

  /* 选中：Firefly --selection-bg */
  --selection: oklch(0.9 0.05 var(--ff-hue));
  --selection-foreground: oklch(0.25 0.02 var(--ff-hue));

  --success: oklch(0.7 0.14 150);
  --destructive: oklch(0.6 0.2 25);
  --info: oklch(0.7 0.14 var(--ff-hue));

  /* 正文排版 */
  --tw-prose-body: oklch(0.32 0.02 var(--ff-hue));
  --tw-prose-headings: oklch(0.25 0.02 var(--ff-hue));
  --tw-prose-lead: oklch(0.45 0.02 var(--ff-hue));
  --tw-prose-links: oklch(0.55 0.12 var(--ff-hue));
  --tw-prose-bold: oklch(0.25 0.02 var(--ff-hue));
  --tw-prose-counters: oklch(0.5 0.02 var(--ff-hue));
  --tw-prose-bullets: oklch(0.7 0.05 var(--ff-hue));
  --tw-prose-hr: oklch(0.88 0.02 var(--ff-hue));
  --tw-prose-quotes: oklch(0.35 0.02 var(--ff-hue));
  --tw-prose-quote-borders: oklch(0.7 0.14 var(--ff-hue));
  --tw-prose-captions: oklch(0.5 0.02 var(--ff-hue));
  --tw-prose-code: oklch(0.55 0.12 var(--ff-hue));
  --tw-prose-pre-code: oklch(0.9 0.02 var(--ff-hue));
  --tw-prose-pre-bg: oklch(0.17 0.015 var(--ff-hue));
  --tw-prose-th-borders: oklch(0.85 0.02 var(--ff-hue));
  --tw-prose-td-borders: oklch(0.9 0.015 var(--ff-hue));
}

/* ============================================================
   暗色主题（Firefly 的暗色外观）
   ============================================================ */
html.dark {
  color-scheme: dark !important;

  /* Firefly --page-bg（暗） */
  --background: oklch(0.16 0.014 var(--ff-hue));
  --foreground: oklch(0.93 0.01 var(--ff-hue));

  /* Firefly --card-bg（暗） */
  --card: oklch(0.23 0.015 var(--ff-hue));
  --card-foreground: oklch(0.93 0.01 var(--ff-hue));
  --popover: oklch(0.23 0.015 var(--ff-hue));
  --popover-foreground: oklch(0.93 0.01 var(--ff-hue));
  --popover-border: oklch(0.32 0.02 var(--ff-hue));
  --shadow-popover: 0 0 24px rgba(0, 0, 0, 0.5);

  /* Firefly --primary（暗） */
  --primary: oklch(0.75 0.14 var(--ff-hue));
  --primary-foreground: oklch(0.17 0.02 var(--ff-hue));
  --ring: oklch(0.75 0.14 var(--ff-hue));
  --link: oklch(0.75 0.1 var(--ff-hue));

  --secondary: oklch(0.33 0.035 var(--ff-hue));
  --secondary-foreground: oklch(0.93 0.01 var(--ff-hue));
  --muted: oklch(0.25 0.015 var(--ff-hue));
  --muted-foreground: oklch(0.7 0.02 var(--ff-hue));

  --accent: oklch(0.33 0.035 var(--ff-hue));
  --accent-foreground: oklch(0.93 0.01 var(--ff-hue));
  --accent2: color-mix(in oklab, var(--accent) 40%, transparent);

  --border: oklch(0.32 0.02 var(--ff-hue));
  --input: oklch(0.32 0.02 var(--ff-hue));
  --edge: oklch(0.3 0.018 var(--ff-hue));

  --surface: oklch(0.19 0.015 var(--ff-hue));
  --surface-foreground: oklch(0.7 0.02 var(--ff-hue));
  --code: oklch(0.17 0.015 var(--ff-hue));
  --code-foreground: oklch(0.9 0.02 var(--ff-hue));
  --code-highlight: oklch(0.28 0.02 var(--ff-hue));
  --code-number: oklch(0.5 0.02 var(--ff-hue));

  --selection: oklch(0.4 0.08 var(--ff-hue));
  --selection-foreground: oklch(0.95 0.01 var(--ff-hue));

  --success: oklch(0.75 0.14 150);
  --destructive: oklch(0.65 0.2 25);
  --info: oklch(0.75 0.14 var(--ff-hue));

  --tw-prose-body: oklch(0.85 0.015 var(--ff-hue));
  --tw-prose-headings: oklch(0.95 0.01 var(--ff-hue));
  --tw-prose-lead: oklch(0.75 0.02 var(--ff-hue));
  --tw-prose-links: oklch(0.75 0.1 var(--ff-hue));
  --tw-prose-bold: oklch(0.95 0.01 var(--ff-hue));
  --tw-prose-counters: oklch(0.7 0.02 var(--ff-hue));
  --tw-prose-bullets: oklch(0.45 0.05 var(--ff-hue));
  --tw-prose-hr: oklch(0.32 0.02 var(--ff-hue));
  --tw-prose-quotes: oklch(0.85 0.015 var(--ff-hue));
  --tw-prose-quote-borders: oklch(0.75 0.14 var(--ff-hue));
  --tw-prose-captions: oklch(0.65 0.02 var(--ff-hue));
  --tw-prose-code: oklch(0.75 0.1 var(--ff-hue));
  --tw-prose-pre-code: oklch(0.9 0.02 var(--ff-hue));
  --tw-prose-pre-bg: oklch(0.17 0.015 var(--ff-hue));
  --tw-prose-th-borders: oklch(0.35 0.02 var(--ff-hue));
  --tw-prose-td-borders: oklch(0.28 0.018 var(--ff-hue));
}

/* ============================================================
   卡片化 —— Firefly 最显眼的特征
   把 shadcn 那种「整页一张纸 + 竖分隔线」改成「一块块圆角卡片」
   ============================================================ */

/* 面板变成卡片：圆角 + 卡片底色 + 柔和阴影 */
[data-slot='panel'] {
  background-color: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-block: 0.6rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}

/* 卡片之间不要贴在一起 */
[data-slot='panel'] + [data-slot='panel'] {
  margin-top: 0.9rem;
}

/* 卡片头的圆角与内边距 */
[data-slot='panel-header'] {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* 圆角化其余交互元件，贴合 Firefly 的大圆角手感 */
[data-slot='prose'] pre,
[data-slot='prose'] img,
[data-slot='prose'] blockquote {
  border-radius: var(--radius);
}

/* 按钮类圆角 */
button,
.code-copy-btn {
  border-radius: calc(var(--radius) * 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  [data-slot='panel'] {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  [data-slot='panel']:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
}

/* ============================================================
   头图 banner —— 把主题画的点阵换成真实壁纸
   ------------------------------------------------------------
   实测确认：点阵是主题用 <canvas> 画的，不在这个容器上；
   容器是 div[class*="aspect-2/1"]（768×256，比例 3:1）。

   ★ 换成你自己的图：把下面 url(...) 里那行换掉即可。
     建议尺寸 1920×640（3:1），传到「博客园 → 文件」再引用最稳。
   ============================================================ */

div[class*='aspect-2/1'] {
  background-image:
    /* 压暗渐变。二次元壁纸比风景图更花，所以比之前压得更狠一点，
       保证白色标题在任何一张上都能读清楚 */
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.62) 100%),
    /* ★ 壁纸由 JS 每次刷新随机挑一张，见页首 HTML 的 WALLPAPERS */
    var(--ff-banner, url('https://cdn.nekos.life/wallpaper/XEj23R3vU-k.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 隐藏原来那块点阵 canvas */
div[class*='aspect-2/1'] canvas {
  display: none;
}

/* 图上的标题改成白色 + 投影 */
div[class*='aspect-2/1'] div[class*='font-bold'] {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* 那行模仿类名的等宽小字，在照片上也要压得住 */
div[class*='aspect-2/1'] div[class*='font-mono'] {
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   文章页头图 —— 把动态气泡渐变换成真实图片
   ------------------------------------------------------------
   实测确认：文章页顶部那块紫蓝渐变是主题的「气泡背景」组件，
   容器是 [data-slot="bubble-background"]（absolute inset-0），
   里面是一堆 framer-motion 驱动的径向渐变色球。

   做法：给容器铺图，再把里面的色球全部隐藏。
   ★ 换成你自己的图：改下面 url(...)。
   ============================================================ */

[data-slot='bubble-background'] {
  background-image:
    /* 压暗渐变，保证白色标题读得清（和首页 banner 用同一套参数） */
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.64) 100%),
    /* ★ 同一张随机壁纸（文章页只会看到这个，首页只会看到 banner，
         所以共用一个变量不会重复） */
    var(--ff-banner, url('https://cdn.nekos.life/wallpaper/XEj23R3vU-k.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 隐藏原来那堆动画色球 */
[data-slot='bubble-background'] > * {
  display: none !important;
}

/* 标题再压一层投影，深色照片上也清楚 */
[data-slot='bubble-background'] ~ * h1,
[data-slot='bubble-background'] ~ * h1 + div {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* 头图加高一点，更接近 Firefly 那种 hero 的体量感 */
div:has(> [data-slot='bubble-background']) {
  min-height: 340px;
}

/* ============================================================
   链接面板的图标：明暗自动切换
   ------------------------------------------------------------
   自己内联的图标（data URI）没法像主题那样配 lightIcon/darkIcon，
   所以做两张图，用 CSS 控制显示哪一张。
   ============================================================ */

.ff-ico-light {
  display: inline-block;
}
.ff-ico-dark {
  display: none;
}

html.dark .ff-ico-light {
  display: none;
}
html.dark .ff-ico-dark {
  display: inline-block;
}

/* ============================================================
   两栏布局（模仿 Firefly）
   ------------------------------------------------------------
   主题原本是单栏：banner、头像区、所有面板都堆在同一条 768px 的列里。

   做法：用 JS 新建一个 .ff-grid 容器，只把「面板」装进去，
   banner 和头像区留在外面不动 —— 这样它们不会被挤成网格项。
   （我第一次试过直接把主题容器变 grid，结果 banner 和头像区
     被挤进了右栏，教训。）

   桌面端：主栏（文章列表 + 其他面板）| 侧栏（分类 + 链接）
   窄屏：  退化成单栏
   ============================================================ */

.ff-wide {
  max-width: 1080px !important;
}

.ff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ff-grid {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 0 1.25rem;
    align-items: start;
  }

  /* 主栏第一块：文章列表 */
  [data-post-panel] {
    grid-column: 1;
    grid-row: 1;
  }

  /* 右侧栏：分类 + 链接 */
  [data-cat-panel] {
    grid-column: 2;
    grid-row: 1;
  }
  [data-link-panel] {
    grid-column: 2;
    grid-row: 2;
  }

  /* 其余面板（关于我 / 图标组）：排在下面，通栏 */
  [data-slot='panel']:not([data-post-panel]):not([data-cat-panel]):not([data-link-panel]) {
    grid-column: 1 / -1;
  }
}

/* 文章卡片的封面图 */
.ff-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.75);
  margin-bottom: 0.75rem;
  background-color: var(--muted);
}

/* ============================================================
   音乐播放器（APlayer）定位与配色
   ------------------------------------------------------------
   主题底部有一个居中的工具栏（显示器 / 月亮 / RSS 那个小胶囊），
   所以播放器固定在**左下角**，两者不打架。
   ============================================================ */

.aplayer.aplayer-fixed {
  z-index: 60 !important;
}

/* APlayer 默认紧贴屏幕左下角（left:0 bottom:0），太挤了，
   往里挪一点，也和主题底部居中的工具栏留出距离 */
.aplayer.aplayer-fixed .aplayer-body {
  left: 1.25rem !important;
  bottom: 1.25rem !important;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* 折叠时旁边那个展开列表的小箭头也跟着挪 */
.aplayer.aplayer-fixed .aplayer-miniswitcher {
  right: -28px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* 歌曲列表跟着主题走 */
.aplayer .aplayer-list {
  border-radius: var(--radius);
  overflow: hidden;
}
.aplayer .aplayer-list ol {
  max-height: 240px;
}

/* 暗色主题下的适配（APlayer 默认是浅色的） */
html.dark .aplayer,
html.dark .aplayer .aplayer-list {
  background: var(--card);
  color: var(--card-foreground);
}
html.dark .aplayer .aplayer-info .aplayer-music .aplayer-title,
html.dark .aplayer .aplayer-info .aplayer-music .aplayer-author,
html.dark .aplayer .aplayer-list ol li .aplayer-list-title,
html.dark .aplayer .aplayer-list ol li .aplayer-list-author {
  color: var(--card-foreground);
}
html.dark .aplayer .aplayer-list ol li {
  border-top-color: var(--border);
}
html.dark .aplayer .aplayer-list ol li:hover,
html.dark .aplayer .aplayer-list ol li.aplayer-list-light {
  background: var(--muted);
}
html.dark .aplayer .aplayer-info {
  border-bottom-color: var(--border);
}
/* 音量条 / 进度条的底槽 */
html.dark .aplayer .aplayer-bar-wrap .aplayer-bar {
  background: var(--muted);
}

/* ============================================================
   说明：
   · 想换主题色 → 改 --ff-hue（0-360）。比如 180 青、300 紫、25 红。
   · 想换 banner 图 → 改上面 url(...)。
   · 想更接近 Firefly 首屏那种「占满整屏」的壁纸 —— 博客园做不到，
     那个区域的高度由主题写死（aspect-3/1），只能到这个程度。
   ============================================================ */