/* 自定义CSS变量和扩展样式 */
:root {
    /* 颜色定义 - 遵循语义化命名 */
    --color-primary: #ec7c48; /* 粉色 */
    --color-secondary: #6b7280;
    --color-accent: #f4af72;
    --color-foreground: #111827;
    --color-muted-foreground: #6b7280;
    --color-border: #e5e7eb;
    --color-muted: #f9fafb;
}

/* 为Tailwind Play CDN定义自定义颜色 (通过内联样式已覆盖大部分，此处提供后备) */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

/* 卡片悬停动画 */
.card-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-item:hover {
    transform: translateY(-4px);
}

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

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

/* 加载动画 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 图像加载占位符 */
.image-placeholder {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}