/* ===========================
   全局主题变量
   根据 data-theme 属性或浏览器 prefers-color-scheme 切换
   =========================== */

/* ===== 暗色主题（默认） ===== */
:root {
    /* 毛玻璃 */
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-bg-hover: rgba(255, 255, 255, 0.13);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-blur: 20px;

    /* 文字 */
    --text-primary: rgba(255, 255, 255, 1);
    --text-secondary: rgba(255, 255, 255, 0.90);
    --text-muted: rgba(255, 255, 255, 0.75);

    /* 强调色 — 深蓝 */
    --accent: rgba(140, 180, 250, 0.95);
    --accent-glow: rgba(100, 140, 220, 0.25);
    --accent-bg: rgba(100, 140, 220, 0.12);
    --accent-border: rgba(100, 140, 220, 0.15);
    --accent-hover-bg: rgba(100, 140, 220, 0.18);
    --accent-hover-border: rgba(100, 140, 220, 0.3);

    /* 背景 */
    --bg-body: #0a0a0f;
    --bg-overlay: rgba(10, 10, 25, 0.55);
    --bg-overlay-inner: rgba(255, 255, 255, 0.15);
    --bg-card: rgba(10, 10, 20, 0.55);
    --bg-top-column: rgba(10, 10, 20, 0.55);

    /* Loading cover */
    --bg-cover: #0a0a0f;

    /* 标题 */
    --title-color-start: rgba(180, 215, 255, 0.9);
    --title-color-mid: rgba(200, 220, 255, 0.8);
    --title-bg: rgba(10, 10, 25, var(--outer-alpha, 0.55));

    /* 边框 & 阴影 */
    --border-subtle: rgba(255, 255, 255, 0.12);
    --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.25);
    --shadow-card-strong: 0 8px 40px rgba(0, 0, 0, 0.3);

    /* 按钮图标背景 */
    --icon-bg: rgba(255, 255, 255, 0.15);
    --icon-bg-hover: rgba(100, 140, 220, 0.15);
    --icon-opacity: 0.8;
    --link-icon-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --link-icon-hover-shadow: 0 8px 28px var(--accent-glow);

    /* 滚动条 & 分隔线 */
    --divider: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.10) 20%,
            rgba(255, 255, 255, 0.10) 80%,
            transparent);

    /* 顶部栏交互按钮 */
    --top-btn-bg: rgba(10, 10, 25, 0.55);
    --top-btn-border: rgba(255, 255, 255, 0.12);
    --top-btn-color: rgba(255, 255, 255, 0.92);
    --top-btn-hover-bg: rgba(255, 255, 255, 0.13);
    --top-btn-hover-color: rgba(255, 255, 255, 1);
}

/* ===== 浅色主题 ===== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* 毛玻璃 */
        --glass-bg: rgba(255, 255, 255, 0.50);
        --glass-bg-hover: rgba(255, 255, 255, 0.65);
        --glass-border: rgba(0, 0, 0, 0.06);

        /* 文字 */
        --text-primary: rgba(20, 20, 40, 1);
        --text-secondary: rgba(20, 20, 40, 0.85);
        --text-muted: rgba(20, 20, 40, 0.55);

        /* 强调色 — 亮蓝 */
        --accent: rgba(20, 95, 200, 0.95);
        --accent-glow: rgba(50, 120, 220, 0.20);
        --accent-bg: rgba(50, 120, 220, 0.15);
        --accent-border: rgba(50, 120, 220, 0.18);
        --accent-hover-bg: rgba(50, 120, 220, 0.15);
        --accent-hover-border: rgba(50, 120, 220, 0.3);

        /* 背景 */
        --bg-body: #eef1f6;
        --bg-overlay: rgba(255, 255, 255, 0.55);
        --bg-overlay-inner: rgba(0, 0, 0, 0.15);
        --bg-card: rgba(255, 255, 255, 0.55);

        /* Loading cover */
        --bg-cover: #eef1f6;

        /* 标题 */
        --title-color-start: rgba(50, 100, 180, 0.9);
        --title-color-mid: rgba(60, 110, 190, 0.85);
        --title-bg: rgba(255, 255, 255, var(--outer-alpha, 0.55));

        /* 边框 & 阴影 */
        --border-subtle: rgba(0, 0, 0, 0.06);
        --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.12);
        --shadow-card-strong: 0 8px 40px rgba(0, 0, 0, 0.10);

        /* 按钮图标背景 */
        --icon-bg: rgba(0, 0, 0, 0.4);
        --icon-bg-hover: rgba(50, 120, 220, 0.80);
        --icon-opacity: 0.9;
        --link-icon-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        --link-icon-hover-shadow: 0 8px 28px var(--accent-glow);

        /* 滚动条 & 分隔线 */
        --divider: linear-gradient(90deg,
                transparent,
                rgba(0, 0, 0, 0.12) 20%,
                rgba(0, 0, 0, 0.12) 80%,
                transparent);

        /* 顶部栏交互按钮 */
        --top-btn-bg: rgba(255, 255, 255, 0.55);
        --top-btn-border: rgba(0, 0, 0, 0.06);
        --top-btn-color: rgba(20, 20, 40, 0.85);
        --top-btn-hover-bg: rgba(255, 255, 255, 0.65);
        --top-btn-hover-color: rgba(20, 20, 40, 1);
    }
}

/* ===== 手动强制浅色主题 ===== */
:root[data-theme="light"] {
    /* 毛玻璃 */
    --glass-bg: rgba(255, 255, 255, 0.50);
    --glass-bg-hover: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(0, 0, 0, 0.06);

    /* 文字 */
    --text-primary: rgba(20, 20, 40, 1);
    --text-secondary: rgba(20, 20, 40, 0.85);
    --text-muted: rgba(20, 20, 40, 0.55);

    /* 强调色 — 亮蓝 */
    --accent: rgba(20, 95, 200, 0.95);
    --accent-glow: rgba(50, 120, 220, 0.20);
    --accent-bg: rgba(50, 120, 220, 0.12);
    --accent-border: rgba(50, 120, 220, 0.18);
    --accent-hover-bg: rgba(50, 120, 220, 0.15);
    --accent-hover-border: rgba(50, 120, 220, 0.3);

    /* 背景 */
    --bg-body: #eef1f6;
    --bg-overlay: rgba(255, 255, 255, 0.55);
    --bg-overlay-inner: rgba(0, 0, 0, 0.15);
    --bg-card: rgba(255, 255, 255, 0.55);

    /* Loading cover */
    --bg-cover: #eef1f6;

    /* 标题 */
    --title-color-start: rgba(50, 100, 180, 0.9);
    --title-color-mid: rgba(60, 110, 190, 0.85);
    --title-bg: rgba(255, 255, 255, var(--outer-alpha, 0.55));

    /* 边框 & 阴影 */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.15);
    --shadow-card-strong: 0 8px 40px rgba(0, 0, 0, 0.10);

    /* 按钮图标背景 */
    --icon-bg: rgba(0, 0, 0, 0.4);
    --icon-bg-hover: rgba(50, 120, 220, 0.80);
    --icon-opacity: 0.9;
    --link-icon-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --link-icon-hover-shadow: 0 8px 28px var(--accent-glow);

    /* 滚动条 & 分隔线 */
    --divider: linear-gradient(90deg,
            transparent,
            rgba(0, 0, 0, 0.12) 20%,
            rgba(0, 0, 0, 0.12) 80%,
            transparent);

    /* 顶部栏交互按钮 */
    --top-btn-bg: rgba(255, 255, 255, 0.55);
    --top-btn-border: rgba(0, 0, 0, 0.06);
    --top-btn-color: rgba(20, 20, 40, 0.85);
    --top-btn-hover-bg: rgba(255, 255, 255, 0.65);
    --top-btn-hover-color: rgba(20, 20, 40, 1);
}

/* 浅色主题 → 显示月亮 */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-icon-sun {
        opacity: 0;
        transform: rotate(90deg);
    }

    :root:not([data-theme="dark"]) .theme-icon-moon {
        opacity: 1;
        transform: rotate(0deg);
    }
}

:root[data-theme="light"] .theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg);
}

:root[data-theme="light"] .theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ===========================
   背景图片切换
   =========================== */
/* 使用 body::before 叠加背景，方便切换 */
body.themed-bg {
    background-image: none !important;
    background-color: var(--bg-body);
    position: relative;
}

body.themed-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 暗色主题背景 */
body.themed-bg::before {
    background-image: url('../images/backgrounds/bkg-h\ \(1\).png');
}

/* 浅色主题背景 — 通过 media query */
@media (prefers-color-scheme: light) {
    body.themed-bg:not([data-body-theme="dark"])::before {
        background-image: url('../images/backgrounds/bkg-h\ \(2\).png');
    }
}

/* 手动浅色主题背景 */
body.themed-bg[data-body-theme="light"]::before {
    background-image: url('../images/backgrounds/bkg-h\ \(2\).png');
}

/* 手动暗色主题背景 */
body.themed-bg[data-body-theme="dark"]::before {
    background-image: url('../images/backgrounds/bkg-h\ \(1\).png');
}

/* ===========================
   移动端背景图片切换
   =========================== */
@media screen and (max-width: 768px) {

    /* 暗色主题 — 移动端竖版背景 */
    body.themed-bg::before {
        background-image: url('../images/backgrounds/bkg-v\ \(1\).png');
    }

    /* 手动暗色 — 移动端 */
    body.themed-bg[data-body-theme="dark"]::before {
        background-image: url('../images/backgrounds/bkg-v\ \(1\).png');
    }

    /* 浅色主题 — 移动端（系统偏好） */
    @media (prefers-color-scheme: light) {
        body.themed-bg:not([data-body-theme="dark"])::before {
            background-image: url('../images/backgrounds/bkg-v\ \(3\).png');
        }
    }

    /* 手动浅色 — 移动端 */
    body.themed-bg[data-body-theme="light"]::before {
        background-image: url('../images/backgrounds/bkg-v\ \(3\).png');
    }
}