/* ======================================================================
 *  site-refresh.css —— 全站设计基座（排版层级 / 间距 / 焦点 / 降级动效）
 *  加载于 home.css 之后、页面自有样式之前；只提供基线与工具类，
 *  各工具页在其专属变量体系内独立设计，互不影响。
 * ====================================================================== */

/* ---------- 1. 设计令牌（排版层） ---------- */
:root {
    --fs-2xs: 11.5px;
    --fs-xs: 12.5px;
    --fs-sm: 13.5px;
    --fs-base: 15px;
    --fs-md: 16.5px;
    --fs-lg: 19px;
    --fs-xl: 23px;
    --fs-2xl: 30px;
    --fs-3xl: 38px;

    --lh-tight: 1.28;
    --lh-snug: 1.5;
    --lh-base: 1.78;
    --lh-loose: 1.95;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 30px;
    --sp-7: 40px;
    --sp-8: 56px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "Songti SC", "Noto Serif SC", "SimSun", "PingFang SC", serif;
    --font-mono: "SFMono-Regular", "Consolas", "Monaco", "DejaVu Sans Mono", monospace;

    --ease: cubic-bezier(.22, .68, .36, 1);
}

/* ---------- 2. 正文基线 ---------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    letter-spacing: .1px;
    text-rendering: optimizeLegibility;
}

/* 数字统一等宽，表格与算式不跳动 */
body,
.tool-card,
.detail-wrap,
table {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- 3. 标题层级 ---------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);
    color: var(--c-text);
    line-height: var(--lh-tight);
    letter-spacing: -.2px;
    text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.6px; }
h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.3px; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); font-weight: 700; }

p { margin: 0 0 .85em; line-height: var(--lh-base); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--c-text); }

/* ---------- 4. 列表与表格可读性 ---------- */
ul, ol { line-height: var(--lh-loose); }
li { margin-bottom: .35em; }
li:last-child { margin-bottom: 0; }

table { line-height: 1.7; }
th { letter-spacing: .2px; }
caption { caption-side: bottom; font-size: var(--fs-xs); color: var(--c-text-muted); padding-top: var(--sp-2); }

/* ---------- 5. 链接与焦点可见性 ---------- */
a { transition: color .16s var(--ease), background-color .16s var(--ease); }
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 6. 面包屑（首屏可见、层级清晰） ---------- */
.detail-breadcrumb {
    font-size: var(--fs-xs);
    gap: 8px;
    margin-bottom: var(--sp-5);
    line-height: 1.7;
}
.detail-breadcrumb a,
.detail-breadcrumb .current {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 600;
}
.detail-breadcrumb .current {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

/* ---------- 7. 通用排版工具类（供各工具页复用） ---------- */
.prose { color: var(--c-text-sub); font-size: var(--fs-base); line-height: var(--lh-loose); }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose-hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-text-muted);
}

/* 分隔线：更轻 */
.hr-soft { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

/* ---------- 8. 深色模式微调 ---------- */
:root[data-theme="dark"] body {
    letter-spacing: .15px;
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
    letter-spacing: -.1px;
}
:root[data-theme="dark"] .detail-breadcrumb .current {
    background: color-mix(in srgb, var(--c-primary) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 34%, transparent);
}

/* ---------- 9. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 10. 图片：懒加载占位避免布局跳动 ---------- */
img { max-width: 100%; height: auto; }
img[loading="lazy"] { background: color-mix(in srgb, var(--c-text) 4%, transparent); }