/* ==========================================================================
   base.css — 重置、字体加载、排版默认值
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter 可变字体
   只带 latin 子集，配 unicode-range —— 这正是中文能自动落到系统字体
   （PingFang / 雅黑）而不用下载 8MB 中文字体的原因。
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 不要沿用旧站那句全局 *::-webkit-scrollbar { display: none } ——
       它抹掉了所有页面的滚动位置指示器。这里改成细滚动条。 */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-500) transparent;
}

body {
    /* 纯 hex 兜底：oklch 的 var() 在极老浏览器上会解析失败并置空，
       这一行保证那种情况下底色依然正确 */
    background-color: #14151a;
    background-color: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400; /* 深色底上不要用 300，细字重小字号会散架 */
    line-height: var(--lh-body);
    min-height: 100vh;
    min-height: 100svh; /* 移动端地址栏收起时不跳动 */
    overflow-x: hidden;
    /* 浅色字在深色底上视觉更重。不加这两行，400 会看起来像 500，整页显廉价 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

/* 中文内容行高放宽 —— 汉字是全角方块，标准行高会显挤 */
:lang(zh) {
    line-height: var(--lh-cjk);
}

/* --------------------------------------------------------------------------
   焦点
   旧站完全没有焦点样式，键盘用户无法定位。只对 :focus-visible 生效，
   鼠标点击不会留下焦点环。
   -------------------------------------------------------------------------- */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--accent-fill);
    color: #fff;
}

/* --------------------------------------------------------------------------
   排版工具类
   -------------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

.display {
    font-size: var(--fs-display);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display);
    font-weight: 500;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums; /* 数字等宽，滚动时不抖 */
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

/* 视觉隐藏但读屏可见 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 跳到主内容 —— 键盘用户的第一个可聚焦元素 */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -120%;
    z-index: calc(var(--z-preloader) + 1);
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: var(--fs-small);
    transition: translate 0.2s var(--ease);
}

.skip-link:focus-visible {
    translate: -50% 0;
}

/* --------------------------------------------------------------------------
   禁用动效
   CSS 侧一刀切。JS 侧另见 site.js 里的 prefersReducedMotion 标志 ——
   两者都要做，只做 CSS 会漏掉所有 JS 驱动的动效。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}