/*
 * base.css
 * 描述：此文件定义了网站的全局基础样式。
 * 内容：
 * 1. 全局 CSS 变量，用于亮色与深色主题。
 * 2. 基础 HTML 元素的重置和默认样式 (如 html, body, a)。
 * 3. 打印专用样式。
 * 注意：此文件必须在其他样式表之前加载。
 */

/* ========================================================================= */
/* 1. 全局变量与基本设置 (Global Variables & Base Settings)                   */
/* ========================================================================= */
:root {
    /* -- 配色方案 (Color Palette) -- */
    /* Apple 风格的配色，强调柔和与优雅 */
    --accent-color: #6a9ac9;                      /* 强调色: 柔和优雅的蓝色 */
    --accent-color-light: rgba(106, 154, 201, 0.15); /* 强调色浅变体: 用于背景或微弱阴影 */
    --accent-color-hover: #507ea6;                 /* 强调色悬停状态 */

    /* 亮色模式 - 液态玻璃效果调整 (85% 不透明度) */
    --color-bg-base: 240, 243, 247;                /* 基础背景色的 RGB 值 (用于 rgba) */
    --color-bg: rgba(var(--color-bg-base), 0.85);  /* 页面基础背景: 灰白色，带透明度 */

    --color-fg: #212529;                          /* 前景色: 深色文本，保证高对比度 */
    --color-fg-muted: #6c757d;                    /* 柔和前景色: 用于次要文本、元信息等 */
    --color-fg-subtle: #adb5bd;                   /* 微妙前景色: 用于占位符、禁用状态等 */
    --color-border: #e6eaf0;                      /* 边框色: 极浅、干净的边框 */

    --color-card-base: 255, 255, 255;              /* 卡片背景色的 RGB 值 (用于 rgba) */
    --color-card-bg: rgba(var(--color-card-base), 0.85); /* 卡片背景: 近乎不透明的白色，实现“磨砂玻璃”效果 */

    --color-shadow-light: rgba(0, 0, 0, 0.04);     /* 阴影: 极浅，用于微弱的浮动感 */
    --color-shadow-medium: rgba(0, 0, 0, 0.08);    /* 阴影: 中等，用于悬停/活动状态 */
    --color-shadow-strong: rgba(0, 0, 0, 0.12);    /* 阴影: 强，用于突出元素 */

    /* -- 字体设置 (Typography) -- */
    /* 优先使用系统 UI 字体，保证在各平台上的原生体验 */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-heading: 'SF Pro Display', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* 标题字体: 优先 Apple 系统字体 */
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 等宽字体 */

    /* -- 间距与尺寸 (Spacing & Dimensions) -- */
    --sidebar-width: 280px;                       /* 侧边栏宽度 */
    --transition-speed: 0.3s;                     /* 全局过渡动画速度 */
    --border-radius-large: 16px;                  /* 大圆角，用于主容器和卡片 */
    --border-radius-medium: 10px;                 /* 中圆角，用于输入框、按钮等 */
    --border-radius-small: 6px;                   /* 小圆角，用于标签等小元素 */

    /* -- 背景图片 (Background Images) -- */
    --bg-light-image: url('../img/background/light-bg.jpg');
    --bg-dark-image: url('../img/background/dark-bg.jpg');

    /* -- 第三方库变量 (Third-party Libraries) -- */
    --hljs-background: #f6f8fa;                   /* highlight.js 代码块背景 (亮色模式) */

    /* 搜索结果高亮颜色 */
    --color-mark-bg: #fff59d;                      /* 高亮背景: 柔和的淡黄色 */
    --color-mark-fg: #212529;                      /* 高亮文字: 使用主前景色以保持一致 */
}

/* 媒体查询：当系统或用户偏好为深色模式时 */
[data-scheme="dark"] {
    /* 深色模式强调色 */
    --accent-color: #8bbce0;
    --accent-color-light: rgba(139, 188, 224, 0.15);
    --accent-color-hover: #72a2cc;

    /* 深色模式 - 液态玻璃效果调整 */
    --color-bg-base: 26, 30, 36;
    --color-bg: rgba(var(--color-bg-base), 0.85);

    --color-fg: #e0e6eb;
    --color-fg-muted: #9ba7b4;
    --color-fg-subtle: #5f6c77;
    --color-border: #3b424d;

    --color-card-base: 34, 39, 46;
    --color-card-bg: rgba(var(--color-card-base), 0.85);

    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-strong: rgba(0, 0, 0, 0.3);

    /* highlight.js 代码块背景 (深色模式) */
    --hljs-background: #1e2228;

    /* 搜索结果高亮颜色 (深色模式) */
    --color-mark-bg: #f7d74e;                      /* 高亮背景: 鲜艳的黄色，对比度高 */
    --color-mark-fg: #212529;                      /* 高亮文字: 深色文字在亮黄色背景上更清晰 */
}

/* ========================================================================= */
/* 2. 核心布局与全局样式 (Core Layout & Global Styles)                      */
/* ========================================================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一盒模型，简化布局计算 */
}

html {
    font-size: 16px; /* 优化：将基础字号设为 16px，符合现代 Web 可访问性标准 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

body {
    font-family: var(--font-body);
    color: var(--color-fg);
    line-height: 1.7; /* 优化：增加行高，提升长文案的可读性 */
    margin: 0;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    z-index: 0; /* 确保内容在背景伪元素之上 */
    min-height: 100vh;
    /* Bug 修复: 创建新的块格式化上下文 (BFC) */
    /* 这可以防止子元素 (.container) 的外边距 (margin) 塌陷或传递到 body 上， */
    /* 从而解决了因外边距导致 body 出现不必要滚动条的问题。 */
    /* 这是解决此类布局问题的现代且最优雅的方法。 */
    display: flow-root;
}

/* 背景液态玻璃效果：通过伪元素实现，与内容分离 */
body::before {
    content: '';
    position: fixed; /* 固定在视口，不随滚动条移动 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-bg-base)); /* 背景色的 RGB 值作为回退/初始加载颜色 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* 置于所有内容下方 */
    transition: background-image var(--transition-speed), filter var(--transition-speed), transform var(--transition-speed);

    /* 核心效果：高斯模糊 + 亮度调整 */
    filter: blur(15px) brightness(0.85);
    -webkit-filter: blur(15px) brightness(0.85); /* WebKit 兼容 */
    transform: scale(1.05); /* 轻微放大以避免模糊产生的边缘效应 */
    pointer-events: none; /* 允许点击穿透伪元素 */
    background-image: var(--bg-light-image); /* 默认亮色模式背景图 */
}

/* 深色模式下的背景图片和滤镜调整 */
[data-scheme="dark"] body::before {
    background-image: var(--bg-dark-image);
    filter: blur(15px) brightness(0.65) grayscale(0.2);
    -webkit-filter: blur(15px) brightness(0.65) grayscale(0.2);
}

/* 全局链接样式 */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}
a:hover {
    color: var(--accent-color-hover);
    text-decoration: none;
}

/* 屏幕阅读器专用，用于隐藏视觉元素但保留其可访问性 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* === 新增：View Transitions API 主题切换动画样式 === */
/* 禁用默认的淡入淡出动画 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* 当从深色切换到亮色时 (收起动画)，需要让旧视图(深色)在顶层 */
[data-scheme="light"]::view-transition-old(root) {
    z-index: 9999;
}

/* ========================================================================= */
/* 3. 打印样式 (Print Styles)                                              */
/* ========================================================================= */
@media print {
    /* 重置所有元素的背景、阴影和特效 */
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 1.5cm !important; /* 设置打印边距 */
        color: #000;
        display: block !important; /* 覆盖 BFC 修复 */
    }

    /* 隐藏所有非内容元素 */
    .left-sidebar, .hamburger, #pagination-container, .copy-code-button,
    .dark-mode-toggle, .social-links, .copyright, .search-form,
    .loader, .toc-sidebar, #tag-cloud-container, .tags-container {
        display: none !important;
    }

    /* 重置容器布局，使其变为普通文档流 */
    .container, .main-content, .content-layout, .main-content-footer,
    #main-content-wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .post-summary, .post-content {
        margin: 0 0 2em 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .post-content .meta { display: none; }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }
    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }

    p { orphans: 3; widows: 3; } /* 防止孤行和寡行 */

    a, a:visited {
        color: #0000ee !important;
        text-decoration: underline;
    }
    a[href]::after { /* 在链接后显示 URL */
        content: " (" attr(href) ")";
        font-size: 10pt;
        font-weight: normal;
        font-style: italic;
        color: #555 !important;
    }
    a[href^="#"]::after, a[href^="javascript:"]::after {
        content: ""; /* 不显示内部链接和 JS 链接的 URL */
    }

    blockquote {
        margin: 1.5em 0;
        padding: 1em;
        border-left: 3px solid #ccc !important;
        font-style: italic;
        page-break-inside: avoid;
    }

    pre {
        border: 1px solid #ddd !important;
        padding: 1em !important;
        margin: 1.5em 0;
        font-size: 10pt;
        white-space: pre-wrap;
        word-wrap: break-word;
        page-break-inside: avoid;
    }

    code { font-family: var(--font-mono); }

    :not(pre) > code {
        font-size: 11pt;
        border: 1px solid #ddd;
        padding: 0.1em 0.3em;
        color: #c7254e !important;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    table, figure { page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }
}