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

/* 基础样式 */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 加载动画 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 渐变背景 */
.gradient-bg {
  background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
}

/* 代码块基础样式 */
.code-block {
  background-color: #282c34;
  color: #abb2bf;
  border-radius: 0.5rem;
  padding: 1.5rem;
  padding-left: 2rem;
  overflow-x: auto;
  font-family: 'Fira Code', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  position: relative;
  margin: 1.5rem 0;
  border: none;
}

/* 确保pre元素与代码块样式一致 */
.post-content pre {
  background-color: #282c34;
  border: none;
  border-radius: 0.5rem;
  margin: 0;
  padding: 0;
}

/* 确保代码元素没有额外样式 */
.post-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* 文章内容样式 */
.post-content h2 {
  @apply text-2xl font-bold text-dark mt-10 mb-4;
}

.post-content h3 {
  @apply text-xl font-bold text-dark mt-8 mb-3;
}

.post-content p {
  @apply text-gray-700 mb-6 leading-relaxed;
}

.post-content ul {
  @apply text-gray-700 mb-6 ml-6 list-disc;
}

.post-content li {
  @apply mb-2 leading-relaxed;
}

.post-content img {
  @apply w-full h-auto rounded-lg my-8 shadow-md;
}

.post-content blockquote {
  @apply border-l-4 border-primary pl-4 italic text-gray-600 my-6;
}

/* 自定义工具类 */
.card-hover {
  @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50;
}

.btn-outline {
  @apply border border-primary text-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-primary/50;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}