/**
 * 默认皮肤样式 - 设计系统规范
 * 基准间距: 8px
 * 字体层级: 标题/正文/辅助文字/元信息
 */

/* ==================== 设计变量 ==================== */
:root {
    /* 间距系统 - 8px 基准 */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    
    /* 字体大小层级 */
    --text-xs: 0.75rem;    /* 12px - 元信息 */
    --text-sm: 0.875rem;   /* 14px - 辅助文字 */
    --text-base: 1rem;     /* 16px - 正文 */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px - H1 */
    --text-3xl: 1.875rem;  /* 30px */
    
    /* 字重 */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* 行高 */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* 颜色 - 与 Bootstrap 5 白色主题协调 */
    --color-text-primary: #212529;      /* 主要文字 */
    --color-text-secondary: #6c757d;     /* 次要文字 */
    --color-text-muted: #adb5bd;       /* 弱化文字 */
    --color-link: #0d6efd;             /* 链接色 */
    --color-border: #dee2e6;           /* 边框色 */
    --color-bg-subtle: #f8f9fa;        /* 背景色 */
}

/* ==================== 基础排版 ==================== */

/* 页面标题 - H1 层级 */
.page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

/* 文章列表标题 - H2 层级 */
.article-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-title a:hover {
    color: var(--color-link);
}

/* 列表内文章描述 */
.article-desc {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ==================== 辅助文字 ==================== */

/* 帮助提示文字 */
.helper-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ==================== 元信息 ==================== */

/* 时间、作者等元信息 */
.meta-text {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

/* 分类标签 */
.category-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-badge:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
}

/* ==================== 文章详情页 ==================== */

/* 文章正文 */
.article-content {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
}

.article-content p {
    margin-bottom: var(--space-md);
}

.article-content h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.article-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.article-content h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.article-content li {
    margin-bottom: var(--space-xs);
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: var(--space-md) 0;
}

.article-content blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: var(--space-md);
    margin: var(--space-md) 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

.article-content code {
    font-size: 0.875em;
    background-color: var(--color-bg-subtle);
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
}

.article-content pre {
    background-color: var(--color-bg-subtle);
    padding: var(--space-md);
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: var(--space-md);
}

.article-content pre code {
    background: none;
    padding: 0;
}

/* ==================== 表格样式 ==================== */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}

.article-content th,
.article-content td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    text-align: left;
}

.article-content th {
    background-color: var(--color-bg-subtle);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.article-content tr:nth-child(even) {
    background-color: var(--color-bg-subtle);
}

.article-content tr:hover {
    background-color: #e9ecef;
}

/* 表格容器 - 处理宽表格的横向滚动 */
.article-content .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

.article-content .table-wrapper table {
    margin: 0;
    border: none;
}

/* ==================== 面包屑导航 ==================== */
.breadcrumb-wrapper {
    font-size: var(--text-sm);
}

.breadcrumb-wrapper .breadcrumb {
    margin-bottom: 0;
}

/* ==================== 相邻文章 ==================== */
.adjacent-section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-md);
}

.adjacent-article-title {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-xs);
}

/* ==================== 页脚 ==================== */
.footer-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.footer-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ==================== 间距工具类 ==================== */
.section-gap {
    gap: var(--space-lg);
}

.card-gap {
    gap: var(--space-md);
}

/* ==================== 响应式调整 ==================== */
@media (min-width: 992px) {
    .page-title {
        font-size: var(--text-3xl);
    }
    
    .article-title {
        font-size: var(--text-xl);
    }
}