/* ==========================================================================
   base/typography.css — 字体归位层 + 颜文字点缀层

   ⚠ 必须【最后】加载：本文件负责把展示字体盖到组件层的默认字体上，
     同优先级下靠加载顺序取胜。

   分配原则
   · 展示字体（站酷快乐体）→ 标题 / 按钮 / 圆钮 / 徽章 / 导航
     可爱只上"字数少、要设计感"的位置
   · 数字字体（Fredoka）→ 计数 / 序号 / 时间等纯拉丁数字
   · 正文 → 系统黑体（tokens.css 的 --font），长文可读性优先
   · 颜文字 → 点缀，出现在标题条 / 页面标题 / 按钮 / 空状态 / 提示语上。
     "可爱"靠密度，"高级感"靠克制 —— 所以字号都压在小尺寸、
     透明度压在 0.5~0.8，永远当装饰、不当内容。

   换字体只需改 tokens.css 的 --font-title / --font-num，这里不用动。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 展示字体：ZCOOL KuaiLe
   -------------------------------------------------------------------------- */

.brand-mark,
.page-title,
.block-title,
.section-bar h2,
.section-bar h3,
.modal-title,
.drawer-title,
.sidebar-title,
.poster-title,
.companion-name,
.carousel-card-name,
.message-name,
.video-name,
.foot-mark,
.profile h1,
.owner-profile,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.btn-text,
.chip,
.tab-btn,
.nav-pill,
.sidebar-link,
.drawer-link,
.module-circle,
.avatar-glyph,
.banner-fallback,
.group-toggle,
.eyebrow,
.back-to-top,
.toast {
  font-family: var(--font-title);
}

/* --------------------------------------------------------------------------
   2 · 数字 / 英文：Fredoka
   -------------------------------------------------------------------------- */

.page-count,
.page-count strong,
.pager-info,
.pager-info b,
.poster-index,
.sidebar-badge,
.message-time,
.char-hint b {
  font-family: var(--font-num);
  /* Fredoka 最粗只到 700，禁掉合成加粗，避免 800/900 时笔画被算法糊掉 */
  font-synthesis-weight: none;
}

/* --------------------------------------------------------------------------
   3 · 换字后的字形微调
   快乐体字面比系统黑体更饱满，为黑体设的字距要收一点才不散
   -------------------------------------------------------------------------- */

.section-bar h2,
.section-bar h3 {
  letter-spacing: 0.03em;
}

.module-circle {
  letter-spacing: 0;
}

/* 圆钮里的文字多一行时，行高收紧避免顶到圆形边缘 */
.module-circle.simple-circle {
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   4 · 颜文字层
   ⚠ 必须显式指定 --font-kaomoji：快乐体不含 ᴗ ♡ ｡ ≧ ᴗ˂ 这些字符，
     不写的话会落到浏览器默认字体，字形大小对不上，点缀会显脏。
   -------------------------------------------------------------------------- */

/* 4.1 区块标题条：左侧表情 + 右侧小符号
     （几何由 tokens.css / layout.css 负责，这里只管内容和字体） */

.section-bar h2::before,
.section-bar h3::before {
  content: "(｡•ᴗ•｡)";
  display: inline-block;
  margin-right: 0.45em;
  font-family: var(--font-kaomoji);
  font-size: 0.56em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: 0.16em;
  opacity: 0.55;
  text-shadow: none;
  transform: translateY(0);
  animation: kaoBob 3.4s var(--ease) infinite;
}

.section-bar h2::after,
.section-bar h3::after {
  content: "♡";
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-kaomoji);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: 0.1em;
  color: var(--tone-deep, var(--ink));
  opacity: 0.66;
  text-shadow: none;
}

/* 陪陪展示（紫条）：换一套表情，别整站一张脸 */
.section-bar.bar-grape h2::before,
.section-bar.bar-grape h3::before {
  content: "(≧ω≦)";
}

.section-bar.bar-grape h2::after,
.section-bar.bar-grape h3::after {
  content: "✧";
}

/* 4.2 每个板块再细分一张脸（都挂在橙条上，靠父级区分） */

.message-board .section-bar h2::before {
  content: "(｡•́‿•̀｡)";
}

.message-board .section-bar h2::after {
  content: "♡";
}

.order-notice .section-bar h2::before {
  content: "(๑˃ᴗ˂)";
}

.order-notice .section-bar h2::after {
  content: "✿";
}

.owner-card .section-bar h2::before {
  content: "(◍•ᴗ•◍)";
}

.owner-card .section-bar h2::after {
  content: "❀";
}

.price-table-box .section-bar h2::before {
  content: "(๑˃̵ᴗ˂̵)";
}

.price-table-box .section-bar h2::after {
  content: "✧";
}

/* 4.3 大标题区：上方一行招呼 */
.profile::before {
  content: "(｡･ω･｡)ﾉ♡";
  display: block;
  font-family: var(--font-kaomoji);
  font-size: clamp(14px, 2.8vw, 18px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.72;
  animation: kaoWave 4.2s var(--ease) infinite;
  transform-origin: 70% 80%;
}

/* 工作室名右侧再补一枚小爱心（用 h1 的 ::after 会和糖粒点冲突，
   所以挂在 .profile 容器上） */
.profile::after {
  content: "谢谢你来玩 ♡";
  font-family: var(--font-kaomoji);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--faint);
  opacity: 0.85;
}

/* 4.4 板块页大标题：前面一枚小符号 */
.page-title::before {
  content: "✧";
  display: inline-block;
  margin-right: 0.34em;
  font-family: var(--font-kaomoji);
  font-size: 0.6em;
  font-weight: 400;
  color: var(--candy-pink);
  opacity: 0.8;
  vertical-align: 0.22em;
  animation: kaoBob 3.8s var(--ease) infinite;
}

/* 4.5 眉标（eyebrow）：后面补一个颜文字
   ⚠ .eyebrow::before 已被 tokens.css 用作那根小横线，这里只能用 ::after */
.eyebrow::after {
  content: "( •̀ ω •́ )✧";
  font-family: var(--font-kaomoji);
  font-size: 0.95em;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.6;
}

/* 4.6 按钮：文字前的小糖符（.btn::after 已被 effects.css 用作糖粒，故用 ::before） */
.form-foot .btn::before,
.modal-copy .btn::before {
  content: "✧";
  font-family: var(--font-kaomoji);
  font-size: 0.86em;
  font-weight: 400;
  opacity: 0.85;
  line-height: 1;
}

/* 4.7 留言板表单下方的字数提示 */
.char-hint::before {
  content: "(๑•̀ㅂ•́)";
  margin-right: 6px;
  font-family: var(--font-kaomoji);
  font-size: 0.92em;
  font-weight: 400;
  opacity: 0.55;
}

/* 4.8 海报卡片：注释行与提示行 */
.poster-note::before {
  content: "♪ ";
  font-family: var(--font-kaomoji);
  font-weight: 400;
  opacity: 0.7;
}

.poster-caption::before {
  content: "✧ ";
  font-family: var(--font-kaomoji);
  font-weight: 400;
  opacity: 0.8;
}

/* 4.9 空状态：默认一张脸，留言板 / 陪陪列表各自换一张 */
.empty::before {
  content: "(・∀・)";
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-kaomoji);
  font-size: 0.98em;
  font-weight: 400;
  vertical-align: -0.06em;
  color: var(--tone-deep, var(--muted));
  opacity: 0.75;
}

.message-list .empty::before {
  content: "(´･ω･`)";
}

.companion-grid .empty::before {
  content: "(。•́︿•̀。)";
}

/* 4.10 官号标签：名字前一枚小爱心 */
.owner-profile > span::before {
  content: "♡ ";
  font-family: var(--font-kaomoji);
  font-weight: 400;
  color: var(--candy-pink);
  opacity: 0.85;
}

/* 4.11 全局提示（toast） */
.toast::before {
  content: "(๑˃ᴗ˂)ﻭ ";
  font-family: var(--font-kaomoji);
  font-size: 0.94em;
  font-weight: 400;
  opacity: 0.85;
}

/* 4.12 弹窗标题 */
.modal-title::after,
.video-name::after {
  content: " ♡";
  font-family: var(--font-kaomoji);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--candy-pink);
  opacity: 0.8;
}

/* 4.13 页脚标记（有页脚的板块） */
.foot-mark::before {
  content: "(｡･ω･｡) ";
  font-family: var(--font-kaomoji);
  font-weight: 400;
  opacity: 0.7;
}

/* 4.14 侧栏标题：前面一枚小糖点 */
.sidebar-title::before {
  content: "❥ ";
  font-family: var(--font-kaomoji);
  font-weight: 400;
  color: var(--candy-purple);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   5 · 颜文字动效（极轻，只是个"活着"的感觉）
   -------------------------------------------------------------------------- */

@keyframes kaoBob {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-2px) rotate(3deg);
  }
}

@keyframes kaoWave {
  0%,
  70%,
  100% {
    transform: rotate(0deg);
  }
  76% {
    transform: rotate(-7deg);
  }
  82% {
    transform: rotate(6deg);
  }
  88% {
    transform: rotate(-3deg);
  }
}

/* --------------------------------------------------------------------------
   6 · 移动端：颜文字字号再收一档，避免撑高标题条
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .section-bar h2::before,
  .section-bar h3::before {
    font-size: 0.5em;
    margin-right: 0.35em;
  }

  .section-bar h2::after,
  .section-bar h3::after {
    font-size: 0.62em;
    margin-left: 0.3em;
  }

  /* 小屏上装饰要让位给内容 */
  .eyebrow::after,
  .char-hint::before,
  .profile::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-bar h2::before,
  .section-bar h3::before,
  .page-title::before,
  .profile::before {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   7 · 移动端字号收敛
   之前为了让大屏"单子页"更醒目，把一批标题/说明硬编码到了 17~24px。
   这些值在手机上偏大，这里在小屏统一收一档；只改字号，不动布局与颜色。

   本文件是样式层的最后一个，因此这里的覆盖能稳定压过组件层同名规则。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* —— 单子页页头 —— */
  .page-title {
    font-size: clamp(24px, 7.2vw, 46px);
  }

  .page-count {
    font-size: 15px;
  }

  .page-count strong {
    font-size: 21px;
  }

  /* —— 区块标题条 —— */
  .section-bar h2,
  .section-bar h3 {
    font-size: clamp(19px, 5.4vw, 31px);
  }

  /* —— 左侧目录 —— */
  .sidebar-title {
    font-size: 20px;
  }

  .sidebar-badge {
    font-size: 13px;
  }

  .search-input {
    font-size: 15px !important;
  }

  .group-toggle {
    font-size: 15px;
  }

  .group-count {
    font-size: 12px;
  }

  .group-caret {
    font-size: 12px;
  }

  .sidebar-link {
    font-size: 15px;
  }

  /* —— 内容卡片 —— */
  .poster-index {
    min-width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .poster-title {
    font-size: 19px;
  }

  .poster-placeholder,
  .img-fallback,
  .poster-note {
    font-size: 15px;
  }

  .poster-caption {
    font-size: 17px;
  }

  .tab-btn {
    font-size: 15px;
  }

  /* —— 陪陪展示 —— */
  .companion-name {
    font-size: 19px;
  }

  .companion-desc,
  .companion-placeholder {
    font-size: 15px;
  }

  /* —— 首页 —— */
  .profile h1 {
    font-size: clamp(26px, 9vw, 64px);
  }

  .owner-profile {
    font-size: 15px;
  }

  .module-circle {
    font-size: clamp(16px, 4.2vw, 24px);
  }

  .module-circle.simple-circle {
    font-size: clamp(20px, 6vw, 37px);
  }

  /* —— 轮播 / 弹窗 —— */
  .carousel-card-name {
    font-size: 15px;
  }

  .video-name {
    font-size: clamp(18px, 4.6vw, 28px);
  }
}