/* Deotaland UI 全局样式 */

/* 导入基础样式 */
@import './base.css';

/* CSS 变量定义 */
:root {
  /* 主色调 */
  --primary-color: #409eff;
  --primary-light: #66b1ff;
  --primary-dark: #3a8ee6;
  --primary-lighter: #d9ecff;
  
  /* 辅助色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
  
  /* 文字颜色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;
  --text-disabled: #c0c4cc;
  
  /* 背景色 */
  --bg-color: #ffffff;
  --bg-light: #fafafa;
  --bg-lighter: #f5f7fa;
  --bg-dark: #f0f2f5;
  
  /* 边框颜色 */
  --border-color: #dcdfe6;
  --border-light: #e4e7ed;
  --border-lighter: #ebeef5;
  --border-extra-light: #f2f6fc;
  
  /* 阴影 */
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.04);
  
  /* 字体大小 */
  --font-size-extra-large: 20px;
  --font-size-large: 18px;
  --font-size-medium: 16px;
  --font-size-base: 14px;
  --font-size-small: 13px;
  --font-size-extra-small: 12px;
  
  /* 间距 */
  --spacing-extra-small: 4px;
  --spacing-small: 8px;
  --spacing-base: 16px;
  --spacing-large: 24px;
  --spacing-extra-large: 32px;
  
  /* 圆角 */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-large: 8px;
  --border-radius-extra-large: 12px;
  
  /* 过渡 */
  --transition-duration: 0.3s;
  --transition-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* z-index */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1010;
  --z-index-fixed: 1020;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-loading: 1080;
}

/* 暗色主题 */
:root.dark {
  --primary-color: #409eff;
  --primary-light: #66b1ff;
  --primary-dark: #3a8ee6;
  --primary-lighter: #19324c;
  
  --text-primary: #e4e7ed;
  --text-regular: #cfcfcf;
  --text-secondary: #a3a6ad;
  --text-placeholder: #6c6e72;
  --text-disabled: #585c63;
  
  --bg-color: #141414;
  --bg-light: #1f1f1f;
  --bg-lighter: #262727;
  --bg-dark: #0f0f0f;
  
  --border-color: #4c4d4f;
  --border-light: #414243;
  --border-lighter: #363637;
  --border-extra-light: #2b2b2c;
  
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.2);
  --shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.3);
}

/* 高对比度主题 */
:root.high-contrast {
  --primary-color: #0066cc;
  --text-primary: #000000;
  --text-regular: #000000;
  --bg-color: #ffffff;
  --bg-light: #ffffff;
  --border-color: #000000;
}

/* 全局组件样式重置 */
.deotaland-button {
  font-family: inherit;
  transition: all var(--transition-duration) var(--transition-function);
}

.deotaland-card {
  font-family: inherit;
  transition: all var(--transition-duration) var(--transition-function);
}

.deotaland-modal {
  font-family: inherit;
  transition: all var(--transition-duration) var(--transition-function);
}

.deotaland-loading {
  font-family: inherit;
  transition: all var(--transition-duration) var(--transition-function);
}

/* 全局实用工具类 */
.text-primary {
  color: var(--text-primary) !important;
}

.text-regular {
  color: var(--text-regular) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-placeholder {
  color: var(--text-placeholder) !important;
}

.text-success {
  color: var(--success-color) !important;
}

.text-warning {
  color: var(--warning-color) !important;
}

.text-danger {
  color: var(--danger-color) !important;
}

.text-info {
  color: var(--info-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-light {
  background-color: var(--bg-light) !important;
}

.bg-lighter {
  background-color: var(--bg-lighter) !important;
}

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

.border-light {
  border: 1px solid var(--border-light) !important;
}

.border-lighter {
  border: 1px solid var(--border-lighter) !important;
}

.border-primary {
  border: 1px solid var(--primary-color) !important;
}

/* 圆角样式 */
.rounded {
  border-radius: var(--border-radius-base) !important;
}

.rounded-sm {
  border-radius: var(--border-radius-small) !important;
}

.rounded-lg {
  border-radius: var(--border-radius-large) !important;
}

.rounded-xl {
  border-radius: var(--border-radius-extra-large) !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

/* 阴影样式 */
.shadow {
  box-shadow: var(--shadow-base) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-light) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-dark) !important;
}

/* 间距工具类 */
.m-1 { margin: var(--spacing-extra-small) !important; }
.m-2 { margin: var(--spacing-small) !important; }
.m-3 { margin: var(--spacing-base) !important; }
.m-4 { margin: var(--spacing-large) !important; }
.m-5 { margin: var(--spacing-extra-large) !important; }

.mt-1 { margin-top: var(--spacing-extra-small) !important; }
.mt-2 { margin-top: var(--spacing-small) !important; }
.mt-3 { margin-top: var(--spacing-base) !important; }
.mt-4 { margin-top: var(--spacing-large) !important; }
.mt-5 { margin-top: var(--spacing-extra-large) !important; }

.mr-1 { margin-right: var(--spacing-extra-small) !important; }
.mr-2 { margin-right: var(--spacing-small) !important; }
.mr-3 { margin-right: var(--spacing-base) !important; }
.mr-4 { margin-right: var(--spacing-large) !important; }
.mr-5 { margin-right: var(--spacing-extra-large) !important; }

.mb-1 { margin-bottom: var(--spacing-extra-small) !important; }
.mb-2 { margin-bottom: var(--spacing-small) !important; }
.mb-3 { margin-bottom: var(--spacing-base) !important; }
.mb-4 { margin-bottom: var(--spacing-large) !important; }
.mb-5 { margin-bottom: var(--spacing-extra-large) !important; }

.ml-1 { margin-left: var(--spacing-extra-small) !important; }
.ml-2 { margin-left: var(--spacing-small) !important; }
.ml-3 { margin-left: var(--spacing-base) !important; }
.ml-4 { margin-left: var(--spacing-large) !important; }
.ml-5 { margin-left: var(--spacing-extra-large) !important; }

.p-1 { padding: var(--spacing-extra-small) !important; }
.p-2 { padding: var(--spacing-small) !important; }
.p-3 { padding: var(--spacing-base) !important; }
.p-4 { padding: var(--spacing-large) !important; }
.p-5 { padding: var(--spacing-extra-large) !important; }

.pt-1 { padding-top: var(--spacing-extra-small) !important; }
.pt-2 { padding-top: var(--spacing-small) !important; }
.pt-3 { padding-top: var(--spacing-base) !important; }
.pt-4 { padding-top: var(--spacing-large) !important; }
.pt-5 { padding-top: var(--spacing-extra-large) !important; }

.pr-1 { padding-right: var(--spacing-extra-small) !important; }
.pr-2 { padding-right: var(--spacing-small) !important; }
.pr-3 { padding-right: var(--spacing-base) !important; }
.pr-4 { padding-right: var(--spacing-large) !important; }
.pr-5 { padding-right: var(--spacing-extra-large) !important; }

.pb-1 { padding-bottom: var(--spacing-extra-small) !important; }
.pb-2 { padding-bottom: var(--spacing-small) !important; }
.pb-3 { padding-bottom: var(--spacing-base) !important; }
.pb-4 { padding-bottom: var(--spacing-large) !important; }
.pb-5 { padding-bottom: var(--spacing-extra-large) !important; }

.pl-1 { padding-left: var(--spacing-extra-small) !important; }
.pl-2 { padding-left: var(--spacing-small) !important; }
.pl-3 { padding-left: var(--spacing-base) !important; }
.pl-4 { padding-left: var(--spacing-large) !important; }
.pl-5 { padding-left: var(--spacing-extra-large) !important; }

/* 字体大小工具类 */
.text-xs { font-size: var(--font-size-extra-small) !important; }
.text-sm { font-size: var(--font-size-small) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-medium) !important; }
.text-xl { font-size: var(--font-size-large) !important; }
.text-2xl { font-size: var(--font-size-extra-large) !important; }

/* 字体粗细工具类 */
.font-thin { font-weight: 100 !important; }
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* 隐藏工具类 */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

/* 定位工具类 */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* 溢出工具类 */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

/* 透明度工具类 */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* 指针事件工具类 */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* 用户选择工具类 */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }

/* 平滑滚动 */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* 触摸优化 */
.touch-optimized {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* Focus visible 支持 */
.focus-visible:focus {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}

/* 媒体查询工具类 - 移动端 */
@media (max-width: 767px) {
  .mobile\:hidden {
    display: none !important;
  }
  
  .mobile\:block {
    display: block !important;
  }
  
  .mobile\:flex {
    display: flex !important;
  }
  
  .mobile\:text-center {
    text-align: center !important;
  }
}

/* 媒体查询工具类 - 平板端 */
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet\:hidden {
    display: none !important;
  }
  
  .tablet\:block {
    display: block !important;
  }
  
  .tablet\:flex {
    display: flex !important;
  }
}

/* 媒体查询工具类 - 桌面端 */
@media (min-width: 1024px) {
  .desktop\:hidden {
    display: none !important;
  }
  
  .desktop\:block {
    display: block !important;
  }
  
  .desktop\:flex {
    display: flex !important;
  }
}