/* ============================================================
   离猫设计系统 Token — 1:1 映射 Flutter app_colors.dart
   Pipeline: tokens.css ↔ Flutter app_colors.dart ↔ pen_tokens.dart
   ============================================================ */

:root {
  /* === 品牌主色（蓝）=== */
  --primary: #2563EB;
  --primary-soft: #EFF6FF;
  --primary-bg: #EFF6FF;
  --primary-border: #BFDBFE;
  --primary-strong: #1D4ED8;

  /* === 背景 / 表面 === */
  --page-bg: #F5F5F7;        /* xqPageBg / bgBase */
  --surface: #FFFFFF;        /* xqCardBg / surface */
  --surface-alt: #EEF2F7;    /* xqEditBg / xqSurface2 */
  --surface-dim: #F7F8FA;

  /* === 文字 === */
  --text-main: #1A1A2E;      /* textMain / xqMainText */
  --text-sub: #6E7191;       /* textSub / xqSecondText */
  --text-muted: #9DA3B4;     /* textMuted / xqHintText */
  --text-white: #FFFFFF;

  /* === VIP 金色族（仅 VIP/支付状态）=== */
  --gold: #F2C467;
  --gold-soft: #FFF8ED;
  --gold-deep: #7A4A08;
  --gold-light: #FFDD98;
  --gold-dim: rgba(255, 221, 152, 0.12);
  --gold-gradient: linear-gradient(135deg, #F2C467, #E5A73A, #D4929A);
  --gold-gradient-soft: linear-gradient(135deg, #FFF8ED, #FFE7AD);

  /* VIP 深色金皮肤（男版 VIP 卡） */
  --vip-dark-1: #1C1C1B;
  --vip-dark-2: #272726;
  --vip-dark-3: #2F2F2E;
  --vip-dark-4: #3A3A39;
  --vip-card-gold-1: #FFE7AD;
  --vip-card-gold-2: #E9AF33;

  /* === 钱包/邀请深金皮肤（对齐新圈 wallet-invite.html）=== */
  --wallet-grad: linear-gradient(135deg, #2A1D08, #5A4218);      /* 余额卡 深棕→棕 */
  --invite-grad: linear-gradient(135deg, #2B2010, #755414);      /* 邀请卡 深棕→深金 */
  --gold-bright: #FFE7AD;                                        /* 深底主金色文字 */
  --gold-bright-soft: rgba(255, 231, 173, 0.75);                 /* 深底次级金色文字 */
  --gold-cta: #E9AF33;                                           /* 深底上的金色按钮 */

  /* === 性别区分色 === */
  --male-accent: #2563EB;
  --male-accent-soft: #EFF6FF;
  --female-accent: #EC4899;
  --female-accent-soft: #FDF2F8;
  --female-pink: #FF6B9D;
  --female-pink-soft: #FFF0F5;
  --female-pink-deep: #8B1A4A;
  --female-gradient: linear-gradient(135deg, #EC4899, #F472B6);
  /* 我的页女版柔和粉（header/VIP 卡）*/
  --mine-pink-soft: #FFEAF2;        /* 女版 header 渐变起 */
  --mine-pink-mid: #FFD3E4;         /* 女版 header/VIP 渐变中 */
  --mine-pink-deep: #F8A8C8;        /* 女版 VIP 卡渐变终 */
  /* 收益双卡 */
  --wallet-card-bg: #FFF8E1;        /* 钱包卡底 */
  --wallet-amount: #8B6914;         /* 钱包金额（女版）*/
  --wallet-hint: #A09D9C;           /* 卡提示灰 */
  --invite-card-bg: #FFF0F3;        /* 邀请卡底 */

  /* === 功能色 === */
  --success: #22C55E;
  --success-soft: #ECFDF3;
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.1);  /* 危险浅底（原内联 rgba(239,68,68,0.1)）*/
  --red-point: #FF4853;       /* 未读红点 */
  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.1); /* 警示浅底（原内联 rgba(245,158,11,0.1)）*/
  --online: #00E69D;
  --green: #00CB64;
  --verify-green: #18D363;

  /* 支付品牌 */
  --pay-wechat: #22C55E;
  --pay-alipay: #1677FF;

  /* === 边框 / 分割 === */
  --border: #E4E7ED;
  --card-border: #EBEDF2;
  --divider: #EBEDF2;
  --line-soft: #EDF1F6;

  /* === 遮罩 === */
  --backdrop: rgba(17, 24, 39, 0.6);
  --overlay-badge: rgba(17, 24, 39, 0.8);
  --scrim-1: rgba(0, 0, 0, 0.25);
  --scrim-2: rgba(0, 0, 0, 0.55);
  --scrim-3: rgba(0, 0, 0, 0.75);

  /* === 间距（Flutter AppSpacing dp → CSS px）=== */
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-25: 25px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* === 圆角（Flutter AppRadii → CSS）=== */
  --r-4: 4px;
  --r-7: 7px;
  --r-8: 8px;       /* sm */
  --r-10: 10px;
  --r-12: 12px;     /* md */
  --r-14: 14px;     /* cta */
  --r-16: 16px;     /* lg */
  --r-18: 18px;     /* dialog */
  --r-20: 20px;     /* xl / sheet */
  --r-25: 25px;
  --r-28: 28px;
  --r-full: 9999px;

  /* === 字号（Flutter AppFontSize sp → CSS px）=== */
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;    /* caption */
  --fs-12: 12px;    /* small / label */
  --fs-13: 13px;
  --fs-14: 14px;    /* body */
  --fs-15: 15px;
  --fs-16: 16px;    /* large */
  --fs-17: 17px;
  --fs-18: 18px;    /* title */
  --fs-20: 20px;    /* display */
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* === 字重 === */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* === 字体族 === */
  --font-sans: 'Public Sans', 'PingFang SC', 'Noto Sans SC', -apple-system, system-ui, sans-serif;

  /* === 阴影 === */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-fab: 0 4px 16px rgba(37, 99, 235, 0.3);

  /* === 布局尺寸（Flutter AppLayout → CSS）=== */
  --header-h: 48px;
  --appbar-h: 44px;
  --tabbar-h: 83px;         /* 49 + 34 safe area */
  --tabbar-content-h: 49px;
  --tab-item-h: 43px;
  --tab-icon-size: 24px;
  --tab-label-size: 11px;
  --bottom-cta-h: 90px;     /* 10 + 46 + 34 */
  --page-pad-h: 16px;
  --cta-h: 46px;
  --input-h: 56px;
  --device-w: 375px;
  --device-h: 812px;

  /* === 动效 === */
  --dur-short: 150ms;
  --dur-medium: 300ms;
  --dur-long: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* === 补全 token（P2: 消除内联硬编码，Flutter 迁移友好）=== */
  --white: #FFFFFF;
  --black: #000000;
  --teal: #14B8A6;
  --teal-soft: #F0FDFA;
  --orange: #F97316;
  --warning-bg: #FFFBEB;

  /* 透明度梯度（消除 rgba 内联）*/
  --white-a15: rgba(255,255,255,0.15);
  --white-a25: rgba(255,255,255,0.25);
  --white-a30: rgba(255,255,255,0.30);
  --white-a40: rgba(255,255,255,0.40);
  --white-a55: rgba(255,255,255,0.55);
  --white-a60: rgba(255,255,255,0.60);
  --white-a70: rgba(255,255,255,0.70);
  --white-a90: rgba(255,255,255,0.90);
  --black-a20: rgba(0,0,0,0.20);
  --black-a50: rgba(0,0,0,0.50);
  --black-a55: rgba(15,23,42,0.55);
  --primary-a10: rgba(37,99,235,0.10);
  --surface-a45: rgba(238,242,247,0.45);   /* 模糊遮罩：喜欢我的/访客 未解锁 */

  /* 尺寸 token（消除高频 px 内联）*/
  --bw: 1px;              /* border-width */
  --bw-2: 1.5px;          /* border-width 中 */
  --bw-3: 2px;            /* border-width 粗（avatar/radio/tab 下划线）*/
  --btn-sm-h: 30px;       /* 小按钮 */
  --btn-md-h: 40px;       /* 中按钮 */
  --btn-h: 44px;          /* 标准按钮 */
  --btn-h-lg: 48px;       /* 大按钮（登录/认证）*/
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 22px;

  /* === P4: avatar/图片尺寸 token（消除高频裸 px）=== */
  --avatar-xs: 32px;      /* 列表小头像 */
  --avatar-sm: 40px;      /* 图标容器 */
  --avatar-md: 56px;      /* 社区/认证头像 */
  --avatar-lg: 80px;      /* 状态页 hero 图标 */
  --img-sm: 52px;         /* feed 列表缩略图 */
  --img-md: 100px;        /* QR / album 中图 */
  --img-lg: 120px;        /* 人脸认证上传框 */
  --img-xl: 180px;        /* 动态大图 */
}