/**
 * 响应式 token
 *
 * 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
 * 原则：
 * - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
 * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 360-540px
 *   之间平滑缩放，并避免小屏过度压缩。
 */
:root {
  --app-design-width: 540px;
  --app-max-width: var(--shell-max-width, 540px);

  /* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
  --page-padding-x: clamp(22px, 5.185vw, 28px);

  /* Sidebar 专用响应式尺寸 */
  --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
  --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
  --sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
  --sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
  --sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
  --sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
  --sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);

  /* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
  --font-responsive-md: clamp(14px, 2.963vw, 16px);
  --font-responsive-lg: clamp(16px, 3.333vw, 18px);
  --font-responsive-xl: clamp(18px, 3.704vw, 20px);
  --font-responsive-number-lg: clamp(24px, 5.556vw, 30px);
}
