/**
 * base.css
 * 全站基础样式 - CSS 变量定义和标签重置
 * 包含：深色主题配色、蓝色高亮、金币黄色、基础标签重置
 */

/* ===== CSS 变量定义 ===== */
:root {
  /* === 主题色系 - 深色背景 === */
  --color-bg-primary: #0B0F19;        /* 主背景色 - 深蓝黑色 */
  --color-bg-secondary: #141824;      /* 次级背景色 - 稍浅的深蓝色 */
  --color-bg-tertiary: #1A1F2E;       /* 三级背景色 - 卡片/面板背景 */
  --color-bg-elevated: #1F2937;       /* 悬浮元素背景 - 更浅一层 */

  /* === 文字颜色 === */
  --color-text-primary: #F9FAFB;      /* 主文字颜色 - 接近白色 */
  --color-text-secondary: #D1D5DB;    /* 次级文字颜色 - 浅灰色 */
  --color-text-tertiary: #9CA3AF;     /* 三级文字颜色 - 中灰色 */
  --color-text-muted: #6B7280;        /* 弱化文字颜色 - 深灰色 */

  /* === 蓝色高亮色系 === */
  --color-primary: #3B82F6;           /* 主蓝色 - 按钮、链接 */
  --color-primary-hover: #2563EB;     /* 主蓝色悬停态 - 更深 */
  --color-primary-active: #1D4ED8;    /* 主蓝色激活态 - 最深 */
  --color-primary-light: #60A5FA;     /* 浅蓝色 - 辅助元素 */
  --color-primary-dark: #1E40AF;      /* 深蓝色 - 阴影/边框 */

  /* === 青色科技感色系 === */
  --color-cyan: #00FFFF;              /* 青色 - 科技感高亮 */
  --color-cyan-glow: rgba(0, 255, 255, 0.7);  /* 青色发光效果 */
  --color-cyan-dim: rgba(0, 255, 255, 0.3);   /* 青色暗淡效果 */

  /* === 金币黄色色系 === */
  --color-gold: #FCD34D;              /* 金币黄色 - 积分/货币 */
  --color-gold-hover: #FBBF24;        /* 金币黄色悬停态 */
  --color-gold-light: #FDE68A;        /* 浅金色 - 高光 */
  --color-gold-dark: #F59E0B;         /* 深金色 - 阴影 */

  /* === 状态颜色 === */
  --color-success: #10B981;           /* 成功绿色 */
  --color-warning: #F59E0B;           /* 警告橙色 */
  --color-error: #EF4444;             /* 错误红色 */
  --color-info: #3B82F6;              /* 信息蓝色 */

  /* === 边框颜色 === */
  --color-border-primary: rgba(255, 255, 255, 0.1);   /* 主边框 - 半透明白 */
  --color-border-secondary: rgba(255, 255, 255, 0.05); /* 次级边框 - 更透明 */
  --color-border-focus: var(--color-primary);          /* 聚焦边框 - 蓝色 */

  /* === 阴影 === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);          /* 小阴影 */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);          /* 中阴影 */
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);        /* 大阴影 */
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);        /* 超大阴影 */
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.5);    /* 蓝色发光阴影 */
  --shadow-glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5); /* 青色发光阴影 */

  /* === 圆角 === */
  --radius-sm: 4px;                   /* 小圆角 */
  --radius-md: 8px;                   /* 中圆角 */
  --radius-lg: 12px;                  /* 大圆角 */
  --radius-xl: 16px;                  /* 超大圆角 */
  --radius-full: 9999px;              /* 完全圆角 */

  /* === 间距 === */
  --spacing-xs: 4px;                  /* 超小间距 */
  --spacing-sm: 8px;                  /* 小间距 */
  --spacing-md: 16px;                 /* 中间距 */
  --spacing-lg: 24px;                 /* 大间距 */
  --spacing-xl: 32px;                 /* 超大间距 */
  --spacing-2xl: 48px;                /* 2倍超大间距 */

  /* === 字体大小 === */
  --font-size-xs: 12px;               /* 超小字体 */
  --font-size-sm: 14px;               /* 小字体 */
  --font-size-base: 16px;             /* 基础字体 */
  --font-size-lg: 18px;               /* 大字体 */
  --font-size-xl: 20px;               /* 超大字体 */
  --font-size-2xl: 24px;              /* 2倍超大字体 */
  --font-size-3xl: 30px;              /* 3倍超大字体 */

  /* === 字体粗细 === */
  --font-weight-normal: 400;          /* 正常粗细 */
  --font-weight-medium: 500;          /* 中等粗细 */
  --font-weight-semibold: 600;        /* 半粗体 */
  --font-weight-bold: 700;            /* 粗体 */

  /* === 过渡动画 === */
  --transition-fast: 150ms ease;      /* 快速过渡 */
  --transition-base: 300ms ease;      /* 基础过渡 */
  --transition-slow: 500ms ease;      /* 慢速过渡 */

  /* === Z-index 层级 === */
  --z-index-dropdown: 1000;           /* 下拉菜单层级 */
  --z-index-modal: 2000;              /* 模态框层级 */
  --z-index-tooltip: 3000;            /* 提示框层级 */
  --z-index-notification: 4000;       /* 通知层级 */
}

/* ===== 基础标签重置 ===== */

/* 全局盒模型重置 - 使用 border-box 更易于计算尺寸 */
*, *::before, *::after {
  box-sizing: border-box;             /* 边框和内边距包含在宽高内 */
  margin: 0;                          /* 重置外边距 */
  padding: 0;                         /* 重置内边距 */
}

/* HTML 根元素 */
html {
  font-size: 16px;                    /* 基础字体大小 */
  line-height: 1.5;                   /* 行高 */
  -webkit-font-smoothing: antialiased; /* macOS/iOS 字体平滑 */
  -moz-osx-font-smoothing: grayscale;  /* Firefox 字体平滑 */
  text-rendering: optimizeLegibility;  /* 优化文本渲染 */
}

/* Body 主体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* 系统字体栈 */
  background-color: var(--color-bg-primary);  /* 主背景色 */
  color: var(--color-text-primary);   /* 主文字颜色 */
  overflow-x: hidden;                 /* 隐藏横向滚动条 */
  min-height: 100vh;                  /* 最小高度为视口高度 */
}

/* 标题标签重置 */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  line-height: 1.2;                   /* 紧凑行高 */
  color: var(--color-text-primary);   /* 主文字颜色 */
}

/* 段落标签 */
p {
  line-height: 1.6;                   /* 舒适的行高 */
  color: var(--color-text-secondary); /* 次级文字颜色 */
}

/* 链接标签 */
a {
  color: var(--color-primary);        /* 蓝色链接 */
  text-decoration: none;              /* 去除下划线 */
  transition: color var(--transition-fast); /* 颜色过渡动画 */
}

a:hover {
  color: var(--color-primary-hover);  /* 悬停时变深 */
}

a:active {
  color: var(--color-primary-active); /* 激活时更深 */
}

/* 按钮标签 */
button {
  font-family: inherit;               /* 继承字体 */
  font-size: inherit;                 /* 继承字体大小 */
  line-height: inherit;               /* 继承行高 */
  cursor: pointer;                    /* 鼠标指针 */
  border: none;                       /* 去除默认边框 */
  background: none;                   /* 去除默认背景 */
  color: inherit;                     /* 继承颜色 */
  padding: 0;                         /* 去除默认内边距 */
}

button:disabled {
  cursor: not-allowed;                /* 禁用时的鼠标样式 */
  opacity: 0.5;                       /* 禁用时半透明 */
}

/* 输入框标签 */
input, textarea, select {
  font-family: inherit;               /* 继承字体 */
  font-size: inherit;                 /* 继承字体大小 */
  line-height: inherit;               /* 继承行高 */
  color: inherit;                     /* 继承颜色 */
  border: 1px solid var(--color-border-primary); /* 边框 */
  background-color: var(--color-bg-secondary);   /* 背景色 */
  border-radius: var(--radius-md);    /* 圆角 */
  padding: var(--spacing-sm) var(--spacing-md);  /* 内边距 */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); /* 过渡动画 */
}

input:focus, textarea:focus, select:focus {
  outline: none;                      /* 去除默认聚焦轮廓 */
  border-color: var(--color-border-focus); /* 聚焦时蓝色边框 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* 聚焦时外发光 */
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);     /* 占位符颜色 */
  opacity: 1;                         /* 确保占位符不透明 */
}

/* 列表标签 */
ul, ol {
  list-style: none;                   /* 去除默认列表样式 */
}

/* 图片标签 */
img {
  max-width: 100%;                    /* 响应式图片 */
  height: auto;                       /* 保持宽高比 */
  display: block;                     /* 块级元素 */
}

/* 表格标签 */
table {
  border-collapse: collapse;          /* 合并边框 */
  border-spacing: 0;                  /* 去除单元格间距 */
  width: 100%;                        /* 全宽 */
}

/* 水平分割线 */
hr {
  border: none;                       /* 去除默认边框 */
  border-top: 1px solid var(--color-border-secondary); /* 顶部边框 */
  margin: var(--spacing-lg) 0;        /* 上下间距 */
}

/* 代码标签 */
code, pre {
  font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
  background-color: var(--color-bg-tertiary);     /* 背景色 */
  border-radius: var(--radius-sm);    /* 小圆角 */
  padding: 2px 6px;                   /* 内边距 */
  font-size: 0.9em;                   /* 稍小的字体 */
}

pre {
  padding: var(--spacing-md);         /* 代码块内边距 */
  overflow-x: auto;                   /* 横向滚动 */
  line-height: 1.5;                   /* 行高 */
}

/* 滚动条样式（仅 Webkit 浏览器） */
::-webkit-scrollbar {
  width: 8px;                         /* 滚动条宽度 */
  height: 8px;                        /* 滚动条高度 */
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary); /* 滚动条轨道背景 */
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);  /* 滚动条滑块背景 */
  border-radius: var(--radius-full);     /* 圆角滑块 */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);   /* 悬停时滑块颜色 */
}

/* 选中文本样式 */
::selection {
  background-color: var(--color-primary); /* 选中背景色 */
  color: white;                       /* 选中文字颜色 */
}

::-moz-selection {
  background-color: var(--color-primary); /* Firefox 选中背景色 */
  color: white;                       /* Firefox 选中文字颜色 */
}