/* ==========================================================================
   Yakuyama 全局主题核心  theme-core.css   v1.0  2026-10-20
   与 pad-theme.css 配套：本文件负责「主题开关」相关的一切
     1) <html> 自身的底色（pad-theme 只能改 body，html 需单独处理）
     2) 切换瞬间的颜色过渡（只过渡颜色，不触碰尺寸 -> 不产生布局跳动）
     3) 切换按钮的两种形态（导航内嵌 / 无导航时浮动）
     4) 两主题下的对比度与视觉协调细则
   开关统一为 html[data-theme-effective="light|dark"]，由 theme-toggle.js 写入。
   ========================================================================== */

/* ---------- 1. 根元素底色（补 pad-theme 覆盖不到的 <html>） ---------- */
html[data-theme-effective="light"] {
  color-scheme: light;
  background-color: #f4f6f8;
  color: #1b1f24;
}
html[data-theme-effective="dark"] {
  color-scheme: dark;
  background-color: #0f1216;
  color: #e9edf2;
}

/* ---------- 2. 切换过渡：只在切换瞬间挂 class，避免常驻影响交互 ---------- */
html.yt-anim,
html.yt-anim *,
html.yt-anim *::before,
html.yt-anim *::after {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    fill .22s ease,
    stroke .22s ease,
    box-shadow .22s ease !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html.yt-anim,
  html.yt-anim *,
  html.yt-anim *::before,
  html.yt-anim *::after {
    transition-duration: .001ms !important;
  }
}

/* ---------- 3. 切换按钮 ---------- */
.yt-theme-btn {
  --yt-size: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--yt-size);
  height: var(--yt-size);
  padding: 0;
  margin: 0;
  flex: 0 0 auto;              /* 不参与伸缩：插入导航也不会挤压其它项 */
  border: 1px solid var(--pad-border, #d9dee4);
  border-radius: 12px;
  background-color: var(--pad-surface, #fff);
  color: var(--pad-text, #1b1f24);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.yt-theme-btn > svg { width: 20px; height: 20px; display: block; }
.yt-theme-btn:hover { border-color: var(--pad-accent, #0b6bcb); }
.yt-theme-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 107, 203, .35);
}
html[data-theme-effective="dark"] .yt-theme-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-theme-effective="dark"] .yt-theme-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(108, 182, 255, .42);
}
.yt-theme-btn .yt-ico-sun,
.yt-theme-btn .yt-ico-moon { display: none; }
.yt-theme-btn[data-state="light"] .yt-ico-sun,
.yt-theme-btn[data-state="dark"]  .yt-ico-moon { display: block; }

/* 有文字标签的形态（导航空间足够时） */
.yt-theme-btn.is-wide {
  width: auto;
  min-width: var(--yt-size);
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
}
.yt-theme-btn.is-wide > .yt-label { white-space: nowrap; }

/* 无导航栏时的浮动形态：固定右下角，不占文档流、不影响布局 */
.yt-theme-btn.is-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .18);
}
@media (max-width: 700px) {
  .yt-theme-btn.is-float { right: 12px; bottom: 12px; }
}

/* ---------- 4. 对比度与视觉协调 ---------- */

/* 4.1 选区：两主题下都要看得清 */
::selection { background: rgba(11, 107, 203, .22); color: inherit; }
html[data-theme-effective="dark"] ::selection { background: rgba(108, 182, 255, .30); }

/* 4.2 占位符：低频信息也要 >= 4.5:1 */
::placeholder { color: var(--pad-text-3, #657080); opacity: 1; }
html[data-theme-effective="dark"] ::placeholder { color: #95a1ae; }

/* 4.3 禁用态：浅色别太淡、深色别太亮 */
:disabled, [disabled], [aria-disabled="true"] { opacity: .55; }
html[data-theme-effective="dark"] :disabled,
html[data-theme-effective="dark"] [disabled] { opacity: .45; }

/* 4.4 表单控件在两主题下的底色/边框统一 */
html[data-theme-effective="dark"] :where(input, textarea, select) {
  background-color: var(--pad-surface-2, #1d222a);
  color: var(--pad-text, #e9edf2);
  border-color: var(--pad-border-strong, #3a434e);
}
html[data-theme-effective="dark"] :where(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 182, 255, .38);
}

/* 4.5 滚动条：深色下别留一条白槽 */
html[data-theme-effective="dark"] {
  scrollbar-color: #3a434e #14181d;
}
html[data-theme-effective="dark"] ::-webkit-scrollbar { background-color: #14181d; }
html[data-theme-effective="dark"] ::-webkit-scrollbar-thumb {
  background-color: #3a434e;
  border-radius: 8px;
}
html[data-theme-effective="dark"] ::-webkit-scrollbar-track { background-color: #14181d; }

/* 4.6 图片/视频在深色下略微降亮，避免大面积纯白刺眼（柔光屏） */
html[data-theme-effective="dark"] :where(img, video, iframe) {
  filter: brightness(.92) contrast(1.02);
}
/* 图标类小图不降亮，否则会发灰 */
html[data-theme-effective="dark"] :where(img[class*="icon"], img[class*="logo"],
  img[class*="avatar"], img[width="16"], img[width="20"], img[width="24"]) {
  filter: none;
}

/* 4.7 焦点可见性（键盘导航在两主题下都要清晰） */
:focus-visible { outline: 2px solid var(--pad-accent, #0b6bcb); outline-offset: 2px; }

/* 4.8 分割线与次要文字的最低对比度兜底 */
html[data-theme-effective="dark"] :where([class*="divider"], [class*="separator"], hr) {
  border-color: var(--pad-border-strong, #3a434e) !important;
}

/* 4.9 页脚 / 版权 / 备案号一类次级文字
   实测：写死的 #94a3b8 落在 #f4f6f8 上只有 2.37:1，远低于 AA 的 4.5:1。
   这里统一抬到 #5b6470（≈5.4:1）；深色下原值 7.3:1 已达标，不动。 */
html[data-theme-effective="light"] :where(footer, [class*="footer"], [class*="copyright"],
  [class*="icp"], [class*="备案"]) :where(a, small, span, p, div, li) {
  color: #5b6470 !important;
}
html[data-theme-effective="light"] :where(footer, [class*="footer"], [class*="copyright"],
  [class*="icp"], [class*="备案"]) a:hover {
  color: #3f4854 !important;
}

/* 4.9b 备案 / 版权链接（常以行内 style 写死 #94a3b8，且不在 footer 语义容器里）
   命中 beian.miit.gov.cn、beian.gov.cn 等备案查询链接，浅色下统一压深。 */
html[data-theme-effective="light"] :where(a[href*="beian"], a[href*="miit.gov.cn"]) {
  color: #5b6470 !important;
}
html[data-theme-effective="light"] :where(a[href*="beian"], a[href*="miit.gov.cn"]):hover {
  color: #3f4854 !important;
}

/* 4.9c 深色下仍会发白的容器：播放器、评分项、图块、单元格
   pad-theme 的容器关键词表没覆盖到这些词根，实测 downloads 有 7 处、
   report 有 8 处大面积纯白（深色下最刺眼）。这里用 :where 归零特异性补齐。 */
html[data-theme-effective="dark"] :where(
  [class*="player"], [class*="score-item"], [class*="media-item"],
  [class*="tile"], [class*="cell"], [class*="item"]:not([class*="active"]):not([class*="bar"])
) {
  background-color: var(--pad-surface) !important;
  border-color: var(--pad-border) !important;
  color: var(--pad-text);
}

/* 4.10 已知既有低对比项补丁（页面私有类名，集中在此便于日后清理）
   营养师「题量选择按钮」选中态：#059669 文字 + #d9fae5 底 = 3.32:1。
   浅色下把文字压深到 #046c4e（≈4.7:1），深色下原组合 8.4:1 达标，不动。 */
html[data-theme-effective="light"] .count-btn.active {
  color: #046c4e !important;
}
/* 深色下同一组按钮：#059669 文字配 #d9fae5 底在深色页面里既刺眼又只有 3.32:1，
   换成深绿底 + 浅绿字（≈9:1），与深色体系协调。 */
html[data-theme-effective="dark"] .count-btn.active {
  background-color: #0e3a2c !important;
  color: #7ee2b8 !important;
  border-color: #1c5e46 !important;
}

/* ---------- 5. 打印：始终按浅色输出 ---------- */
@media print {
  .yt-theme-btn { display: none !important; }
}