/* 星眠 H5 — CSS 自定义属性 (暗黑主题) */
/* rpx → px: 除以 2。例如 32rpx = 16px, 24rpx = 12px */

:root {
  /* ===== 背景色 ===== */
  --bg-primary: #111113;
  --bg-surface: #1B1C22;
  --bg-card: #17171C;
  --bg-glass: rgba(27, 28, 34, 0.82);
  --bg-input: rgba(255, 255, 255, 0.06);

  /* ===== 文字色 ===== */
  --text-primary: #F3F3F5;
  --text-secondary: #7F7F87;
  --text-muted: #6D6D75;
  --text-desc: #9A9AA3;

  /* ===== 品牌色 ===== */
  --color-primary: #FF5D6C;
  --color-primary-light: #FF6A74;
  --color-primary-end: #DB3656;
  --color-primary-mid: #FF4466;
  --color-gold: #C8A94E;
  --color-story: #61D7FF;
  --color-success: #4CAF50;

  /* ===== 圆角 ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== 间距 ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* ===== 字体大小 ===== */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 27px;

  /* ===== 阴影 ===== */
  --shadow-card: 0 9px 21px rgba(0, 0, 0, 0.2);
  --shadow-hero: 0 13px 29px rgba(0, 0, 0, 0.24);
  --shadow-glass: 0 10px 24px rgba(0, 0, 0, 0.18);
  --shadow-cta: 0 9px 18px rgba(255, 68, 102, 0.22);

  /* ===== 安全区域 ===== */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ===== 过渡 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}