/* ==========================================================================
   tokens.css — RedPay 主题设计令牌
   依据 06_DESIGN_SYSTEM.md。取得官方品牌指南后，只需替换本文件的变量值，
   不需改动任何组件代码。

   ⚠️ 无障碍修正：文档 §二 的部分色值在白底 / 渐变上不满足 §十 验收标准
   「所有文字对比度 ≥ 4.5:1」。原始色值一律保留（用于填充与图形），
   另外补一组 *-ink 变量供「文字与图标」使用。实测对比度标注在各行。
   ========================================================================== */

:root {
  /* ── 底与面 ───────────────────────────────────────────────── */
  --bg-base:        #F4F4F6;   /* 页面底色，浅灰 */
  --bg-surface:     #FFFFFF;   /* 卡片、区块 */
  --bg-tint-red:    #FCE6E4;   /* 功能块淡粉底 */
  --bg-tint-gold:   #FDF3DC;   /* 积分类图标底 */

  /* ── 品牌红 ───────────────────────────────────────────────── */
  /* #EA2D2E 取自官方 App 图标（redpay.com.my App-logo-1.png）实测主色，
     取代此前从截图取样的近似值 #E8352A。 */
  --brand:          #EA2D2E;   /* 填充用。白字在其上仅 4.23:1 → 不可作按钮底 */
  /* 官方图标底板色，仅用于图标与品牌物料，不进入界面配色（界面是暖调，这个是冷灰蓝） */
  --redpay-plate:   #E7EEF1;
  --brand-press:    #C82A20;   /* 按下态。白字 5.51:1 ✓ */
  --brand-ink:      #C1272D;   /* 红色文字 / 导航选中 5.84:1 ✓；白字在其上 5.84:1 ✓ */

  /* 主按钮底：用 brand-ink 而非 brand，见上方对比度说明 */
  --brand-fill:     var(--brand-ink);

  /* ── 会员卡渐变（橙 → 珊瑚红） ─────────────────────────────── */
  --card-1:         #F7A64B;
  --card-2:         #F26F4A;
  --card-3:         #EC4A3C;
  /* 卡面上半（浅橙区）的文字色：白字在 #F7A64B 上仅 2.0:1，
     改用深暖棕如同卡面印刷 —— 7.18:1（浅橙）/ 4.88:1（珊瑚）✓
     卡面因此是「上深棕 / 下白字」两段，也更像一张真的卡 */
  --card-ink:       #4A1C10;
  /* 卡面底部压暗层：白字在裸渐变上仅 2.0–2.9:1，必须靠此 scrim 达标。
     只压底部约 40%，上半保持纯净的橙→珊瑚红，不牺牲卡面识别度。
     实测：文字所在区域 alpha ≈ 0.32–0.42 → 白字 4.9–5.7:1 ✓ */
  --card-scrim:     linear-gradient(to top, rgba(88,14,10,0.48) 0%,
                                            rgba(88,14,10,0.38) 30%,
                                            rgba(88,14,10,0) 62%);

  /* ── Hero 渐变 ────────────────────────────────────────────── */
  /* 压暗降饱和：高饱和正红满铺 = 促销感。改用氧化红，红退成「框」不是「底」。
     最亮处 #B3262A 白字 6.51:1 ✓（前一版 #D22E27 为 5.05:1） */
  --hero-grad:      linear-gradient(160deg, #7E1A1E 0%, #9E2025 52%, #B3262A 100%);

  /* ── 积分金 ───────────────────────────────────────────────── */
  --gold:           #F5B841;   /* 图形 / 星标填充 */
  --gold-deep:      #D99A21;   /* 金色图标在淡金底上 */
  --gold-ink:       #8A6008;   /* 金色系文字，白底 6.1:1 ✓ */

  /* ── 文字 ─────────────────────────────────────────────────── */
  --text-primary:   #1A1A1E;   /* 16.9:1 ✓ */
  --text-secondary: #6B6B75;   /*  5.27:1 ✓ */
  --text-tertiary:  #9B9BA5;   /*  2.76:1 ✗ 仅限装饰性图形，禁止用于文字 */
  --text-quiet:     #75757F;   /*  4.56:1 ✓ 用于导航未选态等「弱但仍是文字」 */
  --text-on-brand:  #FFFFFF;

  /* ── 语义 ─────────────────────────────────────────────────── */
  --success:        #2FA96B;   /* 填充 */
  --success-ink:    #1E7A4B;   /* 文字 5.35:1 ✓ */
  --warning:        #E8912F;   /* 填充 */
  --warning-ink:    #A8590C;   /* 文字 5.12:1 ✓ */
  --danger:         #E03B34;   /* 填充 */
  --danger-ink:     #C42B24;   /* 文字 5.4:1 ✓ */

  /* ── 线与影 ───────────────────────────────────────────────── */
  --border-subtle:  rgba(0,0,0,0.06);

  /* 阴影带主色相（偏红棕），不用纯黑灰 —— 暖底上打灰阴影会发脏。
     每层拆成「贴地紧阴影 + 散开环境阴影」两段，单层阴影是模板感的来源。 */
  --shadow-card:    0 1px 2px rgba(62,22,16,0.05),
                    0 6px 16px -4px rgba(62,22,16,0.08);
  --shadow-float:   0 2px 4px rgba(62,22,16,0.06),
                    0 12px 32px -8px rgba(62,22,16,0.16);
  /* 会员卡专用：红调阴影，让卡「浮」在页面上而不是贴着 */
  --shadow-object:  0 4px 10px -2px rgba(190,70,40,0.24),
                    0 18px 40px -14px rgba(190,70,40,0.38);
  /* 卡面材质：顶边内高光 + 发丝内描边 —— 渐变靠这两条才像「物件」 */
  --edge-light:     inset 0 1px 0 rgba(255,255,255,0.30),
                    inset 0 0 0 1px rgba(255,255,255,0.10);

  /* 微噪点：单色 fractalNoise，以 soft-light 叠在渐变上。约 260 字节 */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  /* Hero 暗花纹：鱼鳞纹（扇形波纹），暗压暗、1px 细线 —— 与会员卡的弧形
     波纹同一语言。只用深色线条，白字对比度只会更好不会更差。约 300 字节 */
  --hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='rgba(40,8,6,0.20)'%3E%3Cpath d='M0 48a24 24 0 0 1 48 0'/%3E%3Cpath d='M-24 24a24 24 0 0 1 48 0'/%3E%3Cpath d='M24 24a24 24 0 0 1 48 0'/%3E%3C/g%3E%3C/svg%3E");

  /* ── 字体 ─────────────────────────────────────────────────── */
  /* 红线：绝不载入任何中文 Web Font。首屏字体请求数 = 0。 */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  --font-num: inherit;   /* 数字与正文同字体，靠 tabular-nums 对齐 */

  /* ── 间距 ─────────────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 28px;  --space-7: 40px;

  /* ── 圆角 ─────────────────────────────────────────────────── */
  --radius-tile: 18px;   /* 功能块图标底 */
  --radius-card: 20px;   /* 内容卡片 */
  --radius-hero: 24px;   /* 会员卡、浮起容器 */
  --radius-pill: 999px;

  /* ── 动效 ─────────────────────────────────────────────────── */
  --dur-press:   120ms;
  --dur-page:    220ms;
  --dur-sheet:   260ms;
  --dur-number:  200ms;
  --dur-countup: 600ms;
  --ease-out:    ease-out;
  --ease-page:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sheet:  cubic-bezier(0.2, 0.9, 0.25, 1);

  /* ── 布局 ─────────────────────────────────────────────────── */
  --nav-height: 64px;
  --page-max:   520px;   /* 超宽屏时居中，避免卡片被拉长变形 */
}

/* v1 不做暗色模式：显式锁定，避免系统深色下 UA 反转控件样式 */
:root { color-scheme: light; }