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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-serif text-gray-800 bg-stone-50 antialiased;
  }
}

@layer components {
  /* 导航栏样式 */
  .nav-link {
    @apply relative px-6 py-2 text-gray-700 transition-all duration-300 hover:text-amber-700;
  }
  
  .nav-link::after {
    @apply content-[''] absolute bottom-0 left-0 w-0 h-px bg-amber-600 transition-all duration-300;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  /* 按钮样式 */
  .btn-minimal {
    @apply px-8 py-3 border border-amber-200 text-amber-800 transition-all duration-500 hover:bg-amber-50 hover:border-amber-300;
  }
  
  /* 图片容器 */
  .img-container {
    @apply overflow-hidden group;
  }
  
  .img-container img {
    @apply transition-transform duration-700 group-hover:scale-105;
  }
  
  /* 卡片样式 */
  .card {
    @apply bg-white rounded-none shadow-sm hover:shadow-lg transition-shadow duration-500;
  }
  
  /* 标题样式 */
  .section-title {
    @apply text-3xl md:text-4xl font-light tracking-wider text-gray-900 mb-8 text-center;
  }
  
  /* 文本段落 */
  .content-text {
    @apply text-gray-600 leading-relaxed tracking-wide;
  }
  
  /* 页脚样式 */
  .footer {
    @apply border-t border-stone-200 py-8 text-center text-xs text-stone-400;
  }
}

@layer utilities {
  /* 自定义颜色 */
  .text-primary {
    @apply text-amber-800;
  }
  
  .bg-primary {
    @apply bg-amber-50;
  }
  
  /* 留白效果 */
  .spacing-y {
    @apply py-12 md:py-20 lg:py-32;
  }
  
  .spacing-x {
    @apply px-4 md:px-8 lg:px-16;
  }
  
  /* 图片网格 */
  .img-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8;
  }
  
  /* 柔和阴影 */
  .shadow-soft {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  }
}

/* 字体配置 */
@import url('https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@200;300;400;500&display=swap');

body {
  font-family: 'Noto Serif SC', serif;
}