/*!
 * tokens.css — NORINCO 穿透式监管助手 V2.0 · 设计 Token 层
 *
 * 设计调性: 通透 · 精准 · 柔和
 * 参考: Linear.app (秩序感) + Apple (克制) + 飞书 (效率)
 *
 * 体系:
 *   Layer 1 — 品牌色 + 中性灰阶 (5 级)
 *   Layer 2 — 语义色 + 图表色
 *   Layer 3 — 表面 / 描边 / 阴影 (仅 2 级)
 *   Layer 4 — 字体 / 排版比例 (1.25 major third)
 *   Layer 5 — 间距 (4pt Grid) / 圆角 / 动效 / z-index
 *
 * 规则: 本文件只定义 CSS 变量，不写任何选择器样式。
 * 暗色主题跟随系统，间距密度 3 档不变。
 */

:root {
  /* ================================================================
   * L1 — 品牌与交互色
   * 主色 #1A6FF5: 比旧 #2563EB 降低饱和 15%，更通透柔和
   * ================================================================ */
  --color-accent:         #1A6FF5;
  --color-accent-hover:   #155BCE;
  --color-accent-active:  #1047A3;
  --color-accent-soft:    #E8F1FE;
  --color-accent-muted:   #F0F5FF;

  /* ================================================================
   * L1 — 中性灰阶
   * 去掉蓝调偏色 (旧方案 ink 偏蓝), 用纯暖灰, 更中性精确
   * ================================================================ */
  --color-ink:     #111827;   /* 主文字, 近乎黑但非纯黑, Apple HIG 近 */
  --color-ink-2:   #374151;   /* 次文字 */
  --color-ink-3:   #6B7280;   /* 辅助文字 */
  --color-ink-4:   #9CA3AF;   /* 占位/禁用 */
  --color-ink-5:   #D1D5DB;   /* 分隔线级 */

  /* ================================================================
   * L2 — 语义色: 状态编码，不做氛围
   * 降低饱和度，让状态色更精确而非刺眼
   * ================================================================ */
  --color-success:    #059669;   /* 旧 #047857 微调更亮 */
  --color-success-bg: #ECFDF5;
  --color-warning:    #D97706;   /* 旧 #B45309 */
  --color-warning-bg: #FFFBEB;
  --color-danger:     #DC2626;   /* 保持 */
  --color-danger-bg:  #FEF2F2;
  --color-info:       #0284C7;
  --color-info-bg:    #F0F9FF;

  /* ================================================================
   * L2 — 图表序列色 (ECharts palette)
   * 与主色形成系统: 蓝/琥珀/翠绿/紫罗兰/青
   * ================================================================ */
  --chart-1:    #1A6FF5;
  --chart-2:    #F59E0B;
  --chart-3:    #10B981;
  --chart-4:    #7C5CFC;
  --chart-5:    #06B6D4;
  --chart-grid: #E5E7EB;

  /* ================================================================
   * L3 — 表面层级 (Apple 风格: 纯白 Canvas, 灰白 Subsurface)
   * ================================================================ */
  --color-canvas:    #F5F7FA;   /* 页面底, 微灰白, 不再带蓝 */
  --color-surface:   #FFFFFF;   /* 卡片/面板 */
  --color-surface-2: #F3F4F6;   /* 次级表面, 比旧 F0F5FC 更中性 */
  --color-surface-3: #E5E7EB;   /* 第三级表面 (极少用, 用于分隔) */

  /* L3 — 描边: 仅 1 级, 极轻 */
  --color-border:   #E5E7EB;   /* 通用边框, 足够淡 */
  --color-border-2: #D1D5DB;   /* 悬停/聚焦时加深 */

  /* ================================================================
   * L3 — 阴影: 仅 2 级 (Linear 风格) + 向后兼容别名
   * ================================================================ */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float:  0 4px 16px -4px rgba(0, 0, 0, 0.10), 0 8px 32px -8px rgba(0, 0, 0, 0.08);
  /* 向后兼容: 旧代码引用的别名 → 均映射到 subtile */
  --shadow-xs: var(--shadow-subtle);
  --shadow-sm: var(--shadow-subtle);
  --shadow-md: var(--shadow-float);
  --shadow-lg: var(--shadow-float);
  --shadow-xl: var(--shadow-float);

  /* shadow tint 保留供少量品牌阴影(hero CTA 等) */
  --shadow-tint-rgb: 26, 111, 245;

  /* ================================================================
   * L4 — 字体
   * 保持系统字体(PingFang SC + SF Pro), zero-latency 加载
   * 唯一不跟风 Inter/Geist: 中文字体渲染首选系统原生
   * ================================================================ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ================================================================
   * L4 — 排版比例: major third (1.25)
   *   basis: 14px body (移动阅读更舒适)
   *   12 → 14 → 18 → 23 → 28 (display)
   *   5 档，拉大间距，杜绝 13/14/15/16 扁平
   * ================================================================ */
  --text-xs:     11px;   /* 标签 badges */
  --text-sm:     13px;   /* 辅助文字 caption */
  --text-base:   14px;   /* 正文 body / 表格 */
  --text-lg:     16px;   /* 次级标题 */
  --text-xl:     20px;   /* 区块标题 */
  --text-2xl:    24px;   /* 页面标题 */
  --text-display: clamp(26px, 5.4vw, 32px);  /* Hero */
  --text-metric:  clamp(24px, 5vw, 30px);    /* 指标卡大数 */

  /* ================================================================
   * L5 — 间距: 4pt Grid 严格阶梯
   *   4 8 12 16 20 24 32 40 48 64 (全部 4 的倍数)
   * ================================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ================================================================
   * L5 — 圆角: 4pt 阶梯
   *   4 6 8 12 16 999 (pill)
   *   去掉 10/20/24 等不规则值, 减少 AI 随机圆角感
   * ================================================================ */
  --radius-xs:   4px;    /* tag 小标 */
  --radius-sm:   6px;    /* 按钮 / input */
  --radius-md:   8px;    /* 卡片 */
  --radius-lg:  12px;    /* 大区块 */
  --radius-xl:  16px;    /* 模态/面板 */
  --radius-pill: 999px;  /* pill 按钮/tag */

  /* ================================================================
   * L5 — 动效: Apple cubic-bezier
   * ================================================================ */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:  cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:  120ms;
  --duration-base:  180ms;
  --duration-slow:  280ms;

  /* ================================================================
   * L5 — z-index
   * ================================================================ */
  --z-sticky:  100;
  --z-overlay: 900;
  --z-sheet:   950;
  --z-fab:     980;
  --z-toast:  1000;
  --z-tooltip: 1100;
}

/* ================================================================
 * 密度: 三档不变, 但调整阶梯倍数
 * ================================================================ */
:root[data-density="compact"] {
  --space-1:  2px;  --space-2:  4px;  --space-3:  8px;
  --space-4: 12px;  --space-5: 16px;  --space-6: 20px;
  --space-8: 28px;  --space-10:36px;  --space-12:40px;
  --space-16:56px;
}
:root[data-density="spacious"] {
  --space-1:  6px;  --space-2: 12px;  --space-3: 16px;
  --space-4: 24px;  --space-5: 28px;  --space-6: 36px;
  --space-8: 48px;  --space-10:60px;  --space-12:72px;
  --space-16:96px;
}

/* ================================================================
 * 暗色主题: Linear 暗色风格 — 柔和蓝灰, 不黑不紫
 * ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-accent:        #3B82F6;
    --color-accent-hover:  #60A5FA;
    --color-accent-active: #2563EB;
    --color-accent-soft:   #1E3A5F;
    --color-accent-muted:  #162A45;

    --color-ink:     #E5E7EB;
    --color-ink-2:   #9CA3AF;
    --color-ink-3:   #6B7280;
    --color-ink-4:   #4B5563;
    --color-ink-5:   #374151;

    --color-canvas:    #101827;
    --color-surface:   #1A2338;
    --color-surface-2: #1F2937;
    --color-surface-3: #243044;
    --color-border:    #2D3A4F;
    --color-border-2:  #3D4F69;

    --color-success:    #34D399;
    --color-success-bg: #064E3B;
    --color-warning:    #FBBF24;
    --color-warning-bg: #57400A;
    --color-danger:     #F87171;
    --color-danger-bg:  #5F1D1D;
    --color-info:       #38BDF8;
    --color-info-bg:    #0C3A52;

    --chart-1:    #3B82F6;
    --chart-2:    #FBBF24;
    --chart-3:    #34D399;
    --chart-4:    #A78BFA;
    --chart-5:    #22D3EE;
    --chart-grid: #1F2937;

    --shadow-subtle: 0 1px 2px rgba(0,0,0,0.28);
    --shadow-float:  0 4px 24px -8px rgba(0,0,0,0.42);
  }
}