/* ============================================================
   思念宝 · 设计令牌 (Design Tokens)
   浅色杂志风：米白纸感底色 + 深墨字 + 克制的青铜/鼠尾草点缀
   仅在此文件定义变量，其余样式文件只允许引用变量
   ============================================================ */

:root {
    color-scheme: light;

    /* ---------- 表面层 ---------- */
    --paper: #fbf9f5;
    /* 页面底色，带一点暖调的纸白 */
    --paper-alt: #f5f2eb;
    /* 次级区块底色，用于制造区块节奏 */
    --surface: #ffffff;
    --surface-hover: #f7f4ee;
    --surface-sunken: #f0ece3;

    /* ---------- 墨色文字 ---------- */
    --ink: #1a1815;
    --ink-2: #55504a;
    --ink-3: #7a736a;
    --ink-inverse: #fbf9f5;

    /* ---------- 点缀色 ---------- */
    /* 青铜色：主点缀。已压暗到可在纸白底上通过 WCAG AA 正文对比度 */
    --accent: #8a6a35;
    --accent-strong: #6d5228;
    --accent-tint: rgba(138, 106, 53, 0.08);
    --accent-line: rgba(138, 106, 53, 0.26);
    /* 鼠尾草绿：辅助点缀，用于 AI 回应等次要语义 */
    --sage: #526e5b;
    --sage-tint: rgba(82, 110, 91, 0.08);
    --sage-line: rgba(82, 110, 91, 0.24);

    /* ---------- 描边 ---------- */
    /* 杂志风的骨架靠发丝级描边而非阴影与色块 */
    --rule: rgba(26, 24, 21, 0.1);
    --rule-strong: rgba(26, 24, 21, 0.18);
    --rule-ink: rgba(26, 24, 21, 0.72);

    /* ---------- 投影（极克制，几乎只用于悬浮态） ---------- */
    --shadow-xs: 0 1px 2px rgba(26, 24, 21, 0.04);
    --shadow-sm: 0 2px 8px rgba(26, 24, 21, 0.05);
    --shadow-md: 0 10px 30px rgba(26, 24, 21, 0.07);

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    /* 衬线仅用于展示级标题，中文小字号衬线可读性差，正文一律用 sans */
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Songti SC", "Source Han Serif SC", "Noto Serif SC", STSong, serif;

    /* ---------- 字阶 ---------- */
    --text-2xs: 0.75rem;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;

    /* ---------- 行高 ---------- */
    --leading-tight: 1.15;
    --leading-snug: 1.4;
    --leading-body: 1.75;
    --leading-loose: 1.9;

    /* ---------- 字距 ---------- */
    --tracking-display: -0.02em;
    --tracking-normal: 0;
    /* 字距放大的小型全大写标签，是杂志风的关键细节 */
    --tracking-eyebrow: 0.16em;

    /* ---------- 间距 ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* 区块垂直节奏，响应式在 base.css 中收敛 */
    --section-y: 112px;

    /* ---------- 尺寸 ---------- */
    --container-max: 1160px;
    --container-narrow: 780px;
    /* 正文最佳阅读宽度 */
    --measure: 70ch;
    --nav-height: 64px;

    /* ---------- 圆角（整体收小，避免圆润带来的廉价感） ---------- */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* ---------- 动效 ---------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --transition-fast: 0.16s var(--ease);
    --transition-base: 0.24s var(--ease);
    --transition-slow: 0.5s var(--ease);
}

@media (max-width: 1024px) {
    :root {
        --section-y: 80px;
        --text-5xl: 3rem;
        --text-4xl: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --section-y: 64px;
        --text-5xl: 2.375rem;
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
        --text-2xl: 1.4375rem;
    }
}

@media (max-width: 480px) {
    :root {
        --section-y: 52px;
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
    }
}

/* ============================================================
   兼容别名
   后端 seo_generator.go 生成的静态页与历史内联样式仍可能引用旧变量名，
   这里统一映射到新令牌，保证旧引用不会渲染成透明或黑底。
   新代码请勿使用以下变量。
   ============================================================ */
:root {
    --bg-primary: var(--paper);
    --bg-secondary: var(--paper-alt);
    --bg-card: var(--surface);
    --bg-card-hover: var(--surface-hover);
    --bg-glass: var(--surface);
    --bg-glass-border: var(--rule);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --accent-primary: var(--accent);
    --accent-secondary: var(--sage);
    --accent-warm: var(--accent-strong);
    --border-subtle: var(--rule);
    --nav-bg: rgba(251, 249, 245, 0.88);
    --gradient-primary: none;
    --gradient-bg: none;

    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --font-size-3xl: var(--text-3xl);
    --font-size-4xl: var(--text-4xl);
    --font-size-5xl: var(--text-5xl);

    --radius-xl: var(--radius-lg);
    --section-padding: var(--section-y);
    --container-narrow-max: var(--container-narrow);
}