/*
 * 文章页 token（文章列表 / 归档 / 详情 / 搜索 / 404 共用；tokens.css 已接近 150 行上限，按页面拆出，只放 :root 变量）。
 * 只在文章类页面加载，紧跟 tokens-blocks.css；派生色用 color-mix 跟随 Customizer 覆盖的基色。
 * 数值取自视觉稿 design/mockups/assets/articles.css 与 assets/tokens.css。
 */

:root {
    /* ── 版式 ── */
    /* 超宽屏上限与产品页一致；内容左右边距与导航一致（--page-px） */
    --a-wrap-max: 100rem;
    --a-section-y: clamp(var(--space-16), 10vw, 9rem);
    --a-head-pad-top: calc(var(--nav-h) + clamp(var(--space-12), 8vw, var(--space-24)));
    --a-head-max: 56rem;
    --a-lead-max: 36em;
    --a-cover-ratio: 16 / 9;
    --a-featured-cols: minmax(0, 1.25fr) minmax(0, 1fr);
    --a-posts-cols: 3;
    --a-posts-cols-md: 2;

    /* ── 详情页：正文栏 + 目录 ── */
    /* 正文栏宽约 672px，17px 中文约 40 字一行 */
    --a-prose-max: 42rem;
    --a-fs-prose: var(--fs-md);
    --a-lh-prose: 1.8;
    --a-toc-w: 14rem;
    --a-avatar-size: 2.5rem;
    --a-dash-top: 0.8em;
    --a-code-inline-pad: 0.1em 0.35em;
    --a-code-inline-size: 0.88em;
    --a-link-offset: 0.25em;
    --a-hover-scale: 1.03;

    /* ── 字号 / 字距 ── */
    --a-fs-h1: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem);
    --a-tracking-wide: 0.08em;
    --a-tracking-title: -0.02em;

    /* ── 颜色：深色区块 ── */
    --a-surface-hover: color-mix(in srgb, var(--fg) 5%, transparent);
    --a-grid-line: color-mix(in srgb, var(--fg) 3.5%, transparent);
    --a-grid-cell: 4rem;

    /* ── 颜色：浅色正文区块（article.css 在区块上把语义 token 就地重映射到这些值）── */
    /* 浅色区块里的卡片面：比底色更白一点（--fg-on-brand 即白色） */
    --a-surface-inverse: color-mix(in srgb, var(--bg-inverse) 40%, var(--fg-on-brand));
    --a-fg-inverse-secondary: color-mix(in srgb, var(--fg-inverse) 68%, transparent);
    --a-line-inverse-strong: color-mix(in srgb, var(--fg-inverse) 20%, transparent);
    --a-surface-hover-inverse: color-mix(in srgb, var(--fg-inverse) 4%, transparent);

    /* ── 代码块：浅色正文里仍是深底；在 :root 解析，避免被浅色区块重映射 ── */
    --a-code-bg: var(--bg-elevated);
    --a-code-fg: var(--fg);
    --a-code-muted: var(--fg-muted);
    --a-code-line: var(--line-strong);
}