/* ============================================================================
   设计令牌 · 人气之星 H5
   方向：竖版人物卡 + 玫红点赞色 + 金银铜名次。手机优先，桌面居中成"手机栏"。
   ========================================================================= */

:root {
  /* 底色 */
  --bg: #f4f3f6;
  --surface: #ffffff;
  --surface-2: #fafafb;
  --surface-3: #f1f0f4;

  /* 文字 */
  --ink: #17171f;
  --ink-2: #55555f;
  --ink-3: #6a6a78;
  --ink-invert: #ffffff;

  /* 描边 */
  --line: #ebe9ef;
  --line-strong: #dcd9e2;

  /* 主色：点赞 */
  --like: #ff2e63;
  --like-ink: #d81b4c;
  --like-soft: #fff0f4;
  --like-ring: rgba(255, 46, 99, 0.2);

  /* 名次色 */
  --gold: #e0a02f;
  --gold-soft: #fdf3e0;
  --silver: #9aa3ae;
  --silver-soft: #f0f2f5;
  --bronze: #bd7a48;
  --bronze-soft: #f9efe6;

  /* 语义色 */
  --ok: #0e7a51;
  --ok-soft: #e7f5ef;
  --warn: #a65a06;
  --warn-soft: #fdf3e4;
  --danger: #c0392b;
  --danger-soft: #fdecea;

  /* 头图渐变 */
  /* 头图上始终有白字，渐变最亮的一端也要保证 4.5:1 对比度 */
  --hero-from: #2f1548;
  --hero-mid: #7b2160;
  --hero-to: #c62852;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(23, 23, 31, 0.05), 0 2px 6px rgba(23, 23, 31, 0.04);
  --shadow-2: 0 10px 24px -12px rgba(23, 23, 31, 0.24);
  --shadow-3: 0 -8px 28px -14px rgba(23, 23, 31, 0.22);
  --shadow-like: 0 6px 16px -6px rgba(255, 46, 99, 0.5);

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;

  /* 尺寸 */
  --app-w: 560px;
  --bottombar-h: 60px;

  /* 字体 */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
    "Noto Sans JP", "Meiryo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "SF Pro Display", "Inter", system-ui, sans-serif;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  --dur-1: 0.15s;
  --dur-2: 0.26s;
  --dur-3: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.001s;
    --dur-2: 0.001s;
    --dur-3: 0.001s;
  }
}