/* ─────────────────────────────────────────────────────────────
   CM Markdown Viewer — 设计令牌（index / share 两个页面唯一来源）
   改这里就够了，不要再在 index.css / share.css 里重复定义。
   ───────────────────────────────────────────────────────────── */

:root {
    /* ── 字体栈 ──
       拉丁字母走 Inter，CJK 由 --font-cjk 决定，按 html[lang] 切换。
       注意：不要设置 -webkit-font-smoothing:antialiased —— 那正是"字重看起来太细"的元凶。 */
    --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-cjk: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC";
    --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font: var(--font-latin), var(--font-cjk), sans-serif, var(--font-emoji);
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-cjk);

    /* 正文排版基线（CJK 与拉丁的行高/字距不同，按语言覆盖） */
    --body-line-height: 1.75;
    --body-letter-spacing: 0.003em;

    /* ── 颜色（亮色） ── */
    --bg: #f5f7fb;
    --bg-secondary: #e9edf5;
    --bg-card: #ffffff;
    --text: #1e2a3a;
    --text-secondary: #546378;
    --text-muted: #8c9bb5;
    --accent: #3b7ddd;
    --accent-soft: #3b7ddd14;
    --accent-contrast: #ffffff;
    --border: #d4dbe8;
    --border-light: #e6ebf3;
    --selection: #3b7ddd26;

    --code-bg: #f7f9fb;
    --code-text: #24292e;
    --code-border: #e6ebf3;
    --code-header-bg: rgba(15, 30, 55, 0.035);
    --code-header-border: rgba(15, 30, 55, 0.07);
    --code-header-color: #6a737d;
    --copy-btn-bg: rgba(15, 30, 55, 0.06);
    --copy-btn-hover-bg: rgba(15, 30, 55, 0.12);
    --copy-btn-color: #6a737d;
    --copy-btn-hover-color: #24292e;

    --link: #2e6bc6;
    --blockquote-border: #3b7ddd;
    --blockquote-bg: #3b7ddd0a;
    --table-stripe: #f4f7fc;
    --hr-color: #dde4ee;
    --danger: #d04040;

    /* ── 形状与投影 ── */
    --radius: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-xs: 0 1px 2px rgba(23, 38, 60, 0.05);
    --shadow: 0 1px 2px rgba(23, 38, 60, 0.05), 0 8px 24px -12px rgba(23, 38, 60, 0.14);
    --shadow-lg: 0 2px 6px rgba(23, 38, 60, 0.07), 0 24px 60px -20px rgba(23, 38, 60, 0.22);

    /* ── 动效 ── */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="dark"] {
    --bg: #151921;
    --bg-secondary: #1d2331;
    --bg-card: #212838;
    --text: #dce3ef;
    --text-secondary: #94a3be;
    --text-muted: #5e6e88;
    --accent: #5b9cf6;
    --accent-soft: #5b9cf618;
    --accent-contrast: #0d1420;
    --border: #2d3648;
    --border-light: #283143;
    --selection: #5b9cf633;

    --code-bg: #10141c;
    --code-text: #cdd6f4;
    --code-border: #262f40;
    --code-header-bg: rgba(255, 255, 255, 0.035);
    --code-header-border: rgba(255, 255, 255, 0.06);
    --code-header-color: #7f849c;
    --copy-btn-bg: rgba(255, 255, 255, 0.06);
    --copy-btn-hover-bg: rgba(255, 255, 255, 0.13);
    --copy-btn-color: #7f849c;
    --copy-btn-hover-color: #cdd6f4;

    --link: #6aabff;
    --blockquote-bg: #5b9cf610;
    --table-stripe: #252d3c;
    --hr-color: #2d3648;
    --danger: #ff7b7b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

/* ── 日文：Noto Sans JP 打头。
   系统回退里用 "Yu Gothic Medium" 而不是 "Yu Gothic"，
   Windows 上游ゴシック Regular 笔画过细，Medium 才是可读的字重。 ── */
html[lang="ja"] {
    --font-cjk: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", Meiryo;
    --body-line-height: 1.85;
    --body-letter-spacing: 0.015em;
}

/* ── 英文：不需要 CJK 字形参与，避免混排时字重跳变 ── */
html[lang="en"] {
    --font-cjk: "Segoe UI", system-ui;
    --body-line-height: 1.72;
    --body-letter-spacing: 0;
}

::selection {
    background: var(--selection);
}

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

@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;
    }
}