@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply text-primary bg-background;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
}

/* 自定义组件样式 */
@layer components {
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600;
  }

  .love-card {
    @apply bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl;
  }

  .love-message {
    @apply border-l-4 border-accent pl-4 my-4;
  }

  .score-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .source-tag {
    @apply text-xs text-secondary bg-gray-100 rounded-full px-3 py-1;
  }

  .feature-card {
    @apply flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg;
  }

  .pricing-card {
    @apply bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl border border-gray-100;
  }

  .btn-primary {
    @apply bg-accent text-white px-6 py-3 rounded-full font-medium transition-all duration-300 hover:bg-blue-700;
  }

  .btn-secondary {
    @apply border-2 border-accent text-accent px-6 py-3 rounded-full font-medium transition-all duration-300 hover:bg-accent hover:text-white;
  }
}

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

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

/* 情话生成结果样式 */
.love-message-result {
  @apply bg-white rounded-xl p-6 mb-6 border border-gray-100;
}

.love-message-header {
  @apply flex justify-between items-center mb-4;
}

.love-message-content {
  @apply text-lg leading-relaxed mb-4;
}

.love-message-meta {
  @apply grid grid-cols-2 gap-4 text-sm text-secondary;
}

/* 响应式设计调整 */
@media (max-width: 768px) {
  .love-message-meta {
    @apply grid-cols-1;
  }
}

/* 加载动画 */
.loading-spinner {
  @apply w-8 h-8 border-4 border-accent border-t-transparent rounded-full animate-spin;
}

/* 表单样式 */
.form-input {
  @apply w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent transition-all duration-300;
}

.form-select {
  @apply w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent transition-all duration-300 appearance-none bg-white;
}

/* FAQ 样式 */
.faq-item {
  @apply border-b border-gray-100 py-6 last:border-b-0;
}

.faq-question {
  @apply flex justify-between items-center cursor-pointer;
}

.faq-answer {
  @apply mt-4 text-secondary hidden;
}

.faq-item.active .faq-answer {
  @apply block;
}

/* 评分样式 */
.score-high {
  @apply bg-green-100 text-green-800;
}

.score-medium {
  @apply bg-yellow-100 text-yellow-800;
}

.score-low {
  @apply bg-red-100 text-red-800;
}

/* 情景标签 */
.scenario-tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-secondary mr-2 mb-2;
}

/* 工作流程步骤 */
.step-card {
  @apply relative flex flex-col items-center text-center p-6;
}

.step-number {
  @apply w-10 h-10 rounded-full bg-accent text-white flex items-center justify-center font-bold mb-4;
}

.step-connector {
  @apply hidden md:block absolute top-1/2 w-full h-px bg-gray-200 -z-10;
}

/* 页面过渡动画 */
.page-transition {
  @apply transition-all duration-300;
}

.page-enter {
  @apply opacity-0 translate-y-4;
}

.page-enter-active {
  @apply opacity-100 translate-y-0;
}