/* =================================================================
 * Loostrive 主题 — 暗色模式覆盖层
 * 路径建议:放在原 style.css 之后立即加载(覆盖优先级)
 * 建议大小:<8KB;激活时通过 <html data-theme="dark"> 切换
 *
 * 设计原则:
 *   1. 不依赖原 style.css 改造(直接挂覆盖层即可生效)
 *   2. 用 :root[data-theme="dark"] 选择器达到最高优先级
 *   3. 主要覆盖区域:body / .box / .container / #header / #footer /
 *                   widget / .article_container / .commentlist / code / blockquote
 *   4. 保留主题色(主色 #FF7D00)在暗色模式下做强调用,降饱和到 #FFA040
 *   5. 文本颜色统一为浅灰(#ddd 主,#999 次,#666 弱)
 * ================================================================= */

:root[data-theme="dark"] {
    /* —— 颜色变量(可被其他 CSS 引用) —— */
    --loo-bg-page:       #1a1a1a;     /* 页面背景 */
    --loo-bg-card:       #2a2a2a;     /* 卡片/box 背景 */
    --loo-bg-elevated:   #333;        /* 浮动层(.tbox 等) */
    --loo-bg-input:      #2a2a2a;     /* 表单输入 */
    --loo-bg-hover:      #3a3a3a;     /* hover 态 */

    --loo-text-primary:  #e8e8e8;
    --loo-text-secondary: #aaa;
    --loo-text-muted:    #777;
    --loo-text-link:     #FFA040;     /* 主色调降饱和 */

    --loo-border:        #3a3a3a;     /* 边框 */
    --loo-border-light:  #2a2a2a;
    --loo-shadow:        rgba(0,0,0,0.4);  /* 阴影 */

    --loo-accent:        #FFA040;     /* 强调色(原 #FF7D00 降饱和) */
    --loo-accent-hover:  #FFB060;
}

/* ========== 全局基础 ========== */

:root[data-theme="dark"] body {
    background-color: var(--loo-bg-page);
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] ::selection {
    color: var(--loo-bg-page);
    background: var(--loo-accent);
}

/* 链接 */
:root[data-theme="dark"] a,
:root[data-theme="dark"] a:link,
:root[data-theme="dark"] a:visited {
    color: #ccc;
}
:root[data-theme="dark"] a:hover {
    color: var(--loo-accent-hover);
}

/* ========== 卡片 / 容器 ========== */

:root[data-theme="dark"] .box {
    background-color: var(--loo-bg-card);
    border-color: #333;
    box-shadow: 0 2px 4px 0 var(--loo-shadow);
}
:root[data-theme="dark"] .container {
    background-color: transparent;
}

/* ========== 顶部 mainbar / toolbar ========== */

:root[data-theme="dark"] .mainbar {
    background: var(--loo-bg-card);
    border-bottom: 1px solid var(--loo-border);
    box-shadow: 0 2px 4px 0 var(--loo-shadow);
}
:root[data-theme="dark"] #topbar ul li a,
:root[data-theme="dark"] #topbar ul li a:hover {
    color: var(--loo-text-muted);
}
:root[data-theme="dark"] #topbar ul li a:hover {
    color: var(--loo-accent);
}

/* ========== 导航 ========== */

:root[data-theme="dark"] .mainmenus {
    background: #1f1f1f;
}
:root[data-theme="dark"] .topnav {
    background: #1f1f1f;
}
:root[data-theme="dark"] .topnav a {
    color: #ddd;
}
:root[data-theme="dark"] .topnav li a:hover,
:root[data-theme="dark"] .topnav .current_page_item,
:root[data-theme="dark"] .topnav .current-menu-item,
:root[data-theme="dark"] .topnav .current-post-parent {
    background: var(--loo-accent);
}
:root[data-theme="dark"] .topnav ul ul li {
    border-top: #2a2a2a solid 1px;
}
:root[data-theme="dark"] .topnav ul ul li a,
:root[data-theme="dark"] .topnav ul ul ul li a {
    background: #1f1f1f;
    color: #ccc;
}
:root[data-theme="dark"] .topnav ul ul li a:hover,
:root[data-theme="dark"] .topnav ul ul ul li a:hover {
    background: var(--loo-accent);
}

/* 搜索按钮弹层 */
:root[data-theme="dark"] .menu-search-form {
    background: var(--loo-accent);
}
:root[data-theme="dark"] .menu-search-form .button {
    background: #1f1f1f;
    color: #fff;
}

/* ========== 公告栏 ========== */

:root[data-theme="dark"] .subsidiary {
    background: var(--loo-bg-card);
    color: var(--loo-text-secondary);
}

/* ========== 文章容器 ========== */

:root[data-theme="dark"] .article_container {
    background-color: var(--loo-bg-card);
}
:root[data-theme="dark"] .article_info {
    color: var(--loo-text-muted);
}
:root[data-theme="dark"] .article_info a {
    color: var(--loo-text-muted);
}
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5 {
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] .article h2 a {
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] .context {
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .context h3,
:root[data-theme="dark"] .context h4,
:root[data-theme="dark"] .context h5 {
    border-bottom-color: var(--loo-border-light);
}
:root[data-theme="dark"] .context h2 {
    background-color: #2a2a2a;
    border-left-color: var(--loo-accent);
}
:root[data-theme="dark"] .entry_post {
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .info {
    color: var(--loo-text-muted);
    border-top-color: var(--loo-border-light);
}
:root[data-theme="dark"] .sticky {
    background: var(--loo-accent);
    color: #1a1a1a;
}

/* ========== 文章列表卡片 ========== */

:root[data-theme="dark"] #post_container li {
    background-color: var(--loo-bg-card);
}
:root[data-theme="dark"] #post_container .article h2 a {
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] #post_container li:hover h2 a {
    color: var(--loo-accent);
}

/* ========== 分页 ========== */

:root[data-theme="dark"] .pagination a,
:root[data-theme="dark"] .pagination span {
    background: var(--loo-bg-card);
    border-color: var(--loo-border);
    color: var(--loo-text-secondary);
    box-shadow: 0 2px 4px 0 var(--loo-shadow);
}
:root[data-theme="dark"] .pagination .current,
:root[data-theme="dark"] .pagination a:hover {
    background: #444;
    color: var(--loo-accent);
    border-color: #444;
}

/* ========== 评论 ========== */

:root[data-theme="dark"] #comments_box .pagination a,
:root[data-theme="dark"] #comments_box .pagination span,
:root[data-theme="dark"] #comments_box .pagination .current {
    background: var(--loo-bg-card);
    border-color: var(--loo-border);
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .commentlist .comment {
    border-top-color: var(--loo-border-light);
}
:root[data-theme="dark"] .commentlist .thread-even {
    background: #232323;
}
:root[data-theme="dark"] .commentlist .comment-body {
    border-left-color: transparent;
}
:root[data-theme="dark"] .commentlist .comment-body:hover {
    background: #2a2a2a;
    border-left-color: var(--loo-accent);
}
:root[data-theme="dark"] .datetime,
:root[data-theme="dark"] .commentmetadata {
    color: var(--loo-text-muted);
}
:root[data-theme="dark"] .reply a {
    color: var(--loo-accent);
}
:root[data-theme="dark"] .children li.comment-author-admin {
    border-top-color: var(--loo-accent);
}
:root[data-theme="dark"] #respond {
    border-top-color: var(--loo-accent);
}
:root[data-theme="dark"] .comt-box {
    background: var(--loo-bg-card);
    border-color: var(--loo-border);
    box-shadow: none;
}
:root[data-theme="dark"] .comt-area {
    background: var(--loo-bg-card);
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] .comt-ctrl {
    background: #232323;
    border-top-color: var(--loo-border);
}
:root[data-theme="dark"] .comt-submit {
    background-image: linear-gradient(#444, #333);
    color: var(--loo-text-primary);
    border-color: var(--loo-border);
}
:root[data-theme="dark"] ol.commentlist li div.floor {
    color: #555;
}
:root[data-theme="dark"] .comment-author strong,
:root[data-theme="dark"] .comment-cont strong {
    color: var(--loo-text-primary);
}
:root[data-theme="dark"] .nocomments {
    color: var(--loo-text-muted);
}

/* ========== 底部 ========== */

:root[data-theme="dark"] #footer {
    background: #1a1a1a;
    color: var(--loo-text-muted);
    border-top: 5px solid var(--loo-accent);
}
:root[data-theme="dark"] #footer p {
    color: var(--loo-text-muted);
}
:root[data-theme="dark"] .copyright,
:root[data-theme="dark"] .copyright a {
    color: var(--loo-text-muted);
}

/* ========== 回到顶部 tbox ========== */

:root[data-theme="dark"] #tbox {
    background: transparent;
}
:root[data-theme="dark"] #pinglun,
:root[data-theme="dark"] #home,
:root[data-theme="dark"] #gotop {
    background-color: var(--loo-bg-card);
    border: 1px solid var(--loo-border);
    opacity: 0.7;
}
:root[data-theme="dark"] #pinglun:hover,
:root[data-theme="dark"] #home:hover,
:root[data-theme="dark"] #gotop:hover {
    opacity: 1;
}

/* ========== 暗色切换按钮(自定义) ========== */

:root[data-theme="dark"] #dark-mode-toggle,
:root[data-theme="dark"] #dark-mode-toggle:hover {
    background-color: var(--loo-bg-card);
    border: 1px solid var(--loo-border);
}
:root[data-theme="dark"] #dark-mode-toggle .loo-icon-sun {
    display: inline;
}
:root[data-theme="dark"] #dark-mode-toggle .loo-icon-moon {
    display: none;
}

/* 默认亮色:月亮图标显示 */
:root:not([data-theme="dark"]) #dark-mode-toggle .loo-icon-sun {
    display: none;
}
:root:not([data-theme="dark"]) #dark-mode-toggle .loo-icon-moon {
    display: inline;
}

/* ========== 表单元素 ========== */

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea {
    background-color: var(--loo-bg-input);
    color: var(--loo-text-primary);
    border-color: var(--loo-border);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
    border-color: var(--loo-accent);
}

/* ========== 代码块 / blockquote ========== */

:root[data-theme="dark"] blockquote,
:root[data-theme="dark"] pre {
    background: #232323 url(images/quotebg.gif) no-repeat 10px 10px;
    border-color: var(--loo-border);
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .context code,
:root[data-theme="dark"] .context pre {
    background: #2a2a2a;
    color: #FFA040;
    border: 1px solid var(--loo-border);
}
:root[data-theme="dark"] .context table {
    border-top-color: var(--loo-border);
    border-left-color: var(--loo-border);
}
:root[data-theme="dark"] .context table td,
:root[data-theme="dark"] .context table th {
    border-bottom-color: var(--loo-border);
    border-right-color: var(--loo-border);
}
:root[data-theme="dark"] .context table th {
    background-color: #232323;
}

/* ========== 微缩图 tooltip / wp-caption ========== */

:root[data-theme="dark"] .context .wp-caption {
    background: var(--loo-bg-card);
    border-color: var(--loo-border);
}
:root[data-theme="dark"] .context .wp-caption-text {
    background: #232323;
    border-top-color: var(--loo-border);
    color: var(--loo-text-muted);
}

/* ========== 友情链接 ========== */

:root[data-theme="dark"] .flink .blogroll li a {
    background: #2a2a2a;
    border-color: var(--loo-border);
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .flink .blogroll li a:hover {
    background: var(--loo-accent);
    color: #1a1a1a;
}

/* ========== 标签云 ========== */

:root[data-theme="dark"] .tagcloud a {
    background-color: #2a2a2a;
    color: var(--loo-text-secondary);
}
:root[data-theme="dark"] .tagcloud a:hover {
    background-color: var(--loo-accent);
    color: #1a1a1a;
}
:root[data-theme="dark"] .tagcloud a span {
    background-color: #444;
    color: #999;
}

/* ========== 图片 hover ========== */

:root[data-theme="dark"] #post_container li:hover img {
    opacity: 0.85;
}

/* ========== 滚动条(webkit only) ========== */

:root[data-theme="dark"] ::-webkit-scrollbar {
    background-color: #1a1a1a;
    width: 10px;
    height: 10px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 5px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: #1a1a1a;
}

/* ========== Kube 框架元素 ========== */

:root[data-theme="dark"] .btn {
    background-color: #333;
    border-color: var(--loo-border);
    color: var(--loo-text-primary);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3), inset 0 1px 1px 0 rgba(255,255,255,0.05);
}
:root[data-theme="dark"] .btn:hover {
    background: #444;
}
:root[data-theme="dark"] #commentform input[type="text"],
:root[data-theme="dark"] #commentform input[type="email"] {
    color: var(--loo-text-primary);
}

/* ========== 平滑过渡(让切换不刺眼) ========== */

:root[data-theme="dark"] *,
:root[data-theme="dark"] *::before,
:root[data-theme="dark"] *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 排除 transition 的元素(避免动画干扰) */
:root[data-theme="dark"] .topnav ul ul,
:root[data-theme="dark"] #post_container li {
    animation: none !important;
}

/* ========== 移动端适配 ========== */

@media only screen and (max-width: 640px) {
    :root[data-theme="dark"] .adphone,
    :root[data-theme="dark"] .single-adphone {
        background-color: var(--loo-bg-card);
    }
}