/* ========================================
   冠隆医疗官网 - 优化配色方案
   更温暖、更有人气的医疗科技配色
   ======================================== */

:root {
  /* === 主色调 - 医疗蓝绿 (更温暖的青色) === */
  --color-primary: #00A896;        /* 主色：温暖的青绿色 */
  --color-primary-dark: #028174;   /* 深色：用于悬停和强调 */
  --color-primary-light: #02C39A;  /* 浅色：用于背景和高亮 */
  --color-primary-lighter: #E8F8F5; /* 超浅色：用于卡片背景 */
  
  /* === 辅助色 - 科技紫 (保持专业感) === */
  --color-secondary: #5B7FFF;      /* 辅助色：明亮的科技蓝紫 */
  --color-secondary-dark: #4A6FE8; /* 深色 */
  --color-secondary-light: #7B9FFF; /* 浅色 */
  --color-secondary-lighter: #EEF2FF; /* 超浅色 */
  
  /* === 强调色 - 活力橙 (增加人气) === */
  --color-accent: #FF6B6B;         /* 强调色：温暖的珊瑚红 */
  --color-accent-dark: #E85555;    /* 深色 */
  --color-accent-light: #FF8787;   /* 浅色 */
  --color-accent-lighter: #FFE8E8; /* 超浅色 */
  
  /* === 成功色 - 生命绿 === */
  --color-success: #51CF66;        /* 成功：生机绿 */
  --color-success-dark: #40C057;   /* 深色 */
  --color-success-light: #8CE99A;  /* 浅色 */
  --color-success-lighter: #E7F5E9; /* 超浅色 */
  
  /* === 警告色 - 阳光黄 === */
  --color-warning: #FFB84D;        /* 警告：温暖的金黄 */
  --color-warning-dark: #FF9F1C;   /* 深色 */
  --color-warning-light: #FFC97A;  /* 浅色 */
  --color-warning-lighter: #FFF4E6; /* 超浅色 */
  
  /* === 信息色 - 天空蓝 === */
  --color-info: #4DABF7;           /* 信息：清新的天空蓝 */
  --color-info-dark: #339AF0;      /* 深色 */
  --color-info-light: #74C0FC;     /* 浅色 */
  --color-info-lighter: #E7F5FF;   /* 超浅色 */
  
  /* === 文字颜色 (更柔和的对比) === */
  --color-text-primary: #2C3E50;   /* 主文字：深蓝灰 */
  --color-text-secondary: #5A6C7D; /* 次要文字：中蓝灰 */
  --color-text-muted: #8B95A1;     /* 弱化文字：浅蓝灰 */
  --color-text-white: #FFFFFF;     /* 白色文字 */
  --color-text-dark: #1A1A1A;      /* 深色文字 */
  
  /* === 背景颜色 (更温暖的中性色) === */
  --color-bg-white: #FFFFFF;       /* 纯白背景 */
  --color-bg-light: #F8F9FA;       /* 浅灰背景 */
  --color-bg-gray: #F1F3F5;        /* 灰色背景 */
  --color-bg-dark: #2C3E50;        /* 深色背景 */
  --color-bg-darker: #1A252F;      /* 更深背景 */
  
  /* === 边框颜色 === */
  --color-border-light: #E9ECEF;   /* 浅边框 */
  --color-border-medium: #DEE2E6;  /* 中边框 */
  --color-border-dark: #CED4DA;    /* 深边框 */
  
  /* === 渐变色 === */
  --gradient-primary: linear-gradient(135deg, #00A896 0%, #02C39A 100%);
  --gradient-secondary: linear-gradient(135deg, #5B7FFF 0%, #7B9FFF 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B6B 0%, #FF8787 100%);
  --gradient-warm: linear-gradient(135deg, #FFB84D 0%, #FF9F1C 100%);
  --gradient-cool: linear-gradient(135deg, #4DABF7 0%, #74C0FC 100%);
  --gradient-hero: linear-gradient(135deg, rgba(0,168,150,0.9) 0%, rgba(91,127,255,0.9) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
  
  /* === 阴影系统 (更柔和的阴影) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 24px 0 rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 20px 40px 0 rgba(0, 0, 0, 0.15);
  
  /* === 彩色阴影 (增加活力) === */
  --shadow-primary: 0 8px 16px 0 rgba(0, 168, 150, 0.2);
  --shadow-secondary: 0 8px 16px 0 rgba(91, 127, 255, 0.2);
  --shadow-accent: 0 8px 16px 0 rgba(255, 107, 107, 0.2);
  --shadow-success: 0 8px 16px 0 rgba(81, 207, 102, 0.2);
}

/* === 应用新配色到现有元素 === */

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

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: var(--color-text-white) !important;
}

/* 次要按钮 */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: var(--color-text-white) !important;
}

/* 强调按钮 */
.btn-accent {
  background: var(--gradient-accent);
  color: var(--color-text-white);
  box-shadow: var(--shadow-accent);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #E85555 0%, #FF6B6B 100%);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* 卡片样式 */
.card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-primary-light);
}

/* 链接颜色 */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

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

/* 导航链接 */
.nav-link {
  color: var(--color-text-primary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
}

/* 标题渐变 */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 图标颜色 */
.svg-icon.primary,
.svg-icon.primary-color {
  color: var(--color-primary);
}

.svg-icon.secondary {
  color: var(--color-secondary);
}

.svg-icon.accent {
  color: var(--color-accent);
}

.svg-icon.success {
  color: var(--color-success);
}

.svg-icon.warning {
  color: var(--color-warning);
}

.svg-icon.info {
  color: var(--color-info);
}

/* Hero区域优化 */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  background: var(--gradient-overlay);
}

/* 统计数据卡片 */
.stat-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.stat-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.stat-number {
  color: var(--color-primary);
  font-size: var(--font-size-4xl);
  font-weight: 700;
}

/* 特色卡片 */
.feature-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.feature-card:hover {
  box-shadow: var(--shadow-primary);
  border-color: var(--color-primary-light);
  transform: translateY(-6px);
}

/* 产品卡片 */
.product-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.product-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}

.product-badge {
  background: var(--gradient-accent);
  color: var(--color-text-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* 标签样式 */
.badge-primary {
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.badge-secondary {
  background: var(--color-secondary-lighter);
  color: var(--color-secondary-dark);
}

.badge-accent {
  background: var(--color-accent-lighter);
  color: var(--color-accent-dark);
}

.badge-success {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}

/* 分隔线 */
.divider {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-border-medium) 50%, 
    transparent 100%);
  margin: var(--spacing-xl) 0;
}

/* 背景装饰 */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(0, 168, 150, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(91, 127, 255, 0.05) 0%, transparent 50%);
}

/* 渐变背景区域 */
.section-gradient {
  background: linear-gradient(180deg, 
    var(--color-bg-white) 0%, 
    var(--color-bg-light) 50%, 
    var(--color-bg-white) 100%);
}

/* 温暖的CTA区域 */
.cta-section {
  background: var(--gradient-primary);
  color: var(--color-text-white);
  padding: var(--spacing-3xl) 0;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>');
  opacity: 0.3;
}