/* ==========================================================================
   design-tokens.css — PC 端设计令牌
   全部数值实测自目标站 PC 端（1440 视口），非估值。
   注意：PC 端不做响应式，媒体查询一律不写。
   ========================================================================== */

:root {
  --sd-s7: 28px;
  --sd-s9: 80px;
  /* ---------- 表面（实测：主表面 #1b1d27 使用 40 次，页面底 #0b0c12） ---------- */
  --sd-page:      #0b0c12;
  --sd-surface-1: #13141c;
  --sd-surface-2: #1b1d27;
  --sd-surface-3: #262838;
  --sd-line:      #33364a;

  /* ---------- 文字 ---------- */
  --sd-fg-1: #fff8e1;
  --sd-fg-2: #a9acb8;
  --sd-fg-3: #6f7384;

  /* ---------- 强调（实测：会员金 rgb(255,177,61) ×13 / 品牌黄 rgb(255,213,61) ×6） ---------- */
  --sd-gold:      #ffb13d;
  --sd-gold-deep: #ff7a1a;
  --sd-on-gold:   #2b1a06;
  --sd-brand:     #ffd53d;
  --sd-on-brand:  #2b2200;

  --sd-ok:   #3dd68c;
  --sd-warn: #ffb547;
  --sd-bad:  #ff5d5d;

  /* ---------- 字体 ---------- */
  --sd-font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sd-font-ui: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", system-ui, sans-serif;
  --sd-font-num: "Barlow Condensed", "DIN Alternate", "Roboto Condensed", sans-serif;

  /* 实测字号层级 */
  --sd-fs-logo:  26px;   /* 站名 */
  --sd-fs-nav:   15px;   /* 主导航 */
  --sd-fs-title: 32px;   /* 目标站实测分区标题 32px */
  --sd-fs-page-h1: 51.2px;  /* 目标站实测页内 H1（榜单 51.2 / 福利 51.84 / 会员 63.36） */
  --sd-fs-body:  15px;
  --sd-fs-cap:   13px;
  --sd-fs-micro: 11px;   /* 右侧工具、热��标签 */
  --sd-fs-num:   32px;

  /* ---------- PC 栅格（实测） ---------- */
  --sd-content-max: 1376px;   /* 1440 - 32*2 */
  --sd-page-pad:    32px;
  --sd-poster-w:    88px;     /* 实测海报宽 */
  --sd-poster-h:    117px;    /* 实测海报高 3:4 */
  --sd-poster-gap:  12px;
  --sd-grid-cols:   6;        /* 实测每行 6 张 */

  /* ---------- 圆角 ---------- */
  --sd-r-xs: 4px;  --sd-r-sm: 8px;  --sd-r-md: 12px;
  --sd-r-lg: 20px; --sd-r-full: 9999px;

  /* ---------- 间距 ---------- */
  --sd-s1: 4px;  --sd-s2: 8px;   --sd-s3: 12px; --sd-s4: 16px;
  --sd-s5: 20px; --sd-s6: 24px; --sd-s8: 32px; --sd-s12: 48px;

  /* ---------- 动效 ---------- */

  /* ---------- 首屏实测规格（1080 视口，可等比放大） ---------- */
  --sd-hero-title: 54.72px;   /* 目标站实测 Hero 标题 54.72px */
  --sd-hero-btn-h: 56px;      /* 实测主按钮高 */
  --sd-hero-btn-fs: 18px;     /* 实测主按钮字号 */
  --sd-poster-lg: 124px;      /* 目标站实测 选中 124x165 */
  --sd-poster-lg-h: 165px;
  --sd-poster-sm: 88px;       /* 目标站实测 未选 88x117 */
  --sd-poster-sm-h: 117px;
  --sd-thumb: 48px;           /* 实测底部推荐条方图 */
  --sd-thumb-gap: 96px;       /* 实测方图间距（x=-183→-87） */
  --sd-chip-h: 44px;          /* 实测筛选 chip 高 */
  --sd-chip-fs: 16px;         /* 实测筛选 chip 字号 */
  --sd-meta-chip-h: 28px;     /* 实测 Hero 元信息 chip 高 */
  --sd-meta-chip-fs: 12px;
  --sd-search-w: 340px;       /* 实测搜索框宽 */
  --sd-search-h: 38px;        /* 实测搜索框高 */

  --sd-dur:  .24s;
  --sd-ease: cubic-bezier(.2, .8, .2, 1);
}

:root {
  /* ---------- 语义别名 ---------- */
  --page:         var(--sd-page);
--surface:      var(--sd-surface-2);
--surface-2:    var(--sd-surface-3);
--border:       var(--sd-line);
--text:         var(--sd-fg-1);
--text-2:       var(--sd-fg-2);
--text-3:       var(--sd-fg-3);
--primary:      var(--sd-gold);
--primary-deep: var(--sd-gold-deep);
--on-primary:   var(--sd-on-gold);
--font-display: var(--sd-font-display);
--font-ui:      var(--sd-font-ui);
--font-num:     var(--sd-font-num);
}

/* ==========================================================================
   动效关键帧（与目标站一致）
   ========================================================================== */
@keyframes fade-in        { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in       { 0% { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes spin           { to { transform: rotate(360deg); } }
@keyframes progress-fill  { 0% { width: 0; } to { width: 100%; } }
@keyframes shake          { 25%, 75% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
@keyframes unlock-ring    { 0% { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes unlock-shackle { 0% { transform: translateY(4px) rotate(0); } to { transform: translateY(-3px) rotate(-12deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}