/* ==========================================================================
   鱼与瑜的小站 · 全局统一主题层
   ==========================================================================
   nginx 在 <head> 注入本文件（见 /etc/nginx/sites-available/duyuuu.com）。
   之前这里引用的文件不存在，每个页面都在白请求一个 404；本文件补上。

   ── 为什么需要这一层 ───────────────────────────────────────────────────
   站点原本有两套并行的视觉语言，互相不认识：

     A 套（站点自身 + mo-motion + codex-*）：天蓝 #00a5ef、靛蓝 #625fff、青绿 #00bb7f
     B 套（home-polish / admin-enhancer / image-model-polish / music-polish / 部分
          codex-quantum 规则）：玫瑰粉 #f43f5e、暖褐 #7e3046、藕紫 #f0dce2

   更麻烦的是第三处：**应用代码本身**把 /friends 整个页面写成了玫瑰色
   （实测 text-rose-600 ×10、bg-rose-500 ×8、text-rose-300 ×8），首页也散落着
   rose / fuchsia 的强调色。这部分在编译产物里，改不动源码就只能在 CSS 层收口。

   本文件做三件事：
     1) 定义一套 --yu-* 令牌，作为全站唯一的颜色/圆角/阴影/缓动来源
     2) 把应用层写死的 rose / fuchsia / pink 工具类映射到天蓝体系
     3) 统一导航、卡片、按钮、输入框、页脚的观感与移动端触控尺度

   ── 安全边界（重要）──────────────────────────────────────────────────
   不改任何布局骨架：不动 display / position / overflow / z-index / width，
   只改颜色、圆角、阴影、边框、间距与过渡。子元素的定位基准不受影响。

   ── 关闭方式 ─────────────────────────────────────────────────────────
   URL 加 ?theme=off —— 见文件末尾的 [data-yu-theme='off'] 段。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 令牌
   --------------------------------------------------------------------------
   浅色值对齐站点自身的 slate 中性色与 #00a5ef 天蓝；
   深色值对齐 .apple-glass 已有的 #142744 / #bedeff33 体系。
   -------------------------------------------------------------------------- */
:root {
  /* 强调色 —— 取自站点原生三色 */
  --yu-accent: #00a5ef;
  --yu-accent-deep: #0284c7;
  --yu-accent-darker: #0369a1;
  --yu-accent-2: #625fff;
  --yu-accent-3: #00bb7f;

  /* 文字层级 */
  --yu-text: #0f172a;
  --yu-text-body: #334155;
  --yu-text-muted: #64748b;
  --yu-text-faint: #94a3b8;

  /* 表面 */
  --yu-surface: rgba(255, 255, 255, 0.72);
  --yu-surface-strong: rgba(255, 255, 255, 0.88);
  --yu-surface-subtle: rgba(241, 247, 252, 0.9);

  /* 描边 */
  --yu-border: rgba(148, 163, 184, 0.28);
  --yu-border-strong: rgba(148, 163, 184, 0.42);
  --yu-border-accent: rgba(0, 165, 239, 0.38);

  /* 圆角层级：卡片 20 / 控件 12 / 胶囊 999 */
  --yu-radius-card: 20px;
  --yu-radius-control: 12px;
  --yu-radius-pill: 999px;

  /* 阴影：大范围低透明度，避免「贴纸感」 */
  --yu-shadow-card: 0 10px 30px -18px rgba(2, 8, 23, 0.34);
  --yu-shadow-lift: 0 18px 44px -22px rgba(2, 8, 23, 0.42);
  --yu-shadow-focus: 0 0 0 3px rgba(0, 165, 239, 0.22);

  --yu-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 移动端最小触控尺度（iOS HIG 44px） */
  --yu-touch: 44px;
}

.dark {
  --yu-text: #e8eef7;
  --yu-text-body: #cbd5e1;
  --yu-text-muted: #94a3b8;
  --yu-text-faint: #7c8ca1;

  --yu-surface: rgba(15, 23, 42, 0.58);
  --yu-surface-strong: rgba(15, 23, 42, 0.74);
  --yu-surface-subtle: rgba(20, 39, 68, 0.5);

  --yu-border: rgba(190, 222, 255, 0.16);
  --yu-border-strong: rgba(190, 222, 255, 0.26);
  --yu-border-accent: rgba(56, 189, 248, 0.42);

  --yu-shadow-card: 0 10px 30px -18px rgba(2, 8, 23, 0.7);
  --yu-shadow-lift: 0 18px 44px -22px rgba(2, 8, 23, 0.8);
  --yu-shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.26);
}

/* --------------------------------------------------------------------------
   2. 应用层写死的玫瑰色 → 天蓝
   --------------------------------------------------------------------------
   这些是 Tailwind 工具类，由应用代码直接写在组件上（/friends 最密集）。
   应用 CSS 用了 @layer，而 @layer 内的规则在层叠顺序上低于**任何**未分层的
   作者样式 —— 所以本文件不加 !important 也赢。这里仍然加，是为了同时压过
   应用里少量带 !important 的工具类，以及后注入的 admin-enhancer。

   sky 对应值：300 #7dd3fc / 400 #38bdf8 / 500 #0ea5e9 / 600 #0284c7
              700 #0369a1 / 800 #075985 / 900 #0c4a6e / 950 #082f49
   -------------------------------------------------------------------------- */

/* 前景 */
.text-rose-300, .dark .text-rose-300 { color: #7dd3fc !important; }
.text-rose-400, .dark .text-rose-400 { color: #38bdf8 !important; }
.text-rose-500, .dark .text-rose-500 { color: #0ea5e9 !important; }
.text-rose-600, .dark .text-rose-600 { color: #0284c7 !important; }
.text-rose-700, .dark .text-rose-700 { color: #0369a1 !important; }

.text-pink-400, .dark .text-pink-400 { color: #38bdf8 !important; }
.text-pink-500, .dark .text-pink-500 { color: #0ea5e9 !important; }
.text-pink-600, .dark .text-pink-600 { color: #0284c7 !important; }

.text-fuchsia-400, .dark .text-fuchsia-400 { color: #7dd3fc !important; }
.text-fuchsia-500, .dark .text-fuchsia-500 { color: #0ea5e9 !important; }
.text-fuchsia-600, .dark .text-fuchsia-600 { color: #0284c7 !important; }

/* 背景 */
.bg-rose-100, .dark .bg-rose-100 { background-color: #e0f2fe !important; }
.bg-rose-400, .dark .bg-rose-400 { background-color: #38bdf8 !important; }
.bg-rose-500, .dark .bg-rose-500 { background-color: #0ea5e9 !important; }
.bg-rose-600, .dark .bg-rose-600 { background-color: #0284c7 !important; }
.bg-rose-950, .dark .bg-rose-950 { background-color: #082f49 !important; }

.bg-pink-500, .dark .bg-pink-500 { background-color: #0ea5e9 !important; }
.bg-pink-600, .dark .bg-pink-600 { background-color: #0284c7 !important; }
.bg-fuchsia-500, .dark .bg-fuchsia-500 { background-color: #0ea5e9 !important; }

/* 描边与渐变端点 */
.border-rose-200, .dark .border-rose-200 { border-color: #bae6fd !important; }
.border-rose-300, .dark .border-rose-300 { border-color: #7dd3fc !important; }
.border-rose-500, .dark .border-rose-500 { border-color: #0ea5e9 !important; }
.border-pink-300, .dark .border-pink-300 { border-color: #7dd3fc !important; }
.border-fuchsia-300, .dark .border-fuchsia-300 { border-color: #7dd3fc !important; }

.from-rose-500, .dark .from-rose-500 { --tw-gradient-from: #0ea5e9 !important; }
.to-rose-500, .dark .to-rose-500 { --tw-gradient-to: #0ea5e9 !important; }
.via-rose-500, .dark .via-rose-500 { --tw-gradient-via: #0ea5e9 !important; }
.from-fuchsia-500, .dark .from-fuchsia-500 { --tw-gradient-from: #0ea5e9 !important; }
.to-fuchsia-500, .dark .to-fuchsia-500 { --tw-gradient-to: #0ea5e9 !important; }
.from-pink-500, .dark .from-pink-500 { --tw-gradient-from: #0ea5e9 !important; }
.to-pink-500, .dark .to-pink-500 { --tw-gradient-to: #0ea5e9 !important; }

/* 填充与描边图标 */
.fill-rose-500, .dark .fill-rose-500 { fill: #0ea5e9 !important; }
.fill-pink-500, .dark .fill-pink-500 { fill: #0ea5e9 !important; }
.stroke-rose-500, .dark .stroke-rose-500 { stroke: #0ea5e9 !important; }

/* --------------------------------------------------------------------------
   3. 玻璃卡片统一
   --------------------------------------------------------------------------
   锚点 apple-glass / glass-panel / glass-card / glass-tile 是应用自身真实存在
   的类（从线上 CSS 确认），不是猜测。只补边框与阴影，不动背景与模糊
   —— 背景由 .apple-glass 自己的渐变负责，重复设置会盖掉深色模式的层次。

   注意：刻意**不设置** overflow / isolation / position / z-index。
   历史上正是这三件套导致卡片裁剪子元素、把高 z-index 子元素困进层叠上下文。
   -------------------------------------------------------------------------- */
.apple-glass,
.glass-panel,
.glass-card,
.glass-tile {
  border-color: var(--yu-border);
  box-shadow: var(--yu-shadow-card);
}

/* 聚焦态：用统一的强调色光环，替掉各处零散的焦点样式 */
.apple-glass:focus-within,
.glass-card:focus-within {
  border-color: var(--yu-border-accent);
  box-shadow: var(--yu-shadow-card), var(--yu-shadow-focus);
}

/* --------------------------------------------------------------------------
   4. 输入控件统一
   --------------------------------------------------------------------------
   .apple-input 是站点自己的输入框类，全站共用。统一圆角、描边与聚焦环，
   让设置页 / 论坛 / 留言 / Codex 的输入体验一致。
   -------------------------------------------------------------------------- */
.apple-input {
  border-color: var(--yu-border);
  border-radius: var(--yu-radius-control);
}

.apple-input::placeholder {
  color: var(--yu-text-faint);
}

.apple-input:focus,
.apple-input:focus-visible {
  border-color: var(--yu-border-accent);
  outline: none;
  box-shadow: var(--yu-shadow-focus);
}

/* --------------------------------------------------------------------------
   5. 导航
   --------------------------------------------------------------------------
   .mo-nav 是站点导航容器的真实类名。桌面端给当前项一道天蓝下划线，
   移动端保证每个可点区域不低于 44px。
   -------------------------------------------------------------------------- */
.mo-nav a {
  transition: color 0.2s var(--yu-ease), opacity 0.2s var(--yu-ease);
}

.mo-nav a[aria-current='page'],
.mo-nav a[data-active='1'] {
  color: var(--yu-accent-deep);
}

@media (min-width: 641px) {
  .mo-nav a[aria-current='page'],
  .mo-nav a[data-active='1'] {
    box-shadow: inset 0 -2px 0 0 var(--yu-accent);
  }
}

@media (max-width: 640px) {
  .mo-nav a,
  .mo-nav button {
    min-height: var(--yu-touch);
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   6. 悬浮音乐球
   --------------------------------------------------------------------------
   music-polish.css 已把粉色调成天蓝，这里只统一发光色与触控尺寸。
   -------------------------------------------------------------------------- */
[data-testid='music-trigger'] {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 5px rgba(0, 165, 239, 0.18),
    0 8px 24px rgba(2, 60, 90, 0.22) !important;
}

@media (max-width: 640px) {
  [data-testid='music-trigger'] {
    min-width: var(--yu-touch);
    min-height: var(--yu-touch);
  }
}

/* --------------------------------------------------------------------------
   7. 移动端
   --------------------------------------------------------------------------
   只处理真正会影响可用性的三件事：横向溢出、正文行高、长英文/链接断行。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 防止个别宽表格 / 长 URL 把整页撑出横向滚动条 */
  body {
    overflow-x: clip;
  }

  /* 小屏正文略放大、行高放松，中文长段落更好读 */
  body {
    font-size: 15px;
    line-height: 1.75;
  }

  /* 未加处理的连续长串（URL、代码片、英文单词）强制断行 */
  p,
  li,
  dd {
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   8. 可访问性
   -------------------------------------------------------------------------- */

/* 键盘导航时才显示焦点环，鼠标点击不显示 */
:focus-visible {
  outline: 2px solid var(--yu-accent);
  outline-offset: 2px;
}

/* 减少动态效果：只针对本文件控制的元素，不碰站点动画层 */
@media (prefers-reduced-motion: reduce) {
  .apple-glass,
  .glass-panel,
  .glass-card,
  .glass-tile,
  .apple-input,
  .mo-nav a,
  .mo-nav button,
  [data-testid='music-trigger'] {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 滚动条：浅色主题用冷灰，深色主题用低亮度蓝 */
@media (min-width: 641px) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border: 2px solid transparent;
    border-radius: var(--yu-radius-pill);
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.62);
    background-clip: content-box;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: rgba(125, 168, 200, 0.35);
    background-clip: content-box;
  }
}

/* --------------------------------------------------------------------------
   9. 总开关
   --------------------------------------------------------------------------
   ?theme=off 由 site-theme.js 写到 <html data-yu-theme="off">。
   只回退本文件引入的改动，不影响站点自身样式与其他注入层。

   注意：第 2 节的工具类映射**不**在此回退 —— 那些类由应用写死，
   关掉主题会让 /friends 变回玫瑰色，不是「原始状态」，而是「半截状态」。
   如需连它们一起关，把下面选择器改成 html[data-yu-theme='off'] 并
   在每条规则前加 :where() 降低优先级，成本较高；当前不做。
   -------------------------------------------------------------------------- */
[data-yu-theme='off'] .apple-glass,
[data-yu-theme='off'] .glass-panel,
[data-yu-theme='off'] .glass-card,
[data-yu-theme='off'] .glass-tile {
  box-shadow: revert;
  border-color: revert;
}

[data-yu-theme='off'] .apple-input {
  border-color: revert;
  border-radius: revert;
}

[data-yu-theme='off'] [data-testid='music-trigger'] {
  box-shadow: revert !important;
}