/* ============================================================
   揽星阁 · 明暗模式
   加载顺序：bootstrap / icons / wallpaper / header / home
             → theme-light.css（自动生成的硬编码颜色覆盖）
             → theme.css（本文件：令牌、按钮、修正，必须最后）
   深色模式 = 站点原有视觉，不做任何改动；浅色模式只通过
   html[data-theme="light"] 的高特异性规则生效。
   ============================================================ */

html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------
   1. 浅色设计令牌
   ------------------------------------------------------------ */
html[data-theme="light"]:root {
    --bg: #f5f7fc;
    --surface: #ffffff;
    --surface-2: #eef2f9;
    --text: #1a2334;
    --text-dim: #5d6a80;
    --text-mute: #7c869a;
    --line: rgba(20, 32, 54, .10);
    --line-strong: rgba(20, 32, 54, .18);
    --accent: #5b3fe0;
    --accent-2: #0891c7;
    /* 原 CSS 里 var(--tx1, …) 一类的兜底变量 */
    --tx1: #1a2334;
    --tx2: #5d6a80;
    --acc: #5b3fe0;
}

/* 首页把令牌定义在 body.wp-home 上，需单独覆盖 */
html[data-theme="light"] body.wp-home {
    --bg: #f5f7fc;
    --bg-soft: #eef2f9;
    --surface: #ffffff;
    --surface-2: #f2f5fb;
    --surface-3: #e9eef7;
    --text: #1a2334;
    --text-dim: #5d6a80;
    --text-mute: #7c869a;
    --line: rgba(20, 32, 54, .10);
    --line-strong: rgba(20, 32, 54, .18);
    --accent: #5b3fe0;
    --accent-2: #0891c7;
    --accent-soft: rgba(91, 63, 224, .12);
    --shadow-1: 0 2px 10px rgba(20, 32, 54, .08);
    --shadow-2: 0 18px 44px rgba(20, 32, 54, .14);
    --shadow-glow: 0 12px 40px rgba(91, 63, 224, .18);
}

/* 头部自带一套 --hd-* 令牌 */
html[data-theme="light"] .wp-header {
    --hd-line: rgba(20, 32, 54, .10);
    --hd-line-strong: rgba(20, 32, 54, .18);
    --hd-text: #1a2334;
    --hd-dim: #5d6a80;
    --hd-accent: #5b3fe0;
    --hd-accent-2: #0891c7;
}

/* 浅色下把首页/全站的背景光晕调淡，避免浅底发灰发紫 */
html[data-theme="light"] body,
html[data-theme="light"] body.wp-home {
    background:
        radial-gradient(1200px 600px at 78% -10%, rgba(91, 63, 224, .075), transparent 62%),
        radial-gradient(900px 520px at 8% 0%, rgba(8, 145, 199, .06), transparent 62%),
        var(--bg);
}

/* 品牌渐变字：浅底改深蓝层次，保证「揽星阁」清晰可读 */
html[data-theme="light"] .wp-brand-name {
    background: linear-gradient(180deg, #123a7a 0%, #1d63b4 55%, #3c92d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] body.wp-home .wp-hero-title em {
    background: linear-gradient(96deg, #5b3fe0 8%, #0891c7 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ------------------------------------------------------------
   2. 修正自动生成规则：彩色按钮 / 图片浮层 / 骨架微光
   ------------------------------------------------------------ */
/* 紫色渐变按钮上的文字必须保持白色 */
html[data-theme="light"] .wp-btn-primary,
html[data-theme="light"] .wp-btn-primary:hover,
html[data-theme="light"] .wp-pg-btn.is-current,
html[data-theme="light"] .wp-catgroup.is-active,
html[data-theme="light"] .wp-skip,
html[data-theme="light"] body.wp-home .wp-hero-search button,
html[data-theme="light"] body.wp-home .wp-density button.is-active {
    color: #fff;
}

/* 浮在图片上的操作按钮：深色玻璃 + 白字，任何主题下都清晰 */
html[data-theme="light"] .wp-ic,
html[data-theme="light"] body.wp-home .wp-ic {
    color: #fff;
    background: rgba(10, 16, 28, .52);
    border-color: rgba(255, 255, 255, .22);
}

/* 卡片图片加载时的微光 */
html[data-theme="light"] body.wp-home .wp-card-media::before {
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 28%, rgba(20, 32, 54, .10) 50%, rgba(255, 255, 255, 0) 72%);
}

/* 快捷分类卡：原样式用 hsl() 深色渐变（自动扫描不会处理），浅色下换成淡彩底 */
html[data-theme="light"] body.wp-home .wp-quick-card {
    background:
        linear-gradient(150deg,
            hsl(var(--h) 72% 96% / .95),
            hsl(var(--h) 52% 91% / .95) 62%,
            #ffffff);
    border-color: hsl(var(--h) 42% 84% / .75);
    color: #1a2334;
    box-shadow: 0 2px 10px rgba(20, 32, 54, .06);
}
html[data-theme="light"] body.wp-home .wp-quick-card::after {
    background: radial-gradient(circle, hsl(var(--h) 78% 62% / .18), transparent 68%);
}
html[data-theme="light"] body.wp-home .wp-quick-card:hover {
    box-shadow: 0 12px 26px rgba(20, 32, 54, .12);
}
html[data-theme="light"] body.wp-home .wp-quick-ico {
    background: hsl(var(--h) 70% 62% / .16);
    color: hsl(var(--h) 62% 36%);
}
html[data-theme="light"] body.wp-home .wp-quick-go { color: #5d6a80; }

/* 浅色下阴影收敛，避免浅底发脏 */
html[data-theme="light"] .wp-card { box-shadow: 0 4px 16px rgba(20, 32, 54, .10); }
html[data-theme="light"] .wp-lb { box-shadow: 0 20px 60px rgba(20, 32, 54, .22); }
html[data-theme="light"] .wp-catpanel { box-shadow: 0 24px 60px rgba(20, 32, 54, .18); }
html[data-theme="light"] .wp-drawer { box-shadow: -18px 0 48px rgba(20, 32, 54, .18); }
html[data-theme="light"] .wp-header.is-scrolled { box-shadow: 0 12px 32px rgba(20, 32, 54, .10); }
html[data-theme="light"] .wp-totop { box-shadow: 0 4px 14px rgba(20, 32, 54, .18); }

/* 品牌 404 页的内联样式也跟随主题 */
.wp-404 p { color: var(--text-dim, #667); }
.wp-404-rec h2 { color: var(--text, #333); }
.wp-404-theme-wrap { position: fixed; top: 16px; right: 16px; z-index: 100; }
@media (max-width: 560px) { .wp-404-theme-wrap { top: 10px; right: 10px; } }

/* ------------------------------------------------------------
   3. 主题切换按钮
   ------------------------------------------------------------ */
.wp-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line-strong, rgba(255, 255, 255, .13));
    background: rgba(255, 255, 255, .045);
    color: var(--text-dim, #b9c0cd);
    font-family: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.wp-theme-btn:hover {
    color: #fff;
    border-color: rgba(124, 92, 255, .5);
    background: rgba(124, 92, 255, .16);
    transform: translateY(-1px);
}
.wp-theme-btn:focus-visible { outline: 2px solid rgba(124, 92, 255, .8); outline-offset: 2px; }
.wp-theme-btn i { font-size: 16px; line-height: 1; color: #ffce5c; }
.wp-theme-btn [data-wp-icon="to-dark"] { display: none; color: #9b88ff; }
html[data-theme="light"] .wp-theme-btn [data-wp-icon="to-light"] { display: none; }
html[data-theme="light"] .wp-theme-btn [data-wp-icon="to-dark"] { display: inline-block; }

html[data-theme="light"] .wp-theme-btn {
    border-color: rgba(20, 32, 54, .16);
    background: rgba(20, 32, 54, .045);
    color: #4a5568;
}
html[data-theme="light"] .wp-theme-btn:hover {
    color: #152033;
    border-color: rgba(91, 63, 224, .45);
    background: rgba(91, 63, 224, .10);
}

/* 抽屉里的版本（占满一行，和抽屉其它操作项一致） */
.wp-drawer .wp-theme-btn {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #d5d9e2;
    font-size: 14px;
    transform: none;
}
.wp-drawer .wp-theme-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-theme="light"] .wp-drawer .wp-theme-btn { background: transparent; color: #2b3547; border: 0; }
html[data-theme="light"] .wp-drawer .wp-theme-btn:hover { background: rgba(20, 32, 54, .06); color: #152033; }

/* 点击瞬间图标轻转一下 */
.wp-theme-btn.is-switching i { animation: wpThemeSpin .42s cubic-bezier(.3, .8, .3, 1); }
@keyframes wpThemeSpin {
    0%   { transform: rotate(-90deg) scale(.6); opacity: .2; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* 窄屏只留图标 */
@media (max-width: 720px) {
    .wp-header-inner .wp-theme-btn { padding: 0 10px; }
    .wp-header-inner .wp-theme-btn-txt { display: none; }
}
@media (max-width: 560px) {
    .wp-header-inner .wp-theme-btn { height: 36px; }
}

/* ------------------------------------------------------------
   4. 切换过渡（仅切换瞬间加 class，避免常态 transition 影响交互）
   ------------------------------------------------------------ */
html.wp-theme-anim body,
html.wp-theme-anim .wp-header,
html.wp-theme-anim .wp-card,
html.wp-theme-anim .wp-drawer,
html.wp-theme-anim .wp-catpanel,
html.wp-theme-anim .wp-search,
html.wp-theme-anim .wp-act,
html.wp-theme-anim .wp-theme-btn,
html.wp-theme-anim .wp-footer,
html.wp-theme-anim .wp-article-card {
    transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

@media (prefers-reduced-motion: reduce) {
    html.wp-theme-anim body,
    html.wp-theme-anim .wp-header,
    html.wp-theme-anim .wp-card,
    html.wp-theme-anim .wp-drawer,
    html.wp-theme-anim .wp-catpanel,
    html.wp-theme-anim .wp-search,
    html.wp-theme-anim .wp-act,
    html.wp-theme-anim .wp-theme-btn,
    html.wp-theme-anim .wp-footer,
    html.wp-theme-anim .wp-article-card { transition: none; }
    .wp-theme-btn.is-switching i { animation: none; }
}