/* 05-system.css — 深色模式覆盖与系统级样式 */

/* 在 01-tokens 已定义变量，这里覆盖组件细节 */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }

  :root[data-theme="auto"] .topbar,
  :root:not([data-theme="light"]) .topbar,
  :root[data-theme="auto"] .nav,
  :root:not([data-theme="light"]) .nav,
  :root[data-theme="auto"] .drawer,
  :root:not([data-theme="light"]) .drawer,
  :root[data-theme="auto"] .modal,
  :root:not([data-theme="light"]) .modal {
    background: var(--surface);
  }

  /* hero 在深色下稍微提亮 */
  :root[data-theme="auto"] .hero,
  :root:not([data-theme="light"]) .hero,
  :root[data-theme="auto"] .profile-head,
  :root:not([data-theme="light"]) .profile-head {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #7c2d12 100%);
  }

  /* 顶部毛玻璃在深色下使用更深的边线 */
  :root[data-theme="auto"] .topbar,
  :root:not([data-theme="light"]) .topbar {
    border-bottom-color: var(--line-2);
  }

  /* 搜索 overlay 提示文字对比度 */
  :root[data-theme="auto"] .search-overlay__hint,
  :root:not([data-theme="light"]) .search-overlay__hint {
    color: rgba(255, 255, 255, 0.75);
  }

  /* 滚动条在深色下更柔和 */
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 3px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* 用户显式选择深色 */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .nav,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .modal {
  background: var(--surface);
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .profile-head {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #7c2d12 100%);
}
:root[data-theme="dark"] .topbar {
  border-bottom-color: var(--line-2);
}
:root[data-theme="dark"] .search-overlay__hint {
  color: rgba(255, 255, 255, 0.75);
}

/* 用户显式选择浅色 */
:root[data-theme="light"] {
  color-scheme: light;
}

/* 浅色模式滚动条 */
:root[data-theme="light"],
:root[data-theme="auto"] {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 3px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* 禁用图片拖拽 */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* 表单元素继承字体 */
button,
input,
textarea,
select {
  font-family: inherit;
}

/* 防止表单自动缩放（iOS） */
input,
textarea,
select {
  font-size: var(--fs-15);
}

/* 全局可访问性：减少动效 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 焦点可见性在深色模式下颜色 */
:root[data-theme="dark"] :focus-visible,
:root[data-theme="auto"] :focus-visible {
  outline-color: var(--accent);
}

/* 链接 hover */
a:hover {
  color: var(--accent);
}

/* 防止内容溢出 */
img,
svg,
video {
  max-width: 100%;
}

/* 文字溢出省略 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 系统通知 banner */
.sys-banner {
  background: var(--warn-soft);
  color: var(--warn);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-12);
  text-align: center;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}

/* 调试用边线 */
.debug * {
  outline: 1px solid red !important;
}

/* 隐藏滚动条但保留滚动 */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}