danyang-match/miniapp/app.wxss

/**
 * 丹阳公益婚恋服务平台 - 全局 Design Token
 *
 * 依据《前端组件库与 Design Token 规范 V1.0》
 * 单位说明：rpx（750rpx = 屏幕宽度），规范 px 值按 2x 映射为 rpx
 * 禁止页面层写死颜色/间距/圆角，必须引用 var(--token)
 */

page {
  /* ============ 品牌主色（规范 §3） ============ */
  --color-primary: #E96B6B;
  --color-primary-active: #D95F5F;
  --color-primary-light: #FFF3F2;
  --color-primary-lighter: #FFF8F7;

  /* ============ 小程序参考图品牌主题 ============ */
  --mini-night-start: #172A72;
  --mini-night-end: #25104F;
  --mini-night-soft: #3445A1;
  --mini-accent-pink: #FF4F91;
  --mini-accent-coral: #FF6A78;
  --mini-card-bg: rgba(255, 255, 255, 0.98);
  --mini-text: #1F2744;
  --mini-muted: #7D839B;
  --mini-card-radius: 24rpx;
  --mini-text-on-night: #FFFFFF;
  --mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
  --mini-shadow: 0 16rpx 40rpx rgba(28, 30, 88, 0.14);

  /* ============ 功能色（规范 §4） ============ */
  --color-success: #2E9B68;
  --color-success-light: #ECF8F2;
  --color-warning: #E59A32;
  --color-warning-light: #FFF7E9;
  --color-danger: #D94A4A;
  --color-danger-light: #FFF0F0;
  --color-info: #4A7CD4;
  --color-info-light: #EEF4FF;

  /* ============ 中性色（规范 §5-6） ============ */
  --color-text-primary: #222222;
  --color-text-secondary: #444444;
  --color-text-tertiary: #777777;
  --color-text-placeholder: #999999;
  --color-text-disabled: #B5B5B5;
  --color-text-inverse: #FFFFFF;     /* 用于 primary/success 等深色背景上的文字 */

  --color-border: #EEEEEE;
  --color-divider: #F0F0F0;
  --color-border-focus: #E96B6B;
  --color-border-error: #D94A4A;

  --color-bg-page: #FAFAF8;
  --color-bg-card: #FFFFFF;
  --color-bg-disabled: #F3F3F3;
  --color-bg-overlay: rgba(0, 0, 0, 0.45);

  /* ============ 字体（规范 §7-11） ============ */
  --font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  --font-size-xs: 24rpx;   /* 12px */
  --font-size-sm: 26rpx;   /* 13px */
  --font-size-md: 28rpx;   /* 14px */
  --font-size-base: 32rpx; /* 16px */
  --font-size-lg: 36rpx;   /* 18px */
  --font-size-xl: 40rpx;   /* 20px */
  --font-size-2xl: 48rpx;  /* 24px */
  --font-size-3xl: 56rpx;  /* 28px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ============ 间距（规范 §12，4px 栅格） ============ */
  --spacing-1: 8rpx;   /* 4px */
  --spacing-2: 16rpx;  /* 8px */
  --spacing-3: 24rpx;  /* 12px */
  --spacing-4: 32rpx;  /* 16px */
  --spacing-5: 40rpx;  /* 20px */
  --spacing-6: 48rpx;  /* 24px */
  --spacing-8: 64rpx;  /* 32px */
  --spacing-10: 80rpx; /* 40px */
  --spacing-12: 96rpx; /* 48px */

  --spacing-page-x: 32rpx;          /* 页面左右 16px */
  --spacing-section: 48rpx;         /* 区块间 24px */
  --spacing-card-inner: 32rpx;      /* 卡片内部 16px */
  --spacing-tight: 16rpx;            /* 紧密 8px */

  /* ============ 圆角（规范 §14） ============ */
  --radius-sm: 16rpx;    /* 8px */
  --radius-md: 24rpx;    /* 12px */
  --radius-lg: 32rpx;    /* 16px */
  --radius-xl: 40rpx;    /* 20px */
  --radius-full: 9999rpx;

  /* ============ 阴影（规范 §15，极轻） ============ */
  --shadow-card: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
  --shadow-popup: 0 16rpx 64rpx rgba(0, 0, 0, 0.10);

  /* ============ 边框（规范 §16） ============ */
  --border-width: 1rpx;

  /* ============ 动效（规范 §17） ============ */
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 300ms;
  --ease-standard: ease-out;

  /* ============ 层级 z-index（规范 §90） ============ */
  --z-base: 1;
  --z-sticky: 100;
  --z-tabbar: 200;
  --z-dropdown: 500;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ============ 页面基础样式 ============ */
  background-color: var(--color-bg-page);
  font-family: var(--font-family-cn);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

/* ============ 通用工具类 ============ */
.container {
  padding: var(--spacing-page-x);
}

.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-white { color: var(--color-text-inverse); }
.text-brand { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }
.font-2xl { font-size: var(--font-size-2xl); }
.font-3xl { font-size: var(--font-size-3xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }

/* 文本省略 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 安全区底部留白（避开 Home Indicator） */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 页面卡片基础样式（中低密度留白） */
.card-base {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-card-inner);
  box-shadow: var(--shadow-card);
}

/* 分割线 */
.divider {
  height: var(--border-width);
  background: var(--color-divider);
}