/* ════════════════════════════════════════════════════════
   CFJ-LINK 对客端 — Design Tokens（设计系统单一来源）
   ─────────────────────────────────────────────────────────
   目标：商用级现代 UI（Stripe 克制高级感 + 苹果设计语言）。
   一切颜色 / 间距 / 字号 / 圆角 / 阴影 / 动效时长 / 玻璃接口
   都抽成 CSS 变量集中在此文件，供全站套用，避免散落硬编码。

   先于 style.css / components.css 加载（最低优先级，可被覆盖）。
   ════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ────────────────────────────────────────────────
     颜色 · 中性底板（近黑文字 + 多级灰，克制）
     ──────────────────────────────────────────────── */
  --bg:        #FAFBFC;   /* 应用画布外底（桌面留白区） */
  --bg-2:      #F2F4F7;   /* 浅灰填充（图标底/输入底） */
  --surface:   #FFFFFF;   /* 卡片/面板 */
  --surface-2: #F7F9FC;   /* 次级面板 */

  /* 颜色 · 边框（极细、低对比，Stripe 风分割线） */
  --border:        rgba(16, 24, 40, .08);
  --border-strong: rgba(16, 24, 40, .14);

  /* 颜色 · 文字层级（近黑 → 多级灰） */
  --text:    #101828;   /* 主文字（近黑） */
  --text-2:  #475467;   /* 次文字 */
  --muted:   #98A2B3;   /* 弱文字 / 占位 / 标签 */

  /* 颜色 · 品牌主色（单一主色 + 渐变辅色） */
  --accent:    #1B6FF8;   /* brand blue —— 与官网统一的品牌主色 */
  --accent-2:  #4D94FF;   /* 渐变收尾，仅用于装饰渐变 */
  --accent-ink:#FFFFFF;   /* 主色之上的文字 */
  --glow:      rgba(27, 111, 248, .16);
  --pill:      #E8F1FF;   /* 主色淡底（标签/选中态） */
  --pill-text: #1B6FF8;

  /* 颜色 · 语义（成功 / 警告 / 危险 + 各自淡底） */
  --safe:      #12B76A;
  --safe-bg:   rgba(18, 183, 106, .12);
  --warn:      #F79009;
  --warn-bg:   rgba(247, 144, 9, .12);
  --danger:    #F04438;
  --danger-bg: rgba(240, 68, 56, .12);

  /* ────────────────────────────────────────────────
     字体 · 系统字体栈优先（-apple-system / SF Pro），
     CJK / 阿拉伯回退到 Noto，装饰标题用 Syne，数字等宽。
     ──────────────────────────────────────────────── */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-cjk:    'Noto Sans SC', 'Noto Sans TC', 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei';
  --font-arabic: 'Noto Sans Arabic';

  --font-heading: 'Syne', var(--font-system), var(--font-cjk), sans-serif;
  --font-body:    var(--font-system), var(--font-cjk), var(--font-arabic), sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* 数字专用：等宽数字（tabular-nums），金额/统计/价格不跳动 */
  --font-num:     var(--font-system), var(--font-cjk), sans-serif;

  /* ────────────────────────────────────────────────
     字号 · 流式缩放（clamp）
     ─────────────────────────────────────────────────
     用 clamp(最小, 视口插值, 最大) 让字号在不同屏幕之间平滑过渡，
     但有上下限（不无限放大/缩小），既适配小屏又适配桌面画布。
     ──────────────────────────────────────────────── */
  --fs-xs:  clamp(10.5px, 0.5vw + 9px,  11.5px);
  --fs-sm:  clamp(12px,   0.5vw + 10.5px, 13px);
  --fs-md:  clamp(13.5px, 0.6vw + 12px, 15px);
  --fs-lg:  clamp(15px,   0.8vw + 13px, 17px);
  --fs-xl:  clamp(19px,   1.5vw + 15px, 24px);
  --fs-2xl: clamp(24px,   2.5vw + 18px, 34px);

  /* 行高 / 字重 语义 */
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* ────────────────────────────────────────────────
     间距 · 4px 基准刻度
     ──────────────────────────────────────────────── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  /* 页面内容左右安全内距（随画布宽度微调） */
  --pad-page: clamp(16px, 4vw, 20px);

  /* ────────────────────────────────────────────────
     圆角 · 统一 10–22px
     ──────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ────────────────────────────────────────────────
     阴影 · 柔和、低饱和（中性投影，非彩色）
     ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .05);
  --shadow-accent: 0 8px 24px var(--glow);

  /* ────────────────────────────────────────────────
     液态玻璃接口（为将来 Apple Liquid Glass 预留）
     ─────────────────────────────────────────────────
     现在给轻微毛玻璃；不支持 backdrop-filter 时 .glass 退化为纯色。
     将来全量上液态玻璃时只需在此调参 + 增强 .glass 工具类。
     ──────────────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, .72);
  --glass-bg-2:   rgba(255, 255, 255, .55);
  --glass-blur:   16px;
  --glass-border: rgba(255, 255, 255, .5);
  --glass-shadow: 0 8px 32px rgba(16, 24, 40, .10);

  /* ────────────────────────────────────────────────
     布局
     ──────────────────────────────────────────────── */
  --app-max: 480px;            /* 桌面/平板：app 画布最大宽度（居中） */
  --tab-h: 60px;
  --topbar-h: 56px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap: 44px;                 /* 最小触控目标 */

  /* z-index 语义层级 */
  --z-topbar: 50;
  --z-tabbar: 100;
  --z-subpage: 1500;
  --z-sheet: 1800;
  --z-toast: 3000;

  /* ────────────────────────────────────────────────
     动效时长 / 缓动
     ──────────────────────────────────────────────── */
  --transition-fast: .15s ease;
  --transition-base: .25s cubic-bezier(.16, 1, .3, 1);
  --transition-slow: .35s cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── 深色主题（手动切换） ── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0B0F1A;
  --bg-2:      #161B26;
  --surface:   #12161F;
  --surface-2: #161B26;
  --border:        rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text:    #ECEFF5;
  --text-2:  #A0A8BA;
  --muted:   #69717F;
  --accent:    #5B9BFF;
  --accent-2:  #7FB2FF;
  --glow:      rgba(91, 155, 255, .22);
  --pill:      #1E2233;
  --pill-text: #9CC2FF;
  --safe-bg:   rgba(18, 183, 106, .18);
  --warn-bg:   rgba(247, 144, 9, .18);
  --danger-bg: rgba(240, 68, 56, .18);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  --glass-bg:     rgba(18, 22, 31, .72);
  --glass-bg-2:   rgba(18, 22, 31, .55);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

/* ── 跟随系统深色（未手动切换 light 时） ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #0B0F1A;
    --bg-2:      #161B26;
    --surface:   #12161F;
    --surface-2: #161B26;
    --border:        rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .14);
    --text:    #ECEFF5;
    --text-2:  #A0A8BA;
    --muted:   #69717F;
    --accent:    #5B9BFF;
    --accent-2:  #7FB2FF;
    --glow:      rgba(91, 155, 255, .22);
    --pill:      #1E2233;
    --pill-text: #9CC2FF;
    --safe-bg:   rgba(18, 183, 106, .18);
    --warn-bg:   rgba(247, 144, 9, .18);
    --danger-bg: rgba(240, 68, 56, .18);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
    --glass-bg:     rgba(18, 22, 31, .72);
    --glass-bg-2:   rgba(18, 22, 31, .55);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  }
}

/* 降低动效偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ════════════════════════════════════════════════════════
   工具类 · 液态玻璃 / 图标 / 通用
   ════════════════════════════════════════════════════════ */

/* .glass —— 毛玻璃工具类；不支持 backdrop-filter 时退化为纯色 surface */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  }
}

/* 内联 SVG 图标统一表现：跟随 currentColor、不收缩、垂直居中 */
.icon {
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
  color: inherit;
}
.icon svg { display: block; }