/*******************************
 * 院感助手 (ygan) - 样式文件
 * 主题色：#56CBDE 青色系
 * 只包含颜色样式，布局在组件中定义
 *******************************/

/* 基础变量 */
:root {
  --product-primary: #56CBDE;
  --product-primary-hover: #40a8b8;
  --product-secondary: #7dd8e6;
  --product-accent: #a8e4ed;
  --product-background: #f0fbfd;
  --product-surface: #ffffff;
  --product-text: #1f2937;
  --product-text-secondary: #6b7280;
  --product-border: #e5e7eb;
}

/* 背景色 */
.bg-primary { background-color: var(--product-primary) !important; }
.bg-primary-hover { background-color: var(--product-primary-hover) !important; }
.bg-secondary { background-color: var(--product-secondary) !important; }
.bg-accent { background-color: var(--product-accent) !important; }
.bg-background { background-color: var(--product-background) !important; }
.bg-surface { background-color: var(--product-surface) !important; }

/* hover效果 */
.hover\:bg-primary-hover:hover {
  background-color: var(--product-primary-hover) !important;
}

/* 文字颜色 */
.text-primary { color: var(--product-primary) !important; }
.text-secondary { color: var(--product-secondary) !important; }
.text-accent { color: var(--product-accent) !important; }
.text-main { color: var(--product-text) !important; }
.text-muted { color: var(--product-text-secondary) !important; }

/* 边框颜色 */
.border-primary { border-color: var(--product-primary) !important; }
.border-secondary { border-color: var(--product-secondary) !important; }
.border-base { border-color: var(--product-border) !important; }

/* 环形颜色 */
.ring-primary { --tw-ring-color: var(--product-primary) !important; }
.ring-secondary { --tw-ring-color: var(--product-secondary) !important; }

/* 渐变背景 */
.from-primary { --tw-gradient-from: var(--product-primary) !important; }
.to-secondary { --tw-gradient-to: var(--product-secondary) !important; }

/* 按钮样式 */
.btn-primary {
  background-color: var(--product-primary) !important;
  border-color: var(--product-primary) !important;
  color: white !important;
}
.btn-primary:hover {
  background-color: var(--product-primary-hover) !important;
  border-color: var(--product-primary-hover) !important;
}

.btn-secondary {
  background-color: var(--product-secondary) !important;
  border-color: var(--product-secondary) !important;
  color: white !important;
}
.btn-secondary:hover {
  background-color: var(--product-accent) !important;
  border-color: var(--product-accent) !important;
}

.btn-outline {
  background-color: transparent !important;
  border-color: var(--product-primary) !important;
  color: var(--product-primary) !important;
}
.btn-outline:hover {
  background-color: var(--product-primary) !important;
  color: white !important;
}

/* 组件样式 - 只包含颜色 */
.card {
  background-color: var(--product-surface) !important;
  border-color: var(--product-border) !important;
}

.badge {
  background-color: var(--product-accent) !important;
  color: var(--product-primary) !important;
}

/* 跳转链接按钮 */
.btn-link {
  background-color: transparent !important;
  border: 2px solid var(--product-primary) !important;
  color: var(--product-primary) !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
}

.btn-link:hover {
  background-color: var(--product-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(86, 203, 222, 0.3) !important;
}

.input {
  border-color: var(--product-border) !important;
}
.input:focus {
  border-color: var(--product-primary) !important;
  box-shadow: 0 0 0 3px rgba(86, 203, 222, 0.1) !important;
}

/* 特殊组件 - 只包含颜色 */
.hero {
  background: linear-gradient(135deg, var(--product-primary) 0%, var(--product-secondary) 100%) !important;
}

.hero-simple-bg {
  background: linear-gradient(to bottom, rgba(86, 203, 222, 0.15) 0%, rgba(255, 255, 255, 1) 40%) !important;
}

.hero-badge {
  background-color: rgb(86 203 222 / var(--tw-bg-opacity, 1)) !important;
  color: white !important;
}

/* 重要按钮 - 白色背景，青色文字 */
.hero-btn-importance {
  background-color: white !important;
  color: var(--product-primary) !important;
  border: 2px solid white !important;
}

.hero-btn-importance:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
}

/* 次要按钮 - 透明背景，白色边框 */
.hero-btn-subordination {
  background-color: transparent !important;
  color: white !important;
  border: 2px solid white !important;
}

.hero-btn-subordination:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* 保留旧的样式以兼容 */
.hero-btn-primary {
  background-color: white !important;
  color: var(--product-primary) !important;
  border: 2px solid white !important;
}

.hero-btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.hero-btn-secondary {
  background-color: transparent !important;
  color: white !important;
  border: 2px solid white !important;
}

.hero-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar {
  background-color: #ffffff !important;
  border-bottom-color: var(--product-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.navbar-ygan {
  background-color: #ffffff !important;
  border-bottom-color: var(--product-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.footer {
  background-color: #ffffff !important;
  border-top-color: var(--product-border) !important;
}