/*
 * 产品页 token（tokens.css / tokens-blocks.css 已接近 150 行上限，按页面拆出；只放 :root 变量）。
 * 只在产品页加载，紧跟 tokens-blocks.css；派生色用 color-mix 跟随 Customizer 覆盖的基色。
 * 数值取自视觉稿 design/mockups/assets/tokens.css（产品页 v2）。
 */

:root {
    /* ── 版式 ── */
    /* 区块之间只靠留白分组：1440 宽约 192px，手机 96px */
    --p-section-y: clamp(6rem, 13.34vw, 12rem);
    /* 超宽屏上限；内容左右边距与导航一致（--page-px） */
    --p-wrap-max: 100rem;
    --p-feat-cols: minmax(0, 5fr) minmax(0, 7fr);
    --p-figure-ratio: 16 / 10;
    /* 四列对比表在窄屏上的最小宽度，低于它横向滚动 */
    --p-compare-min-w: 40rem;

    /* ── 字号 / 字重 / 字距 ── */
    --p-fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
    --p-fs-h2: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
    --fw-semibold: 600;
    --p-tracking-title: -0.02em;
    --p-tracking-kicker: 0.08em;
    --p-lead-max: 34em;
    --p-desc-max: 24em;
    --p-title-max: 20em;
    /* 列表短横的垂直位置（随行高） */
    --p-dash-top: 0.7em;

    /* ── 按钮 ── */
    --p-btn-h: var(--space-10);
    --p-btn-h-sm: var(--space-8);
    --p-btn-h-lg: var(--space-12);
    --p-surface-hover: color-mix(in srgb, var(--fg) 6%, transparent);

    /* ── 小人插图：尺寸与动效 token 在 tokens-blocks.css（--crew-*，产品页与文章页共用） ── */

    /* ── 截图渐隐：mask 只取透明度，这里的颜色不会显示 ── */
    --p-mask-opaque: #000;
    --p-shot-fade-from: 72%;

    /* ── 页头背景：首页流体静态图 + 深色遮罩，底部渐隐到页面底色 ── */
    --p-head-veil-top: color-mix(in srgb, var(--bg) 62%, transparent);
    --p-head-veil-mid: color-mix(in srgb, var(--bg) 80%, transparent);
    --p-head-veil-end: var(--bg);
    --p-head-veil-mid-at: 45%;
    --p-head-veil-end-at: 88%;
    --p-head-img-opacity: 0.9;

    /* ── 区块背景：品牌蓝极淡光晕 + 1px 网格（交替使用） ── */
    --p-glow: color-mix(in srgb, var(--brand-blue) 16%, transparent);
    --p-glow-faint: color-mix(in srgb, var(--brand-blue) 8%, transparent);
    --p-glow-none: color-mix(in srgb, var(--brand-blue) 0%, transparent);
    --p-glow-w: 70rem;
    --p-glow-h: 40rem;
    --p-glow-reach: 70%;
    --p-grid-line: color-mix(in srgb, var(--fg) 3.5%, transparent);
    --p-grid-cell: 4rem;
    /* 网格上下渐隐的长度，避免区块交界处出现硬边 */
    --p-grid-fade: 18%;

    /* ── 插图玻璃卡：与首页新闻卡同质感（复用 tokens-blocks.css 的新闻卡 token） ── */
    --p-glass-bg: var(--news-card-bg);
    --p-glass-line: var(--news-card-line);
    --p-glass-highlight: var(--news-card-highlight);
    --p-glass-blur: var(--news-card-blur);
    --p-glass-glow: color-mix(in srgb, var(--brand-blue) 22%, transparent);
    --p-glass-glow-reach: 65%;
    /* 示意图压暗一点，让光晕透出来 */
    --p-glass-img-opacity: 0.92;
}