/* ════════════════════════════════════════════════════════
   CFJ-LINK 管理后台 — Design Tokens（设计系统单一来源）
   ─────────────────────────────────────────────────────────
   目标：与对客端一致的商用级现代 UI（Stripe 克制高级感 + 苹果
   设计语言），但适配后台场景：信息密度更高、有数据表格 / 表单 /
   统计卡 / 桌面克制导航。

   颜色 / 间距 / 字号 / 圆角 / 阴影 / 动效 / 玻璃接口全部抽成
   CSS 变量集中于此，供 style.css / components.css 套用。
   本文件最先加载（最低优先级，可被覆盖）。

   token 命名与对客端 (~/cfj-link/pages/cfj-customer/public/css/tokens.css)
   保持镜像，方便两端共享心智模型。
   ════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ────────────────────────────────────────────────
     颜色 · 中性底板（近黑文字 + 多级灰，克制）
     ──────────────────────────────────────────────── */
  --bg:        #F7F9FC;   /* 应用画布外底 */
  --bg-2:      #F2F4F7;   /* 浅灰填充（图标底 / 输入底 / 表头） */
  --surface:   #FFFFFF;   /* 卡片 / 面板 / 内容区 */
  --surface-2: #F7F9FC;   /* 次级面板 / 斑马行 */
  --surface-3: #EEF1F6;   /* 三级填充（hover / 选中底） */

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

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

  /* 颜色 · 品牌主色（单一主色 + 渐变辅色） */
  --accent:     #4F46E5;   /* indigo —— 克制、高级、商用感 */
  --accent-2:   #7C6BFF;   /* 渐变收尾 / 装饰 */
  --accent-ink: #FFFFFF;
  --accent-soft:#EEF0FF;   /* 主色淡底（选中态 / 标签底） */
  --accent-deep:#4338CA;   /* 主色 hover 加深 */
  --glow:       rgba(79, 70, 229, .16);
  --pill:       #EEF0FF;
  --pill-text:  #4F46E5;

  /* 颜色 · 语义（成功 / 警告 / 危险 / 信息 + 各自淡底） */
  --safe:      #12B76A;
  --safe-bg:   rgba(18, 183, 106, .12);
  --safe-deep: #0E9355;
  --warn:      #F79009;
  --warn-bg:   rgba(247, 144, 9, .12);
  --warn-deep: #B95E00;
  --danger:    #F04438;
  --danger-bg: rgba(240, 68, 56, .12);
  --danger-deep:#C7372C;
  --info:      #2E90FA;
  --info-bg:   rgba(46, 144, 250, .12);

  /* ────────────────────────────────────────────────
     字体 · 系统字体栈优先，CJK 回退 Noto，数字等宽。
     ──────────────────────────────────────────────── */
  --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-body:   var(--font-system), var(--font-cjk), sans-serif;
  --font-heading:var(--font-system), var(--font-cjk), sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* 数字专用：等宽数字（tabular-nums），金额 / 统计 / 价格不跳动 */
  --font-num:    var(--font-system), var(--font-cjk), sans-serif;

  /* ────────────────────────────────────────────────
     字号 · 后台信息密度更高，基准略小、上限更克制。
     ──────────────────────────────────────────────── */
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13.5px;   /* 正文基准 */
  --fs-lg:  15px;
  --fs-xl:  clamp(17px, 0.6vw + 14px, 20px);   /* 卡片 / 区块标题 */
  --fs-2xl: clamp(20px, 1vw + 16px, 26px);     /* 页标题 */
  --fs-3xl: clamp(26px, 1.6vw + 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, 3vw, 32px);

  /* ────────────────────────────────────────────────
     圆角 · 后台略收（10–20px，配合密度）
     ──────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --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 退化为纯色 surface。
     ──────────────────────────────────────────────── */
  --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);

  /* ────────────────────────────────────────────────
     布局
     ──────────────────────────────────────────────── */
  --topbar-h:  60px;
  --sidebar-w: 232px;          /* 桌面克制导航宽度 */
  --content-max: 1200px;       /* 内容区最大宽度（居中，避免超宽屏拉伸） */
  --tap: 44px;                 /* 最小触控目标 */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* z-index 语义层级 */
  --z-sidebar:  80;
  --z-topbar:   100;
  --z-drawer:   1500;
  --z-backdrop: 1490;
  --z-modal:    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;
  --surface-3: #1E2330;
  --border:        rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text:    #ECEFF5;
  --text-2:  #A0A8BA;
  --muted:   #69717F;
  --accent:    #818CF8;
  --accent-2:  #A78BFA;
  --accent-soft:#1E2233;
  --accent-deep:#A5B4FC;
  --glow:      rgba(129, 140, 248, .22);
  --pill:      #1E2233;
  --pill-text: #A5B4FC;
  --safe-bg:   rgba(18, 183, 106, .18);
  --warn-bg:   rgba(247, 144, 9, .18);
  --danger-bg: rgba(240, 68, 56, .18);
  --info-bg:   rgba(46, 144, 250, .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;
  line-height: 0;
}
.icon svg { display: block; }