/* ========== 公共样式：博客站点 ========== */

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ========== 设计令牌：浅色模式 ========== */
:root {
    --primary: #165DFF;
    --primary-light: #4080FF;
    --primary-gradient: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
    --secondary: #36CFC9;
    --text-primary: #1D2129;
    --text-secondary: #4E5969;
    --text-tertiary: #86909C;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F8FA;
    --bg-tertiary: #E5E6EB;
    --card-bg: #FFFFFF;
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --border-color: #E5E6EB;
    --badge-bg: #E8F3FF;
    --badge-text: #165DFF;
    --progress-bg: #E5E6EB;
    --transition: all 0.25s ease;
}

/* ========== 设计令牌：深色模式 ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #4080FF;
        --primary-light: #699DFF;
        --primary-gradient: linear-gradient(135deg, #4080FF 0%, #699DFF 100%);
        --text-primary: #F7F8FA;
        --text-secondary: #C9CDD4;
        --text-tertiary: #86909C;
        --bg-primary: #17191E;
        --bg-secondary: #232529;
        --bg-tertiary: #2E3035;
        --card-bg: #232529;
        --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
        --border-color: #2E3035;
        --badge-bg: #1A3366;
        --badge-text: #699DFF;
        --progress-bg: #2E3035;
    }
}

/* 手动主题切换覆盖 */
[data-theme="dark"] {
    --primary: #4080FF; --primary-light: #699DFF;
    --primary-gradient: linear-gradient(135deg, #4080FF 0%, #699DFF 100%);
    --text-primary: #F7F8FA; --text-secondary: #C9CDD4; --text-tertiary: #86909C;
    --bg-primary: #17191E; --bg-secondary: #232529; --bg-tertiary: #2E3035;
    --card-bg: #232529;
    --card-shadow: 0 2px 12px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.4);
    --border-color: #2E3035; --badge-bg: #1A3366; --badge-text: #699DFF;
    --progress-bg: #2E3035;
}
[data-theme="light"] {
    --primary: #165DFF; --primary-light: #4080FF;
    --primary-gradient: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
    --text-primary: #1D2129; --text-secondary: #4E5969; --text-tertiary: #86909C;
    --bg-primary: #FFFFFF; --bg-secondary: #F7F8FA; --bg-tertiary: #E5E6EB;
    --card-bg: #FFFFFF;
    --card-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    --border-color: #E5E6EB; --badge-bg: #E8F3FF; --badge-text: #165DFF;
    --progress-bg: #E5E6EB;
}

/* ========== 减少动效 ========== */
@media (prefers-reduced-motion: reduce) {
    :root { --transition: none; }
    * { animation: none !important; transition: none !important; }
}

html { scroll-behavior: smooth; }
body {
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.6;
    font-size: 16px;
}

/* ========== 跳转到主内容（无障碍） ========== */
.skip-link {
    position: absolute; top: -100%; left: 16px;
    padding: 8px 16px; background: var(--primary);
    color: #fff; border-radius: 0 0 8px 8px;
    font-size: 14px; text-decoration: none; z-index: 9999;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ========== 通用组件 ========== */
.badge {
    display: inline-block; padding: 4px 12px; background: var(--badge-bg);
    color: var(--badge-text); border-radius: 20px; font-size: 12px;
    font-weight: 500; margin: 0 6px 8px 0; white-space: nowrap;
}

/* ========== 导航栏公共样式 ========== */
.navbar-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    height: 52px;
}
.navbar-brand {
    font-size: 15px; font-weight: 600; color: var(--primary);
    text-decoration: none;
}
.navbar-links {
    display: flex; gap: 4px; list-style: none;
    overflow-x: auto; scrollbar-width: none;
}
.navbar-links::-webkit-scrollbar { display: none; }
.navbar-links a {
    display: block; padding: 6px 14px; font-size: 13px;
    color: var(--text-secondary); text-decoration: none;
    border-radius: 6px; transition: var(--transition); white-space: nowrap;
}
.navbar-links a:hover, .navbar-links a.active {
    color: var(--primary); background: var(--badge-bg);
}

/* 主题切换按钮 */
.theme-toggle {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition); font-size: 16px;
}
.theme-toggle:hover { color: var(--primary); background: var(--badge-bg); }

/* ========== 汉堡菜单按钮 ========== */
.menu-toggle {
    display: none; width: 36px; height: 36px; border-radius: 8px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer;
    align-items: center; justify-content: center;
    transition: var(--transition); font-size: 18px;
    margin-right: 8px;
}
.menu-toggle:hover { color: var(--primary); background: var(--badge-bg); }

/* 移动端导航菜单 */
.mobile-nav {
    display: none; position: fixed; top: 52px; left: 0; right: 0;
    background: var(--card-bg); border-bottom: 1px solid var(--border-color);
    box-shadow: var(--card-shadow); z-index: 999;
    padding: 12px 24px; list-style: none;
    animation: slideDown 0.2s ease;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
    display: block; padding: 10px 14px; font-size: 14px;
    color: var(--text-secondary); text-decoration: none;
    border-radius: 6px; transition: var(--transition);
}
.mobile-nav a:hover { color: var(--primary); background: var(--badge-bg); }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== 页脚 ========== */
footer {
    text-align: center; padding: 24px 0; font-size: 14px;
    color: var(--text-tertiary); border-top: 1px solid var(--border-color); margin-top: 40px;
}

/* ========== 响应式：移动端显示汉堡菜单 ========== */
@media (max-width: 768px) {
    .navbar-links { display: none; }
    .menu-toggle { display: flex; }
}