/* Tailwind CSS 配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .nav-card {
        transition: all 0.2s ease;
    }
    .nav-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    .category-section {
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .category-title {
        position: relative;
        padding-left: 12px;
    }
    .category-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 2px;
    }
    .nav-tabs {
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .scroll-decoration {
        position: relative;
    }
    .scroll-decoration::before,
    .scroll-decoration::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 8px;
        left: 0;
        background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.2), transparent);
    }
    .scroll-decoration::before {
        top: 0;
    }
    .scroll-decoration::after {
        bottom: 0;
    }
    .ancient-border {
        border: 1px solid rgba(139, 69, 19, 0.2);
        box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
    }
    .calligraphy-title {
        font-family: 'Noto Serif SC', serif;
        font-weight: 700;
        letter-spacing: 0.05em;
    }
}

/* 自定义颜色主题 */
:root {
    --color-primary: #8B4513;
    --color-secondary: #F5F5DC;
    --color-accent: #A0522D;
    --color-neutral: #F9F7F0;
    --color-dark: #3A3A3A;
    --color-heritage: #CD853F;
    --color-scroll: #D2691E;
}

/* 全局样式 */
body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--color-neutral);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZjVmNWYwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmM2YwZTUiPjwvcmVjdD4KPC9zdmc+');
    color: var(--color-dark);
}

/* 字体设置 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif SC', serif;
}

/* 链接样式 */
a {
    transition: color 0.2s ease;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scroll);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* 按钮样式 */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all;
}

.btn-primary {
    @apply bg-primary hover:bg-primary/90 text-white;
}

.btn-secondary {
    @apply bg-accent hover:bg-accent/90 text-white;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow;
}

/* 输入框样式 */
.input {
    @apply w-full py-2 px-4 rounded-lg border border-gray-200 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary transition-all;
}

/* 分类标题样式 */
.category-title {
    @apply bg-primary/5 py-3 px-4;
}

.category-title h3 {
    @apply text-lg font-medium text-primary;
}

/* 导航标签样式 */
.nav-tabs a {
    @apply inline-block py-1.5 px-4 text-sm font-medium text-dark hover:text-primary border-b-2 border-transparent transition-all;
}

.nav-tabs a.active {
    @apply text-primary border-primary;
}

/* 移动端菜单样式 */
.mobile-menu {
    @apply fixed inset-y-0 left-[-300px] lg:hidden w-64 bg-white border-r border-gray-200 z-50 transition-all duration-300;
}

.mobile-menu.open {
    @apply left-0;
}

/* 错误提示样式 */
.error-message {
    @apply bg-red-500 text-white p-4 rounded-lg shadow-lg;
}

/* 成功提示样式 */
.success-message {
    @apply bg-green-500 text-white p-4 rounded-lg shadow-lg;
}

/* 加载状态样式 */
.loading {
    @apply flex justify-center items-center py-10;
}

.loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    h1 {
        @apply text-xl;
    }
    
    h2 {
        @apply text-lg;
    }
}