/*
* @source: https://blog.51cto.com/u_14587/14273698
* @source: https://cloud.tencent.com/developer/article/1963495
* h1{width: 50%; height: 30px; margin: 10px auto; text-align: center;} 
*
*/

:root {
  /* 1. main */
  --changee-bg: hsla(154, 84%, 58%, 0.4); /* changed backgroud */
  --primary-color: #1890ff; /* 主色（如品牌蓝） */
  --primary-dark: #1761a0; /* 主色深色版（hover/选中状态） */
  --primary-light: #40a9ff; /* 主色浅色版（背景/边框） */

  /* 2. 辅助色：功能型颜色，对应不同交互反馈 */
  --secondary-color: rgb(252, 228, 232); /* 次要强调色（如特殊标签） */
  --accent-color: #5ad6ff; /* 点缀色（如图标/高亮） */
  --warning-color: #faad14; /* 警告色（如提示/待处理） */
  --success-color: #099902; /* 成功色（如操作成功提示） */
  --error-color: #ff4d4f; /* 错误色（如表单验证失败） */
  --info-color: #1890ff; /* 信息色（如说明文本） */

  /* 3. font size color */
  --user-line: #1fb7d9; /* top line color */
  --user-change: hsla(210, 97%, 57%, 0.9); /* must be changed font color */
  --white: #ffffff;
  --black: #000000;
  --gray-50: #fafafa; /* page background color */
  --gray-100: #f5f5f5; /* 浅灰（卡片背景） */
  --gray-200: #e8e8e8; /* 中浅灰（分割线） */
  --gray-300: #d9d9d9; /* 中灰（边框） */
  --gray-400: #bfbfbf; /* 中深灰（禁用状态文字） */
  --gray-500: #8c8c8c; /* 深灰（次要文字） */
  --gray-600: #595959; /* 更深灰（正文辅助文字） */
  --gray-700: #434343; /* 近黑灰（主要文字） */
  --gray-800: #262626; /* 极深灰（标题文字） */
  --gray-900: #1f1f1f; /* 接近黑色（重点标题） */

  /* 4. text color class level ,aim to make clear */
  --text-main: hsla(0, 2%, 66%, 0.87); /* maint  e.o: title and body */
  --text-primary: #262626; /* maint  e.o: title and body */
  --text-secondary: #595959; /* 次要文字（说明/备注） */
  --text-tertiary: #8c8c8c; /* 辅助文字（辅助信息） */
  --text-inverse: #ffffff; /* 反色文字（深色背景上的文字） */

  /* 5. background color by theme */
  --bg-self: hsla(15, 2%, 47%, 0.1);
  --bg-primary: rgba(241, 237, 238, 0.3); /* page main part */
  --bg-secondary: #fafafa; /* 次要背景（卡片/模块） */
  --bg-tertiary: #f5f5f5; /* 第三级背景（输入框/按钮） */
  --bg-theme: hsla(240, 14%, 83%, 0.7); /* subject theme */
  --bg-slide:  rgba(237, 238, 236, 0.845); /* slide show box */

  /* 6. border */
  --border-item: 1px solid grey;
  --border-color: #d9d9d9; /* define */
  --border-light: #f0f0f0; /* 浅色边框（如卡片内部分割） */
  --border-dark: #434343; /* 深色边框（特殊强调） */
  --border-img: hsla(30, 4%, 11%, 0.5); /* only use image*/

  /* 7. shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03); /* light(button) */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* midium(card) */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* strong(alert widow) */

  /* 8. radium size */
  --radius-sm: 4px; /* buton input */
  --radius-md: 8px; /* card model */
  --radius-lg: 12px; /* alert widow, image */
  --radius-full: 9999px; /* circle  */

  /* 9. space size*/
  --space-top: 10px;
  --space-grid: 10px;
  --space-item: 20px;
  --space-1: 4px; /* tiny sapce */
  --space-2: 8px; /* 小间距（按钮内边距） */
  --space-3: 12px; /* 中小组件间距（表单元素） */
  --space-4: 16px; /* 基础间距（卡片内边距） */
  --space-6: 24px; /* 模块间距（页面分区） */
  --space-8: 32px; /* 大间距（页面头部） */

  /* 10. font size by session */
  --siz-tiny: 12px; /* tiny use cite  */
  --text-xs: 12px; /* tiny use cite  */
  --text-sm: 14px; /* mini font  */
  --text-base: 16px; /* base  text body part */
  --text-lg: 18px; /* 大文字（次级标题） */
  --text-xl: 20px; /* 更大文字（一级标题） */
  --text-2xl: 24px; /* 极大文字（页面主标题） */

  /* 11. font weight rank by important */
  --font-light: 300; /* light asissant */
  --font-normal: 400; /* normal */
  --font-medium: 500; /* middle（次级标题） */
  --font-bold: 700; /* 加粗（一级标题） */

  --letter-space-1: 1px;
  --letter-space-2: 2px;
  --letter-space-3: 2px;

  /* 12. 过渡动画：统一动画速度，避免突兀 */
  --transition-normal: 0.3s ease-in-out; /* 基础动画（hover/切换） */

  /* 13. 层级：控制元素叠加顺序，避免遮挡 */
  --z-modal: 1050; /* 弹窗层级（最高） */
  --z-fixed: 1030; /* 固定导航层级 */
  --z-normal: 1; /* 普通元素层级 */

  /* 14. 响应式断点：统一屏幕尺寸分界 */
  --breakpoint-sm: 576px; /* 小屏幕（手机） */
  --breakpoint-md: 768px; /* 中等屏幕（平板） */
  --breakpoint-lg: 992px; /* 大屏幕（电脑） */


  /* 15. input stype */
  --input-text-width: 97%;
  --input-text-height: 35px;
}

/* 深色主题：只需重定义差异变量，其他沿用上面 */
[data-theme="dark"] {
  --text-primary: #ffffff; /* 深色模式下文字变白 */
  --bg-primary: #1f1f1f; /* 深色模式下背景变深 */
  --bg-secondary: #262626; /* 深色模式下卡片背景 */
  --border-color: #434343; /* 深色模式下边框变深 */
}

/* 标题样式 */
.page-title {
  font-size: var(--text-2xl); /* 电脑上用24px */
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  font-weight: var(--font-bold);
}

/* 卡片样式 */
.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* 当屏幕宽度小于768px（平板/手机）时 */
@media (max-width: var(--breakpoint-md)) {
  .page-title {
    font-size: var(--text-xl); /* 手机上用20px */
    margin-bottom: var(--space-4); /* 间距也缩小 */
  }

  .card {
    padding: var(--space-4); /* 卡片内边距缩小 */
    margin: var(--space-2); /* 卡片间距缩小 */
  }
}

/* 当屏幕宽度小于576px（手机）时 */
@media (max-width: var(--breakpoint-sm)) {
  .page-title {
    font-size: var(--text-lg); /* 手机主标题更小 */
    text-align: center; /* 居中显示 */
  }
}