/* 
 * 统一主题颜色变量定义
 * 黑白灰主题配色方案
 */

:root {
  /* 主色调 - 黑白灰色系 */
  --wb-primary: #2c2c2c;           /* 主色 - 深灰 */
  --wb-primary-dark: #1a1a1a;      /* 主色深色 - 深黑 */
  --wb-primary-light: #4a4a4a;     /* 主色浅色 - 中灰 */
  --wb-primary-hover: #3a3a3a;     /* 主色悬停 */
  
  /* 辅助色 - 中性灰色 */
  --wb-secondary: #5a5a5a;          /* 辅助色 - 中灰 */
  --wb-secondary-dark: #4a4a4a;     /* 辅助色深色 */
  --wb-secondary-light: #6a6a6a;   /* 辅助色浅色 */
  
  /* 强调色 */
  --wb-accent: #666666;             /* 强调色 - 浅灰 */
  --wb-accent-hover: #555555;      /* 强调色悬停 */
  
  /* 文字颜色 */
  --wb-text-primary: #2c2c2c;      /* 主文字颜色 - 深灰 */
  --wb-text-secondary: #666666;    /* 次要文字颜色 - 中灰 */
  --wb-text-light: #999999;        /* 淡文字颜色 - 浅灰 */
  --wb-text-white: #ffffff;        /* 白色文字 */
  
  /* 背景颜色 */
  --wb-bg-primary: #ffffff;        /* 主背景色 - 纯白 */
  --wb-bg-secondary: #f8f8f8;      /* 次要背景色 - 浅灰背景 */
  --wb-bg-light: #f0f0f0;          /* 浅背景色 - 更浅灰 */
  --wb-bg-dark: #2c2c2c;           /* 深背景色 - 深灰 */
  
  /* 边框颜色 */
  --wb-border-light: #e0e0e0;      /* 浅边框 */
  --wb-border: #d0d0d0;            /* 标准边框 */
  --wb-border-dark: #c0c0c0;       /* 深边框 */
  
  /* 状态颜色 - 保持灰度化 */
  --wb-success: #5a5a5a;            /* 成功 - 中灰 */
  --wb-warning: #777777;            /* 警告 - 中深灰 */
  --wb-error: #4a4a4a;              /* 错误 - 深灰 */
  --wb-info: #666666;               /* 信息 - 灰色 */
  
  /* 阴影 */
  --wb-shadow-small: 0 1px 3px rgba(0,0,0,0.05);
  --wb-shadow-medium: 0 3px 6px rgba(0,0,0,0.08);
  --wb-shadow-large: 0 10px 20px rgba(0,0,0,0.1);
  
  /* 过渡动画 */
  --wb-transition: all 0.3s ease;
  
  /* 圆角 */
  --wb-radius-small: 4px;
  --wb-radius-medium: 6px;
  --wb-radius-large: 8px;
  
  /* 兼容旧变量 */
  --wb-theme-color: var(--wb-primary);
  --wb-theme-hover-color: var(--wb-primary-hover);
  --wb-aux-color: var(--wb-secondary);
  --wb-fcs: var(--wb-text-primary);
  --wb-bfc: var(--wb-text-secondary);
  --wb-wk: var(--wb-text-light);
  --wb-wke: var(--wb-border);
  --wb-bgc: var(--wb-bg-secondary);
  --wb-bgcl: var(--wb-bg-primary);
  --wb-bbc: var(--wb-border-light);
  --wb-bfs: 14px;
}

/* 深色模式支持 - 黑白灰主题 */
@media (prefers-color-scheme: dark) {
  :root {
    --wb-primary: #cccccc;
    --wb-primary-dark: #b0b0b0;
    --wb-primary-light: #e0e0e0;
    --wb-primary-hover: #d0d0d0;
    
    --wb-text-primary: #e0e0e0;
    --wb-text-secondary: #b0b0b0;
    --wb-text-light: #888888;
    
    --wb-bg-primary: #1a1a1a;
    --wb-bg-secondary: #2c2c2c;
    --wb-bg-light: #3a3a3a;
    --wb-bg-dark: #0f0f0f;
    
    --wb-border-light: #3a3a3a;
    --wb-border: #4a4a4a;
    --wb-border-dark: #5a5a5a;
  }
}

/* 全局简约风格设置 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 链接默认样式 */
a {
  color: var(--wb-primary);
  text-decoration: none;
  transition: var(--wb-transition);
}

a:hover {
  color: var(--wb-primary-hover);
}

/* 按钮基础样式 */
.btn,
button,
input[type="submit"],
input[type="button"] {
  background-color: var(--wb-primary);
  color: var(--wb-text-white);
  border: none;
  border-radius: var(--wb-radius-medium);
  padding: 10px 20px;
  transition: var(--wb-transition);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--wb-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--wb-shadow-medium);
}

/* 输入框样式 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-small);
  padding: 8px 12px;
  background-color: var(--wb-bg-primary);
  color: var(--wb-text-primary);
  transition: var(--wb-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 卡片样式 */
.card {
  background-color: var(--wb-bg-primary);
  border-radius: var(--wb-radius-medium);
  box-shadow: var(--wb-shadow-small);
  transition: var(--wb-transition);
}

.card:hover {
  box-shadow: var(--wb-shadow-medium);
}