/* ============================================================
   Meerpix — 设计令牌
   浅色为基准，深色只重定义令牌。所有令牌先在裸 :root 声明。
   ============================================================ */
:root{
  /* 中性色带轻微暖偏，与琥珀 Logo 同源，避免"未经选择的灰" */
  --paper:      #f7f6f3;
  --paper-2:    #efede8;
  --card:       #ffffff;
  --ink:        #17161a;
  --ink-2:      #6b6862;
  --ink-3:      #96928a;
  --line:       #e2dfd8;
  --line-soft:  #ecead4;

  /* App 自己的画布 —— 深色段落用 */
  --canvas:     #0e0e11;
  --canvas-2:   #17171c;
  --canvas-ink: #f4f2ee;
  --canvas-ink2:#a5a29b;
  --canvas-line:#2a2a31;

  /* 唯一强调色：Logo 的琥珀。全页限用三处 */
  --amber:      #d08b1f;

  --btn-bg:     #17161a;
  --btn-ink:    #ffffff;

  --focus:      #d08b1f;

  --display: Archivo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --measure: 34rem;
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16161a; --paper-2:#1d1d22; --card:#1d1d22;
    --ink:#f2f0ec; --ink-2:#a3a099; --ink-3:#78756e;
    --line:#2c2c33; --line-soft:#33323a;
    --canvas:#0a0a0c; --canvas-2:#121216;
    --canvas-line:#26262d;
    --btn-bg:#f2f0ec; --btn-ink:#16161a;
  }
}
:root[data-theme="dark"]{
  --paper:#16161a; --paper-2:#1d1d22; --card:#1d1d22;
  --ink:#f2f0ec; --ink-2:#a3a099; --ink-3:#78756e;
  --line:#2c2c33; --line-soft:#33323a;
  --canvas:#0a0a0c; --canvas-2:#121216;
  --canvas-line:#26262d;
  --btn-bg:#f2f0ec; --btn-ink:#16161a;
}

/* 跳转链接：平时移出视口，获得键盘焦点时滑入 */
.skip{position:fixed;left:12px;top:-70px;z-index:200;padding:10px 16px;border-radius:9px;
      background:var(--btn-bg);color:var(--btn-ink);font-size:.9rem;font-weight:600;
      text-decoration:none;transition:top .18s}
.skip:focus{top:12px}

/* 语言切换器 */
.lang{font-family:var(--mono);font-size:.76rem;color:var(--ink-2);padding:5px 10px;
      border:1px solid var(--line);border-radius:7px;white-space:nowrap;transition:.16s}
.lang:hover{color:var(--ink);border-color:var(--ink-3)}
@media (max-width:860px){.nav .lang{display:none}}

/* ── 品牌标识（素材来自 Meerpix Web Icon Pack v1.0）───────────────── */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand-mascot{height:30px;width:auto;flex:none}
.brand-word{height:19px;width:auto;flex:none}
/* 字标是暖褐实色，深色底上对比不足，按主题切换重填色的版本 */
.brand-word.dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-word.light{display:none}
  :root:not([data-theme="light"]) .brand-word.dark{display:inline}
}
:root[data-theme="dark"] .brand-word.light{display:none}
:root[data-theme="dark"] .brand-word.dark{display:inline}
@media (max-width:560px){ .brand-word{height:16px} .brand-mascot{height:26px} }

/* 页脚的完整横版 logo（含 tagline）。字标与 tagline 都是暖褐实色，
   深色主题下整体压暗，用滤镜提亮而不是再出一套素材 —— 这一处尺寸小、
   形状复杂，重填 alpha 会丢掉吉祥物的多色层次。 */
.brand-full{display:inline-flex;margin-right:auto}
.brand-full img{height:34px;width:auto}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-full img{filter:brightness(1.9) saturate(.9)}
}
:root[data-theme="dark"] .brand-full img{filter:brightness(1.9) saturate(.9)}
@media (max-width:560px){ .brand-full img{height:28px} }