@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 全局样式 */
@layer base {
  * {
    box-sizing: border-box;
  }
  
  html {
    font-family: 'Inter', system-ui, sans-serif;
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gradient-to-br from-morandi-cream via-morandi-beige to-morandi-sage;
    @apply min-h-screen;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }
}

/* 玻璃质感工具类 */
@layer components {
  .glass {
    @apply bg-white/20 backdrop-blur-md border border-white/30;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  }
  
  .glass-dark {
    @apply bg-morandi-stone/20 backdrop-blur-md border border-morandi-clay/30;
    box-shadow: 0 8px 32px 0 rgba(122, 107, 93, 0.37);
  }
  
  .glass-hover {
    @apply transition-all duration-300 hover:bg-white/30 hover:shadow-xl hover:scale-105;
  }
  
  .card-container {
    @apply glass rounded-2xl p-6 animate-fade-in;
  }
  
  .card-container-dark {
    @apply glass-dark rounded-2xl p-6 animate-fade-in;
  }
  
  /* 导航卡片样式 */
  .nav-card {
    @apply card-container glass-hover cursor-pointer;
    @apply flex flex-col items-center justify-center;
    @apply min-h-[200px] text-center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-card:hover {
    @apply -translate-y-2;
  }
  
  /* 报告容器样式 */
  .report-container {
    @apply card-container-dark max-w-4xl mx-auto;
  }
  
  .report-section {
    @apply glass rounded-xl p-4 mb-6 animate-scale-in;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply glass rounded-xl px-6 py-3 text-morandi-deep font-medium;
    @apply hover:bg-white/40 transition-all duration-300;
    @apply hover:shadow-lg hover:scale-105;
  }
  
  .btn-secondary {
    @apply glass-dark rounded-xl px-6 py-3 text-morandi-cream font-medium;
    @apply hover:bg-morandi-stone/30 transition-all duration-300;
    @apply hover:shadow-lg hover:scale-105;
  }
}

/* 动画增强 */
@layer utilities {
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  .animate-pulse-soft {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .fade-in-up {
    @apply animate-fade-in;
  }
  
  .stagger-animation > * {
    animation-delay: calc(var(--stagger) * 0.1s);
  }
}

/* 响应式网格 */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}