/* static/css/style.css */

/* 1. 引入新的、更现代的谷歌字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

/* 2. 定义一套全新的、和谐的颜色变量 */
:root {
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Poppins', serif;
    --bg-color: #f4f7f9; /* 非常柔和的淡蓝色背景 */
    --surface-color: #ffffff; /* 卡片等内容的背景色 */
    --text-color: #334155; /* 深灰色正文，比纯黑更柔和 */
    --heading-color: #1e293b; /* 标题颜色 */
    --accent-color: #3b82f6; /* 现代、清爽的蓝色作为强调色 */
    --accent-hover: #2563eb;
    --border-color: #e2e8f0; /* 边框颜色 */
    --meta-text-color: #64748b; /* 作者、日期等元信息的颜色 */
}

/* 3. 全局样式重置和字体应用 */
body {
    background-color: var(--bg-color);
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.7; /* 增加行高，提升可读性 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--heading-color);
    font-weight: 600;
}

/* 4. 减小标题尺寸，解决“标题太大”的问题 */
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

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

/* 5. 美化文章内容，解决“太素”的问题 */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin: 2rem auto;
    display: block;
}

.post-content blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-size: 1.1rem;
    color: var(--meta-text-color);
}

.post-content pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-family: 'Fira Code', 'Courier New', monospace;
}

.post-content :not(pre) > code {
    background-color: #e2e8f0;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
    color: #c7254e;
}