/* 主题样式定义 */
:root {
  /* 主色调 */
  --primary: #FF7F50;
  --primary-dark: #fe9544;
  --primary-light: #fff1e6;
  --primary-transparent: rgba(254, 122, 21, 0.1);

  /* 辅助色 */
  --secondary: #0f9d58;
  --secondary-dark: #0d8a4e;
  --secondary-light: #e6f4ea;

  /* 中性色 */
  --dark: #202124;
  --dark-light: #3c4043;
  --gray: #5f6368;
  --gray-light: #dadce0;
  --light: #f8f9fa;
  --white: #ffffff;

  /* 状态色 */
  --success: #0f9d58;
  --warning: #fbbc04;
  --error: #ea4335;
  --info: #4285f4;

  /* 边框和阴影 */
  --border: #dadce0;
  --border-radius: 4px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);

  /* 字体 */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* 动画 */
  --transition: all 0.3s ease;
}

/* 主题模式切换基础样式 */
.theme-light {
  --bg-color: var(--white);
  --text-color: var(--dark);
  --card-bg: var(--white);
}

.theme-dark {
  --bg-color: var(--dark);
  --text-color: var(--white);
  --card-bg: var(--dark-light);
}

/* 应用主题样式 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  transition: var(--transition);
}

/* 卡片组件主题样式 */
.card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

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

/* 按钮主题样式 */
.btn-primary {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--secondary);
  color: white;
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* 导航栏主题样式 */
.nav-link {
  color: var(--text-color);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}