/* ============================================================================
   企闲智能营销工具箱 · 设计令牌
   设计概念：深蓝底 · 电光青   ——  控制台
   ==========================================================================*/

:root {
  /* ── 1. 底 · 冷灰蓝 ───────────────────────────────────────────────────── */
  --paper:        #F3F6FB;
  --paper-2:      #E7EEF7;
  --surface:      #FFFFFF;
  --elevated:     #FFFFFF;

  /* ── 2. 墨 · 海军蓝文字阶梯 ───────────────────────────────────────────── */
  --ink-900:      #0B1220;
  --ink-700:      #1E293B;
  --ink-500:      #334155;
  --ink-400:      #475569;
  --ink-300:      #64748B;
  --ink-200:      #94A3B8;

  /* ── 3. 线 ───────────────────────────────────────────────────────────── */
  --line:         #D5E1F0;
  --line-soft:    #E6EEF7;
  --bd-field:     #7C8CA3;
  --bd-strong:    #0B1220;

  /* ── 4. 电光蓝 · 品牌 ─────────────────────────────────────────────────── */
  --brand-50:     #EFF6FF;
  --brand-100:    #DBEAFE;
  --brand-300:    #7DD3FC;
  --brand-500:    #2563EB;
  --brand-600:    #1D4ED8;
  --brand-700:    #1E40AF;

  /* ── 5. 语义色（与原品牌色解耦，各自独立） ─────────────────────────────── */
  /* 成功 · 松青 */
  --jade-50:      #E4F0EB;
  --jade-100:     #CFE6DD;
  --jade-500:     #2E6B57;  /* 文字 5.51:1 ✅ · 实底配白字 6.26:1 ✅            */
  --jade-700:     #245446;  /* 浅底上的文字 7.39:1 ✅                           */

  /* 警告 · 琥珀 */
  --amber-50:     #F7E9CC;
  --amber-100:    #F0DCB0;
  --amber-600:    #8F6106;  /* 文字 4.76:1 ✅ · 实底配白字 5.41:1 ✅            */
  --amber-700:    #7A5200;  /* 浅底上的文字 5.76:1 ✅                           */

  /* 危险 · 樱红 */
  --red-50:       #F9E3E7;
  --red-100:      #F3CDD4;
  --red-600:      #A81E3C;  /* 文字 6.34:1 ✅ · 实底配白字 7.20:1 ✅            */
  --red-700:      #8E1A33;  /* 浅底上的文字 7.32:1 ✅                           */

  /* 信息 · 靛蓝（原方案完全缺失，导致中性提示无处安放） */
  --blue-50:      #E3EDF5;
  --blue-100:     #CCDFEC;
  --blue-600:     #2A5D86;  /* 文字 6.15:1 ✅ · 实底配白字 6.98:1 ✅            */
  --blue-700:     #24506F;  /* 浅底上的文字 7.22:1 ✅                           */

  /* 中性 / 离线 / 停用 */
  --neutral-50:   #E8EEF5;
  --neutral-300:  #94A3B8;
  --neutral-600:  #475569;

  /* ── 6. 深色区（侧栏 / 登录主视觉） ───────────────────────────────────── */
  --side:         #071422;
  --side-fg:      #E8F1FF;
  --side-fg-2:    #9BB0CC;
  --side-label:   #7D93B0;
  --side-line:    rgba(125, 211, 252, 0.14);
  --side-hover:   rgba(56, 189, 248, 0.10);
  --side-active:  rgba(37, 99, 235, 0.32);

  /* ── 7. 字体 ─────────────────────────────────────────────────────────── */
  /* 全部使用系统字体，零网络依赖，中文优先 */
  --font-ui:  "Inter", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
              "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Sarasa Mono SC", "JetBrains Mono", "Cascadia Mono", Consolas,
              "SF Mono", Menlo, monospace;

  /* 字号阶梯（基准 14px，≈1.2 模数） */
  --fs-micro:     11px;  --lh-micro:   1.40;  /* 全大写小标签 · 表头 · 侧栏分组 */
  --fs-caption:   12px;  --lh-caption: 1.50;  /* 说明 / 辅助 / 时间戳          */
  --fs-sm:        13px;  --lh-sm:      1.60;  /* 表格 / 按钮 / 表单标签         */
  --fs-body:      14px;  --lh-body:    1.65;  /* 正文                          */
  --fs-lg:        15px;  --lh-lg:      1.60;  /* 卡片标题 / 弹窗标题            */
  --fs-h3:        16px;  --lh-h3:      1.40;
  --fs-h2:        20px;  --lh-h2:      1.35;  /* 页头标题                      */
  --fs-h1:        26px;  --lh-h1:      1.30;
  --fs-display:   32px;  --lh-display: 1.25;  /* 落地页主标题 / 大屏数字         */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   650;

  --ls-tight:  -0.01em;
  --ls-normal:  0.01em;   /* 中文微调，避免过散 */
  --ls-micro:   0.12em;   /* 全大写小标签 */
  --ls-num:     0.02em;

  /* ── 8. 间距（4px 基准栅格） ──────────────────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── 9. 圆角（四级 + 全圆，替代原来的 8/10/12/14/18 五档混用） ─────────── */
  --r-sm:   6px;    /* 小控件：tag / 迷你按钮 / 复选框容器 */
  --r-md:   10px;   /* 标准控件：输入框 / 按钮 / 下拉 */
  --r-lg:   14px;   /* 容器：卡片 / 面板 / 表格包裹 */
  --r-xl:   20px;   /* 浮层：弹窗 / 登录卡 / 抽屉 */
  --r-full: 999px;  /* 胶囊：pill / 计数徽标 */

  /* ── 10. 阴影（三级 + 品牌签名） ──────────────────────────────────────── */
  --sh-0:     none;                                     /* 分组块：仅靠边框 */
  --sh-1:     0 1px 2px rgba(7,20,34,.05), 0 8px 20px -12px rgba(7,20,34,.18);
  --sh-2:     0 2px 6px rgba(7,20,34,.08), 0 18px 36px -16px rgba(15,60,140,.22);
  --sh-3:     0 30px 60px -20px rgba(7,20,34,.40);
  /* 品牌签名：把原方案弹窗上的硬投影正式命名并限定用途 —— 复古印刷感，只用于
     弹窗 / 截图预览 / 关键浮层，全站最多出现一处，多了就俗 */
  --sh-print: 6px 6px 0 0 var(--ink-900);

  /* ── 11. 控件尺寸 ────────────────────────────────────────────────────── */
  --h-sm:   28px;
  --h-md:   34px;   /* 默认：输入框 / 按钮 */
  --h-lg:   40px;
  --h-xl:   46px;   /* 落地页主按钮 */
  --tap-min: 44px;  /* 移动端最小触达区域 */

  --bw:      1px;
  --bw-focus: 2px;

  /* ── 12. 布局 ────────────────────────────────────────────────────────── */
  --side-w:            256px;  /* 原 248px 调整为 8px 栅格倍数 */
  --side-w-collapsed:   64px;
  --page-max:         1440px;
  --gutter:             32px;  /* 桌面；平板 24px；移动 16px */
  --card-gap:           16px;
  --block-gap:          32px;

  /* ── 13. 动效（统一节奏，并全部尊重 prefers-reduced-motion） ──────────── */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --ease:       cubic-bezier(.2, .8, .3, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);

  --z-base:     1;
  --z-sticky:   20;
  --z-dropdown: 40;
  --z-modal:    60;
  --z-toast:    90;
}

/* ============================================================================
   基础重置与全局约定
   ==========================================================================*/
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 数字统一等宽对齐 —— 表格、看板、金额、计数全部受益 */
.num, td.num, .stat-value, input[type="number"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
p { margin: 0; }
a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* 统一焦点环：原方案只给 input 写了 focus，按钮/链接/表格行完全没有
   用 :focus-visible 而非 :focus，鼠标点击不会触发干扰性的描边 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--bw-focus) solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* 深色区内的焦点环换成浅色，保证在墨底上可见 */
:where(.inverse, [data-theme="dark"]) :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--brand-300);
}

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

/* 移动端：触达区域不小于 44px，输入字号 >=16px 防 iOS 自动缩放 */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
  button, .btn { min-height: var(--tap-min); }
}

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}