/**
 * 响应式 token
 *
 * 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
 * 原则：
 * - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
 * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 320-540px
 *   之间平滑缩放，并避免小屏过度压缩。
 * - 业务 CSS 优先使用语义 token，避免页面散落硬编码尺寸。
 */
:root {
  --app-design-width: 540px;
  --app-max-width: var(--shell-max-width, 540px);
  --app-viewport-height: 100dvh;
  --app-visible-height: 100dvh;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);

  /* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
  --page-padding-x: clamp(18px, 5.185vw, 28px);
  --page-padding-y: clamp(14px, 3.333vw, 20px);
  --page-section-gap: clamp(12px, 3.333vw, 18px);
  --page-section-gap-lg: clamp(16px, 4.444vw, 24px);

  /* 页面级语义尺寸 */
  --responsive-display-title: clamp(28px, 6.296vw, 34px);
  --responsive-page-title: clamp(22px, 5.185vw, 28px);
  --responsive-section-title: clamp(17px, 3.704vw, 20px);
  --responsive-card-title: clamp(16px, 3.333vw, 18px);
  --responsive-body: clamp(14px, 2.963vw, 16px);
  --responsive-caption: clamp(12px, 2.407vw, 13px);
  --responsive-micro: clamp(10px, 2.222vw, 12px);

  --responsive-card-radius: clamp(20px, 5.185vw, 28px);
  --responsive-card-radius-sm: clamp(18px, 4.074vw, 22px);
  --responsive-card-padding: clamp(14px, 3.333vw, 18px);
  --responsive-card-padding-lg: clamp(18px, 4.074vw, 22px);
  --responsive-control-height: clamp(44px, 8.889vw, 48px);
  --responsive-icon-button-size: clamp(38px, 8.148vw, 44px);
  --responsive-icon-size-sm: clamp(14px, 2.963vw, 16px);
  --responsive-icon-size-md: clamp(18px, 4.444vw, 24px);
  --responsive-spinner-size: clamp(16px, 3.333vw, 18px);
  --responsive-dot-size: clamp(6px, 1.481vw, 8px);
  --responsive-inline-gap-xs: clamp(4px, 0.926vw, 5px);
  --responsive-pill-padding-sm: clamp(3px, 0.741vw, 4px)
    clamp(7px, 1.667vw, 9px);

  /* Chat 专用响应式尺寸 */
  --chat-inline-padding: clamp(14px, 3.704vw, 20px);
  --chat-bubble-max-width: min(75%, 280px);
  --chat-media-size: min(64vw, 240px);
  --chat-avatar-size: clamp(38px, 7.963vw, 43px);
  --chat-send-button-size: clamp(40px, 8.148vw, 44px);

  /* Profile 专用响应式尺寸 */
  --profile-user-padding-y: clamp(18px, 3.704vw, 20px);
  --profile-card-gap-y: clamp(6px, 1.481vw, 8px);
  --profile-card-padding-x: clamp(18px, 5.185vw, 28px);
  --profile-card-padding-y: clamp(16px, 3.333vw, 18px);
  --profile-card-padding-right: clamp(10px, 2.222vw, 12px);
  --profile-avatar-size: clamp(48px, 10.37vw, 56px);
  --profile-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);

  /* Subscription 专用响应式尺寸 */
  --subscription-section-notch-size: clamp(18px, 4.444vw, 24px);
  --subscription-plan-grid-gap: clamp(7px, 1.667vw, 9px);
  --subscription-plan-card-min-height: clamp(108px, 23.704vw, 128px);
  --subscription-plan-title-size: clamp(16px, 3.519vw, 19px);
  --subscription-price-size-lg: clamp(24px, 5.556vw, 30px);
  --subscription-offer-badge-padding: clamp(4px, 0.741vw, 5px)
    clamp(7px, 1.481vw, 8px);
  --subscription-coin-icon-size: clamp(28px, 5.926vw, 32px);
  --subscription-coin-svg-size: clamp(16px, 3.333vw, 18px);
  --subscription-coin-column-width: clamp(42px, 8.889vw, 48px);
}