/* =====================================================================
   MistifyTea AI Community · Design Tokens
   与 mistifytea.com 主站同一套品牌源（自 mistifyteaweb-src/src/styles/tokens.css
   复制并追加社区门户专用令牌）。其余样式文件一律引用 var()，不得硬编码色值。
   基调：东方雅集 + 海派克制 · 墨黑 / 茶褐 / 米白 / 暗金
   ===================================================================== */
:root {
  /* ---- 中性 · 墨 ---- */
  --c-ink-900: #1a1714;
  --c-ink-800: #221d18;
  --c-ink-700: #2e2720;
  --c-ink-600: #3b332a;
  --c-ink-500: #5a4f42;
  --c-ink-400: #8a7c6a;
  --c-ink-300: #b8ab98;
  --c-ink-200: #d8cdba;

  /* ---- 纸 · 米白 ---- */
  --c-paper:       #f4efe6;
  --c-paper-soft:  #ece5d8;
  --c-paper-dim:   #ddd3c2;

  /* ---- 茶褐 accent ---- */
  --c-tea-700: #5b3a23;
  --c-tea-600: #6f4a2c;
  --c-tea-500: #8a5e38;
  --c-tea-400: #a9794c;
  --c-tea-300: #c79a6a;

  /* ---- 暗金 accent ---- */
  --c-gold-600: #8f7139;
  --c-gold-500: #a9863f;
  --c-gold-400: #c2a061;
  --c-gold-300: #d8c188;

  /* ---- 语义色 ---- */
  --c-bg:            var(--c-paper);
  --c-bg-alt:        var(--c-paper-soft);
  --c-surface:       #fff;
  --c-surface-ink:   var(--c-ink-800);
  --c-text:          var(--c-ink-900);
  --c-text-soft:     var(--c-ink-500);
  --c-text-invert:   var(--c-paper);
  --c-line:          var(--c-ink-200);
  --c-line-soft:     var(--c-paper-dim);

  --c-primary:        var(--c-tea-700);
  --c-primary-strong: #4a2f1c;
  --c-primary-ink:    var(--c-paper);
  --c-accent:         var(--c-gold-600);
  --c-on-accent:      var(--c-paper);

  --c-ok:      #4f6b43;
  --c-warn:    #9a6a2f;
  --c-danger:  #9a3b2f;

  /* ---- 字体（与主站一致的 Google Fonts 例外 + 系统回退） ---- */
  --font-serif:   "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans:    "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;

  /* ---- 字号阶梯（Mobile-first） ---- */
  --fs-eyebrow: 12px;
  --fs-meta:    13px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-h3:      20px;
  --fs-h2:      26px;
  --fs-h1:      34px;
  --fs-display: 46px;
  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-base:    1.7;
  --ls-wide:    0.18em;
  --ls-mid:     0.06em;

  /* ---- 间距（8pt 栅格） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- 圆角 ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---- 阴影 ---- */
  --sh-1: 0 1px 2px rgba(26, 23, 20, .06);
  --sh-2: 0 4px 16px rgba(26, 23, 20, .10);
  --sh-3: 0 14px 44px rgba(26, 23, 20, .18);

  /* ---- 动效 ---- */
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 620ms;

  /* ---- 布局 ---- */
  --maxw: 1080px;
  --gutter: 20px;
  --header-h: 60px;

  /* ---- 社区门户专用 ---- */
  --avatar-sm: 36px;
  --avatar-md: 56px;
  --avatar-lg: 120px;
  --avatar-xl: 180px;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 17px;
    --fs-h3: 24px;
    --fs-h2: 34px;
    --fs-h1: 52px;
    --fs-display: 64px;
    --gutter: 32px;
  }
}