/* ==========================================================================
   主题变量：全站唯一的颜色定义处
   --------------------------------------------------------------------------
   结构样式（尺寸、间距、布局）统一写在 markdown.css / page-content.css 里，
   那边只引用这里的变量，不再出现任何硬编码颜色，因此不存在两套主题重复维护的问题。

   主题取值优先级：
     html[data-theme="light"] / html[data-theme="dark"]   ← 强制指定（由 ?theme= 参数写入）
     @media (prefers-color-scheme: dark)                  ← 跟随系统
     :root                                                ← 默认亮色
   ========================================================================== */

/* ---------- 亮色（默认） ---------- */
:root {
    /* 基础 */
    --bg: #ffffff;
    --text: #24292f;
    --text-muted: #6e7781;   /* 引用块文字 */
    --text-strong: #24292f;  /* 加粗文字 */
    --link: #1677ff;

    /* 背景层次 */
    --bg-subtle: #f6f8fa;    /* 代码块、表头背景 */
    --bg-inline: #f6f8fa;    /* 行内 code 背景 */

    /* 边框 */
    --border: #eaecef;         /* 标题下划线、hr */
    --border-strong: #d0d7de;  /* 表格边框 */
    --border-quote: #d0d7de;   /* 引用块左侧竖线 */
    --pre-border: transparent; /* 代码块描边：亮色下不需要，设为透明 */

    /* 页脚 */
    --footer-bg: #ffffff;
    --footer-text: #8a8f99;
    --footer-border: #e8e8e8;
    --footer-divider: #dcdfe6;
    --footer-link-hover: #1677ff;

    /* ---------- 以下为版面尺寸，两套主题完全一致 ---------- */
    /* 放在变量里是为了让「配色」和「布局」都在同一处，避免两处定义漂移 */
    --content-max: 860px;  /* 正文最大宽度 */
    --page-max: 800px;     /* 页面容器最大宽度 */
    --base-font: 16px;     /* 桌面根字号，em 全部相对它 */
    --base-font-mobile: 14px;
}

/* ---------- 暗色 ---------- */
/* 抽成一组变量声明，供「跟随系统」与「html[data-theme=dark]」复用 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;
        --text: #c9d1d9;
        --text-muted: #8b949e;
        --text-strong: #f0f6fc; /* 暗色下加粗需提亮，否则对比度不足 */
        --link: #58a6ff;

        --bg-subtle: #161b22;
        --bg-inline: #21262d;

        --border: #30363d;
        --border-strong: #30363d;
        --border-quote: #3d444d;
        --pre-border: #30363d; /* 暗色下代码块需要描边，否则与背景区分度不足 */

        --footer-bg: #161b22;
        --footer-text: #8b949e;
        --footer-border: #30363d;
        --footer-divider: #3d444d;
        --footer-link-hover: #58a6ff;
    }
}

/* ---------- 强制指定主题（?theme=dark / ?theme=light） ---------- */
/* 写在 media 之后，同优先级下后者覆盖前者，因此强制值一定生效 */
html[data-theme='light'] {
    --bg: #ffffff;
    --text: #24292f;
    --text-muted: #6e7781;
    --text-strong: #24292f;
    --link: #1677ff;

    --bg-subtle: #f6f8fa;
    --bg-inline: #f6f8fa;

    --border: #eaecef;
    --border-strong: #d0d7de;
    --border-quote: #d0d7de;
    --pre-border: transparent;

    --footer-bg: #ffffff;
    --footer-text: #8a8f99;
    --footer-border: #e8e8e8;
    --footer-divider: #dcdfe6;
    --footer-link-hover: #1677ff;
}

html[data-theme='dark'] {
    --bg: #0d1117;
    --text: #c9d1d9;
    --text-muted: #8b949e;
    --text-strong: #f0f6fc;
    --link: #58a6ff;

    --bg-subtle: #161b22;
    --bg-inline: #21262d;

    --border: #30363d;
    --border-strong: #30363d;
    --border-quote: #3d444d;
    --pre-border: #30363d;

    --footer-bg: #161b22;
    --footer-text: #8b949e;
    --footer-border: #30363d;
    --footer-divider: #3d444d;
    --footer-link-hover: #58a6ff;
}