/* =========================================================================
   tokens.css —— 设计令牌
   设计稿坐标系：1242 × 2701（≈ 3× 的 414 × 900 手机屏）
   页面里所有几何尺寸都直接用设计稿像素书写，靠 .stage 的整体 scale 缩放，
   这样任何一处数字都能和设计稿直接对照。
   ========================================================================= */

:root {
  /* ---- 画布 / 缩放 -------------------------------------------------- */
  --design-w: 1242;          /* 设计稿宽（px，无单位数值） */
  --design-h: 2701;          /* 设计稿高 */
  --phone-w: 414px;          /* 手机画布宽 = 设计稿 / 3 */
  --stage-scale: 0.33333333; /* 414 / 1242 */

  /* ---- 颜色（取自素材本身） ----------------------------------------- */
  --a2-bg: #d8bddc;          /* 页面底色 */
  --a2-ink: #691f74;         /* 主色：深紫 */
  --a2-ink-deep: #101820;    /* 黑胶本体 */
  --a2-ink-soft: #c7a0ce;    /* 浅紫 */
  --a2-accent: #a05cbf;      /* 强调紫 */
  --a2-accent-2: #993dbb;    /* 次强调紫 */
  --a2-white: #ffffff;

  /* 进度条 */
  --progress-track: rgba(105, 31, 116, 0.22); /* 未播放轨道 */
  --progress-fill: var(--a2-ink);             /* 已播放 */
  --progress-thumb: var(--a2-ink);            /* 圆点滑块 */

  /* ---- 画布外的舞台底色 --------------------------------------------- */
  --shell-bg: #17131c;
  --shell-bg-2: #241c2b;
  --shell-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* ---- 唱片 ---------------------------------------------------------- */
  --vinyl-duration: 8s;      /* 一圈耗时 */

  /* ---- 页面外壳适配 --------------------------------------------------- */
  --shell-scale: 1;

  /* ---- 动效 ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 尊重系统的「减少动态效果」偏好：停转，但播放状态依然可用 */
@media (prefers-reduced-motion: reduce) {
  :root { --vinyl-duration: 40s; }
}