/* ============================================================
 * Longlight - 长光雨滴小站 | 基础样式 base.css
 * 职责：reset、排版、全局工具类、动效工具类、无障碍偏好
 * 分层：公共控件样式一律在 components/，本文件不承载任何控件规则（FE-08）
 * 依赖：tokens.css（必须先引入）
 * ============================================================ */

/* ============================================================
 * 1. 基础重置
 * ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--green-900); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* 去除点击/触摸自带的矩形焦点框与高亮（含移动端 tap 高亮），
   保留键盘 Tab 导航的焦点轮廓，保证无障碍 */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }

/* 通用滚动条（替代原生）：全站统一一套，随投影底色自动切换；
   轨道透明不添视觉噪音，滑块取品牌绿半透明档、悬停转深绿、按下为实色，
   方角取滑块圆角令牌（--radius-slider），两侧由透明描边内缩留白；
   颜色一律引令牌（FE-07），不出现硬编码色值
   注：页面私有滚动条（如 log 页横向索引 .idx-nav 的隐藏滚动条）以更高优先级
   的选择器覆盖此处，仍按各自页面声明生效 */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--green-700) 50%, transparent);
  border: 2px solid transparent;
  border-radius: var(--radius-slider);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--green-900) 75%, transparent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background: var(--green-900);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* 不支持 ::-webkit-scrollbar 的浏览器（Firefox）退回标准属性；
   该探测同时排除支持 webkit 伪元素的 Chromium / Safari，
   避免标准属性反过来屏蔽上方的自绘样式 */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--green-700) 50%, transparent) transparent;
  }
}

/* ============================================================
 * 2. 排版工具类
 * ============================================================ */
.text-display { font: var(--text-display); letter-spacing: var(--ls-display); }
.text-h1      { font: var(--text-h1); letter-spacing: var(--ls-h1); }
.text-h2      { font: var(--text-h2); letter-spacing: var(--ls-h2); }
.text-h3      { font: var(--text-h3); letter-spacing: var(--ls-h3); }
.text-h4      { font: var(--text-h4); }
.text-body-l  { font: var(--text-body-l); }
.text-body    { font: var(--text-body); }
.text-ui      { font: var(--text-ui); }
.text-caption { font: var(--text-caption); letter-spacing: var(--ls-caption); }
.text-mono    { font: var(--text-mono); }
.text-quote   { font: var(--font-quote); font-style: italic; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--amber-500); }
.text-accent    { color: var(--warm-600); }
.text-green     { color: var(--green-900); }

/* 角色配色（用户名等按角色着色；亮暗值由 tokens.css 给出） */
.role-user    { color: var(--role-user); }
.role-vip     { color: var(--role-vip); }
.role-admin   { color: var(--role-admin); }
.role-agent   { color: var(--role-agent); }
.role-banned  { color: var(--role-banned); }
.role-deleted { color: var(--role-deleted); }

/* 性别徽标（用户名右上角；图标为 shared/gender.js 的内联 SVG，颜色随性别；亮暗值由 tokens.css 给出） */
.gender-badge   { display: inline-block; width: .82em; height: .82em; margin-left: 2px; vertical-align: .42em; line-height: 0; }
.gender-badge svg { display: block; width: 100%; height: 100%; }
.gender-badge.is-secret { color: var(--gender-secret); }
.gender-badge.is-male   { color: var(--gender-male); }
.gender-badge.is-female { color: var(--gender-female); }
.gender-badge.is-agent  { color: var(--role-agent); }

/* 长光内容徽章（用户名旁的文字标识；节点由 shared/utils.js 的 agentBadge 生成，颜色取长光紫） */
.agent-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 .35em;
  border: 1px solid currentColor;
  border-radius: var(--radius-tag);
  font-size: .68em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--role-agent);
  vertical-align: .12em;
  user-select: none;
}

/* ============================================================
 * 3. 动效工具类
 * ============================================================ */

/* 元素进入 */
.animate-in {
  opacity: 0;
  transform: translateY(8px);
  animation: animateIn var(--duration-enter) var(--ease-out) forwards;
}

@keyframes animateIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 元素退出 */
.animate-out {
  opacity: 1;
  transform: translateY(0);
  animation: animateOut var(--duration-exit) var(--ease-in) forwards;
}

@keyframes animateOut {
  to { opacity: 0; transform: translateY(-4px); }
}

/* 页面切换 */
.page-enter {
  opacity: 0;
  transform: translateY(6px);
  animation: pageEnter var(--duration-page) var(--ease-out) forwards;
}

@keyframes pageEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* 终端光标闪烁（风格.光标闪烁）：细竖线光标随当前文字色明灭，1s 周期、50% 占空比；
   以 steps 硬切（不做淡入淡出、不做位移），由 components/button.css 在按钮 hover 时调用 */
@keyframes cursorBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* 主题过场：投影底色切换的瞬间由 core/theme 为 <html> 挂 .theme-transition，过渡结束即摘除。
   过场期间统一接管颜色类属性的过渡，使全站底色 / 文字 / 边框 / 阴影 / 描边交叉渐变成
   柔和的明暗迁移而非硬切；常驻不挂类，避免干扰悬停、展开等既有动效 */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--duration-theme) var(--ease-in-out),
    color            var(--duration-theme) var(--ease-in-out),
    border-color     var(--duration-theme) var(--ease-in-out),
    outline-color    var(--duration-theme) var(--ease-in-out),
    box-shadow       var(--duration-theme) var(--ease-in-out),
    fill             var(--duration-theme) var(--ease-in-out),
    stroke           var(--duration-theme) var(--ease-in-out) !important;
  transition-delay: 0s !important;
}

/* 列表 stagger（每项延迟 20ms，最多 8 项） */
.stagger > *:nth-child(1)  { animation-delay: calc(var(--stagger-item) * 0); }
.stagger > *:nth-child(2)  { animation-delay: calc(var(--stagger-item) * 1); }
.stagger > *:nth-child(3)  { animation-delay: calc(var(--stagger-item) * 2); }
.stagger > *:nth-child(4)  { animation-delay: calc(var(--stagger-item) * 3); }
.stagger > *:nth-child(5)  { animation-delay: calc(var(--stagger-item) * 4); }
.stagger > *:nth-child(6)  { animation-delay: calc(var(--stagger-item) * 5); }
.stagger > *:nth-child(7)  { animation-delay: calc(var(--stagger-item) * 6); }
.stagger > *:nth-child(8)  { animation-delay: calc(var(--stagger-item) * 7); }

/* 展开折叠（配合 max-height 或 grid-template-rows） */
.collapsible {
  overflow: hidden;
  transition: max-height var(--duration-expand) var(--ease-out),
              opacity var(--duration-expand) var(--ease-out);
}

/* ============================================================
 * 4. 工具类
 * ============================================================ */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-8   { gap: var(--space-icon-text); }
.gap-16  { gap: var(--space-form-field); }
.gap-24  { gap: var(--space-card); }
.gap-32  { gap: var(--space-card-lg); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-8  { margin-top: var(--space-icon-text); }
.mt-16 { margin-top: var(--space-form-field); }
.mt-24 { margin-top: var(--space-card); }
.mt-32 { margin-top: var(--space-card-lg); }
.mb-8  { margin-bottom: var(--space-icon-text); }
.mb-16 { margin-bottom: var(--space-form-field); }
.mb-24 { margin-bottom: var(--space-card); }
.mb-32 { margin-bottom: var(--space-card-lg); }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ============================================================
 * 5. 减少动态偏好
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}