/* 
 * UI设计原则 - 筑居思
 * 包含色彩呼吸系统、字体系统和视觉元素的设计规范
 */

:root {
    /* 色彩呼吸系统 */
    --accent: #C84630; /* 朱红 - 点睛色 */
    --accent-hover: #A23425; /* 胭脂红 - 悬停状态 */
    --accent-active: #8A2B21; /* 深红 - 点击状态 */
    --accent-disabled: #FADBD2; /* 浅红 - 禁用状态 */
    
    --bg-primary: #F8F6F2; /* 米白 - 主背景色 */
    --bg-secondary: #EFEAE2; /* 浅灰米 - 次要背景色 */
    
    --text-primary: #2D2D2D; /* 炭灰 - 主要文本色 */
    --text-secondary: #587465; /* 石绿 - 次要文本色 */
    
    /* 夜间模式颜色 */
    --dark-bg-primary: #2D2D2D; /* 炭灰 - 夜间主背景 */
    --dark-bg-secondary: #3A3A3A; /* 深灰 - 夜间次要背景 */
    --dark-text-primary: #B8B0A4; /* 米色 - 夜间主要文本 */
    --dark-accent: #E55A4B; /* 亮朱红 - 夜间点睛色 */
    --dark-text-secondary: #7E9C8D; /* 浅石绿 - 夜间次要文本 */
}

/* 背景质感 - 添加宣纸纹理 */
body {
    background-color: var(--bg-primary);
    background-image: url('../images/paper-texture.png');
    background-blend-mode: overlay;
    background-size: 200px;
    background-repeat: repeat;
    background-attachment: fixed;
    opacity: 0.98; /* 轻微透明以增强纹理效果 */
}

/* 夜间模式 */
body.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

body.dark-mode .sidebar,
body.dark-mode .card,
body.dark-mode .newsletter-section {
    background-color: var(--dark-bg-secondary);
}

body.dark-mode a {
    color: var(--dark-accent);
}

body.dark-mode .text-secondary,
body.dark-mode .category-count,
body.dark-mode .post-meta {
    color: var(--dark-text-secondary);
}

/* 字体系统 - 层级与仪式感 */

/* H1 - 文章标题 */
h1 {
    font-size: 36px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* H2 - 章节标题 */
h2 {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

/* H3 - 小节标题 */
h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 正文 */
body, p {
    font-size: 16px;
    font-weight: normal;
    color: var(--text-primary);
    line-height: 1.8;
}

/* 引用 */
blockquote {
    font-size: 18px;
    font-weight: normal;
    font-family: 'Kaiti SC', 'STKaiti', serif;
    color: var(--text-primary);
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
    margin: 2rem 0;
    line-height: 1.7;
}

/* 图注/注脚 */
.caption, figcaption {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-secondary);
    opacity: 0.9;
    margin-top: 0.5rem;
    text-align: center;
}

/* 引首章 - 首字下沉 */
.article-content > p:first-of-type::first-letter {
    font-size: 48px;
    color: var(--accent);
    float: left;
    line-height: 1;
    padding-right: 8px;
    padding-top: 4px;
}

/* 链接状态 */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
}

a:active {
    color: var(--accent-active);
}

.disabled {
    color: var(--accent-disabled) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 按钮样式 */
.btn {
    background-color: var(--accent);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: var(--accent-hover);
}

.btn:active {
    background-color: var(--accent-active);
    transform: translateY(1px);
}

.btn.disabled {
    background-color: var(--accent-disabled);
    color: rgba(45, 45, 45, 0.5);
}

/* 视觉元素 - 肌理与生命力 */

/* 图标细节 */
.icon {
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 图片遮罩 */
.hero-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/ink-mask.svg');
    background-size: cover;
    pointer-events: none;
}

/* 分割线 */
hr {
    border: none;
    height: 20px;
    background-image: url('../images/divider.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 20px;
    margin: 2rem 0;
    opacity: 0.7;
}

/* 卡片样式增强 */
.card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* 展品项目悬停效果 */
.exhibit-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.exhibit-item:hover {
    transform: translateY(-5px);
}

.exhibit-item img {
    transition: transform 0.5s ease;
}

.exhibit-item:hover img {
    transform: scale(1.05);
}

.exhibit-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    .article-content > p:first-of-type::first-letter {
        font-size: 36px;
    }
}

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

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

/* 主题切换过渡效果 */
body, .sidebar, .card, a, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}