/* =====================================================================
   官网站点样式（Tailwind 之外的设计细节）—— 明亮主题
   - 设计令牌通过 :root 暴露，便于在原生 CSS 中复用
   - 滚动条美化（亮色主题）
   - data-reveal 滚动渐入起始/结束态
   ===================================================================== */

:root {
    /* 品牌色 */
    --brand-500: #ff6a1a;
    --brand-400: #ff8a3d;
    --brand-600: #e85100;

    /* 中性（亮色） */
    --bg-base: #ffffff;
    --bg-soft: #fafafb;
    --bg-mute: #f3f4f6;
    --ink-strong: #0f1115;
    --ink-mute: #4b5563;
    --line: rgba(15, 17, 21, .08);

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* 阴影 */
    --shadow-soft: 0 1px 2px rgba(15, 17, 21, .06), 0 12px 32px -12px rgba(15, 17, 21, .18);
    --shadow-glow: 0 0 0 1px rgba(255, 106, 26, .30), 0 16px 40px -12px rgba(255, 106, 26, .45);
}

html {
    background-color: var(--bg-base);
    color-scheme: light;
}

/* 滚动条（亮色） */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 17, 21, .12);
    border-radius: 999px;
    border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 17, 21, .22);
}

/* 焦点可见 */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 6px;
}

/* details summary 去掉默认箭头 */
details>summary::-webkit-details-marker {
    display: none;
}

/* ============== 滚动渐入 ============== */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {

    [data-reveal],
    [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============== 顶部导航滚动态（由 site.js 切换 .is-scrolled） ============== */
#site-header.is-scrolled {
    background-color: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: rgba(15, 17, 21, .08);
}