/* ============================================================
   星火UI 基础样式 (Base)
   重置默认样式 + 通用工具类
   ============================================================ */

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--xh-font-family);
  font-size: var(--xh-font-size-base);
  font-weight: var(--xh-font-weight-normal);
  line-height: var(--xh-line-height-base);
  color: var(--xh-text-color);
  background-color: var(--xh-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--xh-font-weight-medium);
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--xh-text-color-link);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
}

textarea {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  resize: vertical;
}

select {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}

/* 清除浮动 */
.xh-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 文字省略 */
.xh-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xh-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xh-ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文字对齐 */
.xh-text-left { text-align: left; }
.xh-text-center { text-align: center; }
.xh-text-right { text-align: right; }

/* 文字颜色 */
.xh-text-primary { color: var(--xh-text-color); }
.xh-text-secondary { color: var(--xh-text-color-secondary); }
.xh-text-placeholder { color: var(--xh-text-color-placeholder); }
.xh-text-disabled { color: var(--xh-text-color-disabled); }
.xh-text-success { color: var(--xh-success-500); }
.xh-text-danger { color: var(--xh-danger-500); }
.xh-text-warning { color: var(--xh-warning-500); }
.xh-text-info { color: var(--xh-info-500); }

/* 显示/隐藏 */
.xh-hide { display: none !important; }
.xh-show { display: block !important; }
.xh-invisible { visibility: hidden; }

/* flex 布局 */
.xh-flex {
  display: flex;
}
.xh-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.xh-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xh-flex-1 {
  flex: 1;
  min-width: 0;
}
.xh-flex-column {
  display: flex;
  flex-direction: column;
}
.xh-align-center { align-items: center; }
.xh-justify-center { justify-content: center; }
.xh-justify-between { justify-content: space-between; }
.xh-justify-end { justify-content: flex-end; }
.xh-wrap { flex-wrap: wrap; }

/* 安全区域 */
.xh-safe-top {
  padding-top: env(safe-area-inset-top);
}
.xh-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 1px边框（移动端） */
.xh-hairline {
  position: relative;
}
.xh-hairline::after {
  content: '';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  border-top: 1px solid var(--xh-border-color);
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

/* 点击态 */
.xh-active {
  background-color: var(--xh-active-color) !important;
}