/* ========== 设计变量系统 ========== */
:root{
  /* 背景色阶 */
  --bg-0:#FFFFFF;
  --bg-1:#F8FAFC;
  --bg-2:#F1F4F8;
  --bg-3:#E4E9F0;

  /* 文字色阶 */
  --fg:#2C3E50;
  --fg-2:#6B7B8C;
  --fg-3:#A0AEC0;

  /* 强调色 */
  --pink:#FF8FAB;
  --pink-deep:#FF5C8D;
  --pink-soft:#FFF0F5;

  /* 辅助色 */
  --purple:#C3A2E8;
  --purple-deep:#9B72D0;
  --purple-soft:#F5F0FA;
  --mint:#A8E6CF;
  --yellow:#FFE5A8;
  --sky:#B5D8F0;
  --coral:#FFB5A0;

  /* 状态色 */
  --success:#6BCF7F;
  --warning:#FFD93D;
  --danger:#FF6B6B;
  --info:#6FB1E3;

  /* 渐变 */
  --grad-main:linear-gradient(135deg,#FF8FAB 0%,#FF5C8D 100%);
  --grad-soft:linear-gradient(135deg,#FFF0F5 0%,#F5F0FA 100%);
  --grad-warm:linear-gradient(135deg,#FFB5A0 0%,#FFE5A8 100%);
  --grad-cool:linear-gradient(135deg,#A8E6CF 0%,#B5D8F0 100%);

  /* 线条 */
  --line:#E8EDF2;
  --line-strong:#D1D9E6;

  /* 阴影 */
  --shadow-sm:0 1px 4px -1px rgba(44,62,80,.05);
  --shadow-md:0 4px 16px -6px rgba(44,62,80,.08);
  --shadow-lg:0 12px 32px -10px rgba(44,62,80,.12);
  --shadow-pink:0 4px 12px -3px rgba(255,92,141,.35);
  --shadow-pink-hover:0 6px 16px -4px rgba(255,92,141,.45);

  /* 圆角 */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-full:999px;

  /* 间距 */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
}