/* =============================================================
   Blog System — 变量与外壳桥接层
   -------------------------------------------------------------
   为什么需要这个文件
   blog.css / cards.css 是围绕一套变量写的：
     --bg / --surface / --surface-alt / --text / --text-secondary /
     --text-tertiary / --border / --accent / --accent-light /
     --accent-surface / --font-mono
   但这套变量在本仓库的历史里【从未被定义过】（对全部 commit 做过检索，
   零命中）。同时 3a69fd6「v2: Soho editorial redesign」把根目录
   styles.css 移到 static/styles.css 并换成 --cream / --teal / --ink
   体系，而 blog.html / blog-detail.html / cards.html 仍然指向已不存在的
   ./styles.css（线上实测 404）。

   两者叠加的结果：这三页里凡是用了变量的声明会被浏览器整条丢弃，
   blog.css 的 638 行样式基本失效——博客从上线起就没有真正渲染过设计。

   本文件做两件事，不做视觉发明：
   1) 把 blog.css / cards.css 期望的变量名【映射】到现有品牌体系，
      让既有样式原样生效，并与首页同源；
   2) 补齐页面依赖、但全站 CSS 都没有定义的通用类
      （.container、.btn 系列、页脚杂项类）。
   ============================================================= */

:root {
    /* —— 表面与文字：映射到品牌中性色 —— */
    --bg: var(--cream);
    --surface: #ffffff;
    --surface-alt: var(--oatmeal);
    --text: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-tertiary: var(--ink-muted);
    --border: var(--sand);

    /* —— 强调色：映射到品牌青绿 —— */
    --accent: var(--teal);
    --accent-light: var(--teal-light);
    --accent-surface: var(--teal-glow);

    /* —— 等宽字体：品牌体系未定义，用系统等宽栈（blog.html 另加载 JetBrains Mono）—— */
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------
   .container：博客各页的内容容器。
   此前全站 CSS 都没有定义它，博客内容是通栏的。
   这里与首页 .nav-inner / .*-inner 的布局节奏对齐。
   ------------------------------------------------------------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* -------------------------------------------------------------
   按钮：blog.html / blog-detail.html 用了 .btn 系列，
   但品牌体系里只有 .nav-cta。按 .nav-cta 的胶囊语言补齐。
   ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.7rem 1.5rem;
    border: 1.5px solid var(--teal);
    border-radius: 100px;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s var(--ease-out);
}

.btn:hover {
    background: var(--teal);
    color: var(--cream);
}

.btn-primary {
    background: var(--teal);
    color: var(--cream);
}

.btn-primary:hover {
    background: var(--teal-light);
    border-color: var(--teal-light);
}

.btn-secondary,
.btn-outline {
    border-color: var(--sand);
    color: var(--ink-soft);
}

.btn-secondary:hover,
.btn-outline:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.5rem 1.1rem;
}

/* -------------------------------------------------------------
   页脚杂项类：三个页面分别用了 footer-brand / footer-mark /
    footer-content / footer-desc / footer-links / footer-copy，
   品牌体系只有 footer-left / right / logo / tagline / sep。
   这里按品牌页脚的语气补齐，避免页脚散架。
   （markup 收敛到同一套类名放到视觉重设计阶段做。）
   ------------------------------------------------------------- */
.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.footer-mark {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

.footer-desc {
    font-size: 0.85rem;
    color: var(--ink-muted);
    max-width: 32rem;
}

.footer-links {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--ink-muted);
    transition: color 0.3s var(--ease-out);
}

.footer-links a:hover {
    color: var(--teal);
}

.footer-copy {
    font-size: 0.8rem;
    color: var(--ink-faint);
}