/* ==========================================================================
 * theme.css — 浅色 / 深色主题切换按钮（首页与留言板共用）
 * 主题令牌（--bg / --surface / --navbar-* 等）仍由各页面样式自行定义，
 * 本文件只承载切换按钮这一共用组件与其图标。
 * ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 6px;
    padding: 0;
    color: var(--navbar-text);
    background: transparent;
    border: 1px solid var(--navbar-border);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--accent);
    background: var(--surface-2, rgba(128, 128, 128, 0.14));
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0) scale(0.94);
}

/* 图标显示"当前"模式：跟随系统(◐) / 浅色(☀) / 深色(☾)
   模式取自 <html data-theme-mode>，由 js/theme.js 维护；
   前两条选择器同时兜住属性缺失（无 JS）的情况，此时回落到自动图标 */
.theme-toggle__icon {
    display: none;
    pointer-events: none;
}

:root:not([data-theme-mode="light"]):not([data-theme-mode="dark"]) .theme-toggle__icon--auto,
:root[data-theme-mode="light"] .theme-toggle__icon--sun,
:root[data-theme-mode="dark"] .theme-toggle__icon--moon {
    display: block;
}