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

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

   注意：下面亮色/暗色两组声明看起来是重复片段，这是 CSS 变量的必然形态 ——
   @media 与 html[data-theme] 是互斥的选择器条件，没法用一次声明同时覆盖
   「跟随系统」和「强制指定」两条路径，重复是有意为之，不是漏改。
   改动颜色时四处（:root / prefers-color-scheme / data-theme=light / data-theme=dark）
   里同一语义的变量都要一起改。
   ========================================================================== */

/* ---------- 亮色（默认） ---------- */
: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;

    /* 浮层（模态框及其遮罩）。
       ::backdrop 是浏览器生成的伪元素，不会继承 dialog 上的变量，
       但它认 :root 上的变量 —— 所以遮罩色必须定义在这里才跟着主题走。 */
    --overlay: rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.24);

    /* 危险/错误色：删除按钮、错误提示共用。
       暗色下原来的 #d1242f 太暗、对比度不足，需要单独提亮 */
    --danger: #d1242f;

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

    /* 阅读区两侧留白：桌面为 0（正文已被居中的 --page-max 约束住，
       不需要额外内边距），窄屏由文件末尾的 @media 覆盖成具体值。
       正文、文章标题、上下篇导航都从这里取值 —— 各自硬编码的话，
       只要有一处漏改，屏幕上就会出现「标题贴边、正文有留白」的错位。 */
    --page-gutter: 0px;

    /* 编辑器页面两侧留白：视口越宽留白越多，但不超过 80px，
       保证内容既不贴边、也不会在超宽屏被压得太窄 */
    --editor-gutter-x: clamp(16px, 4vw, 80px);
}

/* ---------- 暗色 ---------- */
/* 抽成一组变量声明，供「跟随系统」与「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;

        /* 暗色下遮罩要更实：底色本来就深，太透会看不出「后面被挡住」
           投影也要更重，否则浮层边缘糊在背景里 */
        --overlay: rgba(0, 0, 0, 0.62);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
        /* 暗色下的危险色：比亮色版亮一档，否则糊在深底上看不清 */
        --danger: #ff7b72;
    }
}

/* ---------- 强制指定主题（?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;

    --overlay: rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.24);
    --danger: #d1242f;
}

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;

    /* 暗色下遮罩更实、投影更重（理由同上面的 prefers-color-scheme 段） */
    --overlay: rgba(0, 0, 0, 0.62);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --danger: #ff7b72;
}

/* ==========================================================================
   窄屏两侧留白
   --------------------------------------------------------------------------
   断点与 markdown.css / articles.css 的 @media (max-width: 640px) 一致，
   三者必须同断点取值，否则同一屏上会出现正文留白、标题没有的错位。
   ========================================================================== */
@media (max-width: 640px) {
    :root {
        --page-gutter: 15px;
    }
}