/* 工具类 */

/* 文本颜色 */
.text-primary   { color: var(--color-primary)!important; }
.text-secondary { color: var(--color-text-secondary)!important; }
.text-muted     { color: var(--color-text-muted)!important; }
.text-success   { color: var(--color-success)!important; }
.text-danger    { color: var(--color-danger)!important; }
.text-warning   { color: var(--color-warning)!important; }
.text-white     { color: #fff!important; }

/* 文本对齐 */
.text-left   { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right  { text-align: right!important; }

/* 字重 */
.font-normal   { font-weight: var(--font-weight-normal)!important; }
.font-medium   { font-weight: var(--font-weight-medium)!important; }
.font-semibold { font-weight: var(--font-weight-semibold)!important; }
.font-bold     { font-weight: var(--font-weight-bold)!important; }

/* 字号 */
.text-xs  { font-size: var(--font-size-xs)!important; }
.text-sm  { font-size: var(--font-size-sm)!important; }
.text-base{ font-size: var(--font-size-base)!important; }
.text-lg  { font-size: var(--font-size-lg)!important; }
.text-xl  { font-size: var(--font-size-xl)!important; }
.text-2xl { font-size: var(--font-size-2xl)!important; }

/* 背景色 */
.bg-surface  { background: var(--color-surface)!important; }
.bg-card     { background: var(--color-card)!important; }
.bg-primary  { background: var(--color-primary)!important; }
.bg-light    { background: var(--color-background)!important; }

/* 显示 */
.d-none    { display: none!important; }
.d-block   { display: block!important; }
.d-flex    { display: flex!important; }
.d-inline  { display: inline!important; }
.d-inline-flex { display: inline-flex!important; }
.d-grid    { display: grid!important; }

.flex-row    { flex-direction: row!important; }
.flex-col    { flex-direction: column!important; }
.flex-center { align-items: center!important; }
.flex-between{ justify-content: space-between!important; }
.flex-wrap   { flex-wrap: wrap!important; }
.flex-shrink-0 { flex-shrink: 0!important; }
.flex-1      { flex: 1!important; }

/* 间距 - margin */
.m-0  { margin: 0!important; }
.mt-0 { margin-top: 0!important; }
.mb-0 { margin-bottom: 0!important; }
.mt-xs { margin-top: var(--space-xs)!important; }
.mt-sm { margin-top: var(--space-sm)!important; }
.mt-md { margin-top: var(--space-md)!important; }
.mt-lg { margin-top: var(--space-lg)!important; }
.mt-xl { margin-top: var(--space-xl)!important; }
.mt-2xl{ margin-top: var(--space-2xl)!important; }
.mb-sm { margin-bottom: var(--space-sm)!important; }
.mb-md { margin-bottom: var(--space-md)!important; }
.mb-lg { margin-bottom: var(--space-lg)!important; }
.mb-xl { margin-bottom: var(--space-xl)!important; }
.mb-2xl{ margin-bottom: var(--space-2xl)!important; }
.mx-auto { margin-left: auto!important; margin-right: auto!important; }

/* 间距 - padding */
.p-md { padding: var(--space-md)!important; }
.p-lg { padding: var(--space-lg)!important; }
.pt-0 { padding-top: 0!important; }
.pb-md{ padding-bottom: var(--space-md)!important; }

/* 圆角 */
.rounded-sm  { border-radius: var(--radius-sm)!important; }
.rounded-md  { border-radius: var(--radius-md)!important; }
.rounded-lg  { border-radius: var(--radius-lg)!important; }
.rounded-full{ border-radius: var(--radius-full)!important; }

/* 阴影 */
.shadow-sm { box-shadow: var(--shadow-sm)!important; }
.shadow-md { box-shadow: var(--shadow-md)!important; }
.shadow-none { box-shadow: none!important; }

/* 边框 */
.border     { border: 1px solid var(--color-border)!important; }
.border-top { border-top: 1px solid var(--color-border)!important; }
.border-bottom { border-bottom: 1px solid var(--color-border)!important; }
.border-none { border: none!important; }

/* 宽高 */
.w-full   { width: 100%!important; }
.h-full   { height: 100%!important; }
.min-w-0  { min-width: 0!important; }

/* 溢出 */
.overflow-hidden{ overflow: hidden!important; }
.overflow-auto  { overflow: auto!important; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 位置 */
.relative { position: relative!important; }
.absolute { position: absolute!important; }

/* 响应式隐藏 */
@media (max-width: 768px) {
    .hidden-mobile { display: none!important; }
}
@media (min-width: 769px) {
    .hidden-desktop { display: none!important; }
}