/* Tailwind CSS 配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义颜色和主题 */
:root {
  --color-primary: #005792;
  --color-secondary: #00BBF0;
  --color-accent: #F9A826;
  --color-dark: #333333;
  --color-light: #F5F7FA;
  --color-muted: #6B7280;
}

/* 自定义工具类 */
.btn-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.card-shadow {
  box-shadow: 0 10px 30px rgba(0, 87, 146, 0.1);
}

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 导航栏样式 */
.nav-active {
  @apply text-primary font-medium relative;
}

.nav-active::after {
  content: '';
  @apply absolute bottom-0 left-0 h-0.5 w-full bg-primary;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
}

/* 通用组件样式 */
.section-title {
  @apply text-center mb-16;
}

.section-title h2 {
  @apply text-4xl md:text-5xl font-bold mb-4;
}

.section-title p {
  @apply text-lg text-muted max-w-3xl mx-auto;
}

/* 卡片样式 */
.feature-card {
  @apply bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 border border-white/20 hover:border-primary/30 hover-lift;
}

/* 按钮样式 */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-full hover:bg-secondary transition-colors duration-300 hover-lift;
}

.btn-secondary {
  @apply bg-white text-primary px-6 py-3 rounded-full border-2 border-primary hover:bg-primary hover:text-white transition-colors duration-300 hover-lift;
}

/* 表单样式 */
.form-input {
  @apply w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-primary focus:ring focus:ring-primary/20 focus:outline-none transition-all duration-300;
}

.form-label {
  @apply block text-dark font-medium mb-2;
}

/* 页脚样式 */
.footer {
  @apply bg-dark text-white py-16;
}

.footer-title {
  @apply text-xl font-bold mb-6;
}

.footer-link {
  @apply text-gray-300 hover:text-white transition-colors duration-300;
}