/* ==========================================================================
   兔聊 · 设计令牌层 (Design Tokens)
   --------------------------------------------------------------------------
   方向：夜间霓虹的玩趣未来感 / Neon Nocturne Playful
   - 深墨紫底 = 凌晨手机屏幕透出的光
   - 珊瑚粉 = 唯一强调色，只留给关键动作（下载、通话）
   - 琥珀 / 青绿 = 语义色，只表达「直播中」「在线」，不做装饰
   所有组件禁止硬编码色值，一律引用此处变量。
   ========================================================================== */

:root {
  /* ---------- 色彩 · 表面 ---------- */
  --c-bg:          #0c0910;   /* 页面底 · 墨紫近黑（非纯黑，带暖调紫） */
  --c-bg-deep:     #07050b;   /* 更深一层，用于 footer / 遮罩 */
  --c-surface:     #150f1f;   /* 卡片默认面 */
  --c-surface-2:   #1c1529;   /* 卡片悬停面 / 次级面板 */
  --c-surface-3:   #251c36;   /* 浮起面板（弹层、下拉） */
  --c-glass:       rgba(28, 21, 41, 0.72);

  /* ---------- 色彩 · 文字 ---------- */
  --c-text:        #f7f2fb;   /* 正文 · 暖白（非纯白，避免刺眼） */
  --c-text-strong: #ffffff;
  --c-muted:       #a99ebb;   /* 次要文字 */
  --c-muted-2:     #786d8c;   /* 三级文字 / 占位符 */

  /* ---------- 色彩 · 强调（单页仅一个强调色） ---------- */
  --c-accent:      #ff4d79;   /* 珊瑚粉 · CTA、关键数据、选中态 */
  --c-accent-soft: #ff7ea2;   /* 强调色的悬停提亮 */
  --c-accent-dim:  rgba(255, 77, 121, 0.14);
  --c-accent-ink:  #2b0713;   /* 压在强调色上的文字 */

  /* ---------- 色彩 · 氛围（不承担强调职责） ---------- */
  --c-violet:      #7b5cff;   /* 紫 · 光晕、渐变副色 */
  --c-violet-dim:  rgba(123, 92, 255, 0.16);
  --c-cyan:        #58e0e8;   /* 青 · 冷调点缀 */

  /* ---------- 色彩 · 语义 ---------- */
  --c-online:      #3ddc97;   /* 在线 */
  --c-live:        #ffc93c;   /* 直播中 / 热度 */
  --c-warn:        #ffb020;
  --c-danger:      #ff5a5a;

  /* ---------- 描边 ---------- */
  --c-border:        rgba(247, 242, 251, 0.10);
  --c-border-strong: rgba(247, 242, 251, 0.20);
  --c-border-accent: rgba(255, 77, 121, 0.38);

  /* ---------- 字体 ----------
     全部使用系统字体，不加载任何远程字体文件。
     国内网络访问 Google Fonts 基本不通，挂着外链只会白等一次 DNS 和请求；
     标题的张力改由字号、字重（900）与负字距承担，不依赖某个字体文件。 */
  --f-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
               "Segoe UI", "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  /* 正文：拉丁字形优先（微软雅黑的拉丁字形偏窄），中文自动回退到中文字体 */
  --f-body:    -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  /* 等宽：用于版本号、包名、数字表格 */
  --f-mono:    ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono",
               Consolas, "Liberation Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- 流体字阶 ---------- */
  --fs-xs:   0.75rem;                                   /* 12px 标签 */
  --fs-sm:   0.8125rem;                                 /* 13px 辅助 */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);    /* 15→16 正文 */
  --fs-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17→19 引导语 */
  --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);   /* 20→24 卡片标题 */
  --fs-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* 24→32 区块标题 */
  --fs-3xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);  /* 30→44 */
  --fs-4xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);   /* 36→60 页面主标题 */
  --fs-5xl:  clamp(2.75rem, 1.6rem + 5.6vw, 5.25rem);   /* 44→84 首屏主标题 */
  --fs-6xl:  clamp(3.25rem, 1.2rem + 9vw, 7.5rem);      /* 52→120 巨型数字 */

  /* ---------- 行高 / 字距 ---------- */
  --lh-tight:  1.04;
  --lh-snug:   1.2;
  --lh-normal: 1.62;   /* 中文正文行高 ≥1.6 */
  --lh-loose:  1.8;

  --ls-display: -0.035em;  /* 大标题收紧 */
  --ls-heading: -0.02em;
  --ls-body:     0.012em;  /* 中文正文微开 */
  --ls-caps:     0.14em;   /* 全大写小标签 */

  /* ---------- 间距梯度 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* 区块纵向节奏（移动端收窄） */
  --section-y: clamp(64px, 9vw, 128px);

  /* ---------- 圆角 ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;

  /* ---------- 阴影（三级高度，带环境紫而非纯黑） ---------- */
  --sh-1: 0 2px 8px rgba(6, 3, 12, 0.4);
  --sh-2: 0 10px 32px rgba(6, 3, 12, 0.5);
  --sh-3: 0 28px 72px rgba(6, 3, 12, 0.62);
  --sh-glow: 0 0 60px rgba(255, 77, 121, 0.28);

  /* ---------- 动效 ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 170ms;   /* 微交互 */
  --dur-base: 340ms;   /* 常规过渡 */
  --dur-slow: 680ms;   /* 场景过渡 */

  /* ---------- 布局 ---------- */
  --w-page:  1200px;
  --w-wide:  1360px;
  --w-text:  68ch;     /* 中文可读宽度上限 */
  --nav-h:   72px;
}

/* 尊重系统的减少动效偏好：把所有时长归零，动效层全部失效 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}