/* 深色主题只覆盖变量和必要组件，主体结构仍由 theme.css 控制。 */
:root {
    --bg: #101316;
    --surface: #171b20;
    --surface-soft: #1f252b;
    --text: #e8ecef;
    --text-soft: #b5bec8;
    --muted: #87919c;
    --line: #2d343c;
    --line-soft: rgba(232, 236, 239, .1);
    --brand: #6fc4b8;
    --brand-strong: #94d8cf;
    --brand-soft: rgba(111, 196, 184, .14);
    --shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

/* 深色模式下使用单独配置的顶部背景图，没有配置时 PHP 会回退到亮色图。 */
body {
    background:
        linear-gradient(180deg, rgba(111, 196, 184, .08), rgba(255, 255, 255, 0) 320px),
        var(--bg);
}

.intro-header {
    background-image: var(--header-bg-image-dark);
}

/* 表单、代码块和 Markdown 细节需要显式覆盖，避免沿用亮色背景。 */
input,
textarea,
pre {
    color: var(--text);
    background: var(--surface);
}

code {
    color: #e1bb83;
    background: rgba(111, 196, 184, .12);
}

th {
    background: var(--surface-soft);
}

pre,
.article-content pre,
#post-content pre {
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.article-content blockquote,
#post-content blockquote {
    background: rgba(111, 196, 184, .12);
}

.article-content :not(pre) > code,
#post-content :not(pre) > code {
    border-color: rgba(111, 196, 184, .24);
}

/* 页面卡片类组件统一套用深色表面和边框。 */
.sidebar-container section,
.respond,
.comment-parent,
.post-list-item-container,
.link-box,
.am-pagination > li > a,
.am-pagination > li > span,
.pager li > a,
.page-navigator a,
.page-navigator span {
    background: var(--surface);
    border-color: var(--line);
}

@media (max-width: 767px) {
    /* 移动端导航菜单是独立浮层，需要单独覆盖背景和文字色。 */
    #huxblog_navbar .navbar-collapse {
        background: rgba(23, 27, 32, .96);
        border-color: var(--line);
        box-shadow: var(--shadow);
    }

    #huxblog_navbar .nav li a {
        color: var(--text);
    }
}

/* 滚动后的固定导航栏使用半透明深色背景。 */
.navbar-custom.is-fixed {
    background: rgba(23, 27, 32, .86);
    border-bottom-color: var(--line);
}

.navbar-custom.is-fixed .navbar-brand,
.navbar-custom.is-fixed .nav li a,
.navbar-custom.is-fixed #huxblog_navbar .nav li a {
    color: var(--text);
}

.navbar-custom.is-fixed .nav li a:hover,
.navbar-custom.is-fixed .nav li a:focus {
    color: var(--brand-strong);
    background: var(--brand-soft);
}

.navbar-toggle,
.navbar-mobile-search {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
}

/* highlight.js 深色代码配色。 */
.hljs {
    color: #d6dee7;
    background: #11161b;
}

.hljs-comment,
.hljs-quote {
    color: #7f8c98;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #c792ea;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #f07178;
}

.hljs-literal {
    color: #89ddff;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
    color: #c3e88d;
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: #ffcb6b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #f78c6c;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #82aaff;
}

.blog-footer {
    background: #0b0e11;
}