/* ============================================================================
 * WLTT Base · 样式基座层
 * ----------------------------------------------------------------------------
 * 职责：reset / 排版基座 / 无障碍 / 焦点环 / 滚动条 / 通用原子类
 * 依赖：tokens.css（必须先加载）
 * 原则：只放"基础规则"，不放业务组件样式。
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. Reset（现代 reset，保留可用语义）
 * -------------------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--wltt-font-sans);
  font-size: var(--wltt-text-md);
  line-height: var(--wltt-leading-normal);
  font-weight: var(--wltt-weight-regular);
  font-feature-settings: var(--wltt-font-feature-num);
  letter-spacing: var(--wltt-tracking-normal);
  color: var(--wltt-text-primary);
  background-color: var(--wltt-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 主题切换时全站过渡（仅颜色，避免布局抖动） */
body,
body * {
  transition:
    background-color var(--wltt-dur-base) var(--wltt-ease-standard),
    border-color var(--wltt-dur-base) var(--wltt-ease-standard),
    color var(--wltt-dur-base) var(--wltt-ease-standard);
}

/* 媒体与替换元素 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  flex-shrink: 0;
}

/* 表单继承字体 */
input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  user-select: none;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

/* 列表 */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* 表格 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 标题与段落平衡（避免孤字/断行难看） */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: var(--wltt-weight-semibold);
  line-height: var(--wltt-leading-tight);
  letter-spacing: var(--wltt-tracking-tight);
}

p {
  text-wrap: pretty;
}

/* 隐藏但可被屏读器访问 */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. 排版基座
 * -------------------------------------------------------------------------*/
h1 { font-size: var(--wltt-text-3xl); letter-spacing: var(--wltt-tracking-tighter); }
h2 { font-size: var(--wltt-text-2xl); }
h3 { font-size: var(--wltt-text-xl); }
h4 { font-size: var(--wltt-text-lg); }
h5 { font-size: var(--wltt-text-md); }
h6 {
  font-size: var(--wltt-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--wltt-tracking-wider);
  color: var(--wltt-text-tertiary);
  font-weight: var(--wltt-weight-semibold);
}

a {
  color: var(--wltt-text-brand);
  text-decoration: none;
  text-underline-offset: 0.22em;
  transition: var(--wltt-transition-colors);
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

code,
kbd,
samp,
pre {
  font-family: var(--wltt-font-mono);
  font-size: 0.92em;
  font-feature-settings: "liga" 1, "calt" 1;
}

code {
  padding: 0.12em 0.36em;
  border-radius: var(--wltt-radius-xs);
  background: var(--wltt-surface-sunken);
  border: 1px solid var(--wltt-border-subtle);
}

pre {
  padding: var(--wltt-space-4);
  border-radius: var(--wltt-radius-md);
  background: var(--wltt-surface-sunken);
  border: 1px solid var(--wltt-border-subtle);
  overflow-x: auto;
  line-height: var(--wltt-leading-snug);
}

pre code {
  padding: 0;
  border: none;
  background: none;
}

/* 数字：等宽表格数字，避免数值跳动 */
.wltt-num {
  font-family: var(--wltt-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--wltt-tracking-tight);
}

.hr,
hr {
  height: 1px;
  border: none;
  background: var(--wltt-border-subtle);
}

blockquote {
  padding-left: var(--wltt-space-4);
  border-left: var(--wltt-stroke-medium) solid var(--wltt-border-brand);
  color: var(--wltt-text-secondary);
}

::selection {
  background: oklch(64.1% 0.148 248 / 0.24);
  color: var(--wltt-text-primary);
}

/* ---------------------------------------------------------------------------
 * 3. 无障碍
 * -------------------------------------------------------------------------*/
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--wltt-space-2);
  left: var(--wltt-space-2);
  z-index: var(--wltt-z-tooltip);
  padding: var(--wltt-space-2) var(--wltt-space-4);
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-default);
  border-radius: var(--wltt-radius-sm);
  box-shadow: var(--wltt-shadow-md);
  transform: translateY(calc(-100% - var(--wltt-space-4)));
  transition: transform var(--wltt-dur-base) var(--wltt-ease-out-expo);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * 4. 焦点环：键盘可见、鼠标不打扰（:focus-visible）
 * 双层焦点环（内白环 + 外品牌环）在任意底色上都高清可见。
 * -------------------------------------------------------------------------*/
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--wltt-border-focus);
  outline-offset: 2px;
  border-radius: var(--wltt-radius-xs);
}

.wltt-focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--wltt-surface-raised),
    0 0 0 4px var(--wltt-border-focus);
}

/* ---------------------------------------------------------------------------
 * 5. 滚动条：细、低存在感、hover 才显色
 * -------------------------------------------------------------------------*/
* {
  scrollbar-width: thin;
  scrollbar-color: var(--wltt-border-strong) transparent;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--wltt-border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--wltt-radius-full);
  transition: background-color var(--wltt-dur-base) var(--wltt-ease-standard);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wltt-text-tertiary);
  background-clip: content-box;
}

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

/* ---------------------------------------------------------------------------
 * 6. 布局容器与栅格
 * -------------------------------------------------------------------------*/
.wltt-container {
  width: 100%;
  max-width: var(--wltt-container-max);
  margin-inline: auto;
  padding-inline: var(--wltt-gutter);
}

.wltt-container--lg { max-width: var(--wltt-container-lg); }
.wltt-container--md { max-width: var(--wltt-container-md); }
.wltt-container--sm { max-width: var(--wltt-container-sm); }

.wltt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wltt-stack-normal);
}

.wltt-stack--tight { gap: var(--wltt-stack-tight); }
.wltt-stack--loose { gap: var(--wltt-stack-loose); }

.wltt-row {
  display: flex;
  align-items: center;
  gap: var(--wltt-gap-inline-md);
}

.wltt-row--between {
  justify-content: space-between;
}

.wltt-row--wrap {
  flex-wrap: wrap;
}

.wltt-grid {
  display: grid;
  gap: var(--wltt-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
}

.wltt-divider {
  height: 1px;
  background: var(--wltt-border-subtle);
  border: none;
  margin-block: var(--wltt-space-6);
}

/* ---------------------------------------------------------------------------
 * 7. 通用原子类（最小必要集，复杂样式走组件层）
 * -------------------------------------------------------------------------*/
.wltt-surface {
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-subtle);
  border-radius: var(--wltt-radius-lg);
  box-shadow: var(--wltt-shadow-sm);
}

.wltt-surface--sunken {
  background: var(--wltt-surface-sunken);
  box-shadow: none;
}

.wltt-text-secondary { color: var(--wltt-text-secondary); }
.wltt-text-tertiary  { color: var(--wltt-text-tertiary); }
.wltt-text-brand     { color: var(--wltt-text-brand); }
.wltt-text-xs        { font-size: var(--wltt-text-xs); }
.wltt-text-sm        { font-size: var(--wltt-text-sm); }
.wltt-text-lg        { font-size: var(--wltt-text-lg); }

.wltt-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wltt-clamp-2,
.wltt-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wltt-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.wltt-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------------------------------------------------------------------------
 * 8. 动效工具类
 * -------------------------------------------------------------------------*/
@keyframes wltt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wltt-rise-in {
  from { opacity: 0; transform: translateY(var(--wltt-shift-md)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wltt-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wltt-slide-in-right {
  from { opacity: 0; transform: translateX(var(--wltt-shift-xl)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes wltt-shimmer {
  from { background-position: -180% 0; }
  to   { background-position: 180% 0; }
}

@keyframes wltt-spin {
  to { transform: rotate(360deg); }
}

@keyframes wltt-pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.wltt-anim-fade-in {
  animation: wltt-fade-in var(--wltt-dur-slow) var(--wltt-ease-out-expo) both;
}

.wltt-anim-rise-in {
  animation: wltt-rise-in var(--wltt-dur-slower) var(--wltt-ease-out-expo) both;
}

.wltt-anim-scale-in {
  animation: wltt-scale-in var(--wltt-dur-base) var(--wltt-ease-spring) both;
}

/* 列表逐项进场（配合 style="--wltt-i: n" 使用，50ms 递进） */
.wltt-anim-stagger > * {
  animation: wltt-rise-in var(--wltt-dur-slower) var(--wltt-ease-out-expo) both;
  animation-delay: calc(var(--wltt-i, 0) * 50ms);
}

/* 骨架屏 */
.wltt-skeleton {
  background:
    linear-gradient(
      90deg,
      var(--wltt-surface-sunken) 0%,
      var(--wltt-surface-raised) 42%,
      var(--wltt-surface-sunken) 84%
    );
  background-size: 220% 100%;
  animation: wltt-shimmer 1.6s var(--wltt-ease-linear) infinite;
  border-radius: var(--wltt-radius-sm);
  color: transparent;
}

.wltt-spinner {
  width: 1em;
  height: 1em;
  border: 2px solid var(--wltt-border-default);
  border-top-color: var(--wltt-border-focus);
  border-radius: var(--wltt-radius-full);
  animation: wltt-spin 720ms var(--wltt-ease-linear) infinite;
}

/* 按压反馈：所有可点元素统一 -1px 下沉 */
.wltt-pressable {
  transition:
    transform var(--wltt-dur-fast) var(--wltt-ease-standard),
    box-shadow var(--wltt-dur-base) var(--wltt-ease-standard),
    background-color var(--wltt-dur-fast) var(--wltt-ease-standard);
}

.wltt-pressable:hover { transform: translateY(-1px); }

.wltt-pressable:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--wltt-dur-instant);
}

/* ---------------------------------------------------------------------------
 * 9. 降级：尊重系统偏好
 * -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 打印 */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .wltt-no-print {
    display: none !important;
  }
}