/**
 * 农事通 Admin 设计系统 — Design Token
 * v1.1 | 2026-05-26
 *
 * 所有 CSS 变量集中在此管理，组件样式见 admin-components.css
 */

:root {
  /* ============================================================
     Canvas & Surface 阶梯
     ============================================================ */
  --canvas:       #070b16;   /* 页面最深背景 */
  --surface-1:    #0a0e1a;   /* 侧边栏背景 */
  --surface-2:    #0f1524;   /* 一级卡片/面板 */
  --surface-3:    #131b2e;   /* 二级卡片/悬浮面板 */
  --surface-4:    #1a2340;   /* 弹窗/下拉菜单 */
  --surface-5:    #223050;   /* 强调面板/拖拽区 */

  /* ============================================================
     文字颜色阶梯
     ============================================================ */
  --text-primary: #f0f4ff;   /* 标题、关键数据 */
  --text-body:    #a0aec0;   /* 正文、表格内容 */
  --text-muted:   #64748b;   /* 辅助说明、时间戳、表头 */
  --text-disabled:#475569;   /* 禁用状态 */

  /* legacy — 保留以兼容旧代码 */
  --text-inverse: #070b16;   /* legacy */

  /* ============================================================
     品牌色
     ============================================================ */
  --brand:        #4f7cff;   /* 主按钮、活跃链接、focus ring */
  --brand-hover:  #6b93ff;   /* hover 状态 */
  --brand-active: #3d5fd9;   /* active/pressed 状态 */
  --brand-soft:   rgba(79,124,255,0.15);  /* 标签背景、轻量高亮 */
  --brand-glow:   rgba(79,124,255,0.35);  /* focus ring 发光 */

  /* ============================================================
     语义色 — 文字色
     ============================================================ */
  --ok:   #22c55e;   /* 成功/通过/在线 */
  --warn: #f59e0b;   /* 待处理/预警/审核中 */
  --bad:  #ef4444;   /* 失败/异常/驳回 */
  --info: #60a5fa;   /* 提示/信息 */

  /* 语义色 — 软背景 */
  --ok-soft:   rgba(34, 197, 94, 0.15);
  --warn-soft: rgba(245, 158, 11, 0.15);
  --bad-soft:  rgba(239, 68, 68, 0.15);
  --info-soft: rgba(96, 165, 250, 0.15);

  /* 语义色 — 边框 */
  --ok-border:   rgba(34, 197, 94, 0.35);
  --warn-border: rgba(245, 158, 11, 0.35);
  --bad-border:  rgba(239, 68, 68, 0.35);
  --info-border: rgba(96, 165, 250, 0.35);

  /* ============================================================
     边框与分隔线
     ============================================================ */
  --hairline:       #1e293b;       /* 默认分隔线、表格行底边 */
  --hairline-strong: #2d3a50;      /* 表头底边、强分隔线 */
  --hairline-hover:  #3d4f6a;      /* hover 状态边框 */
  --border-subtle:   rgba(255,255,255,0.06);  /* 极弱分隔 */
  --border-default:  rgba(255,255,255,0.10);  /* 默认卡片边框 */
  --border-focus:    rgba(79,124,255,0.50);    /* focus 状态边框 */

  /* legacy — 保留以兼容旧代码 */
  --border-strong: rgba(255,255,255,0.18);  /* legacy */

  /* ============================================================
     字体家族
     ============================================================ */
  --font-sans: 'Noto Sans SC', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* ============================================================
     字体尺度
     ============================================================ */
  --font-display-xl:  32px;  /* 页面大标题（Dashboard 标题） */
  --font-display-lg:  24px;  /* 页面标题 */
  --font-display-md:  20px;  /* 区块标题、卡片标题 */
  --font-heading:     16px;  /* 小标题、表单分组 */
  --font-body-lg:     15px;  /* 大段正文 */
  --font-body:        14px;  /* 默认正文、表格内容 */
  --font-body-sm:     13px;  /* 次要正文、菜单项 */
  --font-caption:     12px;  /* 辅助说明、时间戳 */
  --font-caption-sm:  11px;  /* 极小文字、徽章 */

  /* ============================================================
     间距（4px 基数）
     ============================================================ */
  --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;

  /* ============================================================
     圆角
     ============================================================ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ============================================================
     阴影
     ============================================================ */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.40);
  --shadow-glow: 0 0 20px rgba(79,124,255,0.15);

  /* ============================================================
     动画时间函数
     ============================================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   可访问性 — 减少动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-default: linear;
    --ease-in: linear;
    --ease-out: linear;
    --ease-bounce: linear;
  }
  /* 所有动画时长通过 CSS 实现零延迟（具体在组件中用 transition-duration） */
}
