/* ===== CSS 变量 - 设计令牌 ===== */
:root {
  /* 主色 */
  --color-primary: #1E3A5F;
  --color-primary-light: #2D5A8C;
  --color-primary-lighter: #E8F0F8;
  --color-accent: #FF6B35;
  --color-accent-light: #FFF0EB;

  /* 背景色 */
  --color-bg: #F5F7FA;
  --color-bg-white: #FFFFFF;
  --color-bg-gray: #F9FAFB;

  /* 文字色 */
  --color-text: #1A202C;
  --color-text-secondary: #718096;
  --color-text-tertiary: #A0AEC0;
  --color-text-white: #FFFFFF;

  /* 边框 */
  --color-border: #E2E8F0;
  --color-border-light: #EDF2F7;

  /* 功能色 */
  --color-success: #38A169;
  --color-success-light: #F0FFF4;
  --color-warning: #D69E2E;
  --color-warning-light: #FFFAF0;
  --color-danger: #E53E3E;
  --color-danger-light: #FFF5F5;
  --color-info: #3182CE;
  --color-info-light: #EBF8FF;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 字号 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 布局 */
  --header-height: 56px;
  --tabbar-height: 64px;
  --phone-width: 420px;
  --phone-height: 860px;
}