/* ============================================================
 * 智链米仓 · 统一设计令牌（Design Tokens）
 * 版权所有 (c) 2026 蓝河豚（T128.com）· 首次开发 2026-09-28
 * 前后台共用：颜色 / 间距 / 圆角 / 阴影 / 字号 / 层级 / 动效。
 * 主题切换契约：<html data-theme="light|dark">，由 zm-theme.js 维护。
 * ============================================================ */

:root {
  /* ---- 品牌蓝（主色，全站统一） ---- */
  --zm-brand-50:  #eff6ff;
  --zm-brand-100: #dbeafe;
  --zm-brand-200: #bfdbfe;
  --zm-brand-300: #93c5fd;
  --zm-brand-400: #60a5fa;
  --zm-brand-500: #3b82f6;
  --zm-brand-600: #2563eb;   /* 主色 */
  --zm-brand-700: #1d4ed8;   /* 深色 / hover */
  --zm-brand-800: #1e40af;
  --zm-brand-900: #1e3a8a;
  --zm-brand: var(--zm-brand-600);
  --zm-brand-dark: var(--zm-brand-700);

  /* ---- 功能色 ---- */
  --zm-success: #10b981;
  --zm-success-bg: #ecfdf5;
  --zm-warning: #f59e0b;
  --zm-warning-bg: #fffbeb;
  --zm-danger:  #ef4444;
  --zm-danger-bg: #fef2f2;
  --zm-info:    #3b82f6;
  --zm-info-bg: #eff6ff;

  /* ---- 中性色 / 表面 ---- */
  --zm-bg:        #f1f5f9;   /* 页面底色 */
  --zm-surface:   #ffffff;   /* 卡片 / 面板 */
  --zm-surface-2: #f8fafc;   /* 次级表面 / 表头 */
  --zm-ink:       #0f172a;   /* 主文字 */
  --zm-text:      #1e293b;
  --zm-muted:     #64748b;   /* 次要文字 */
  --zm-muted-2:   #94a3b8;   /* 占位 / 弱文字 */
  --zm-border:    #e2e8f0;   /* 边框 */
  --zm-border-strong: #cbd5e1;
  --zm-nav-bg:    #ffffff;
  --zm-hover:     var(--zm-brand-50);

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

  /* ---- 圆角 ---- */
  --zm-radius-sm: 6px;
  --zm-radius:    10px;
  --zm-radius-lg: 14px;
  --zm-radius-xl: 20px;
  --zm-radius-pill: 999px;

  /* ---- 阴影（统一三级） ---- */
  --zm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --zm-shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --zm-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --zm-shadow-lg: 0 12px 28px rgba(15, 23, 42, .12);

  /* ---- 字号 ---- */
  --zm-fs-xs: 12px; --zm-fs-sm: 13px; --zm-fs-base: 14px;
  --zm-fs-md: 15px; --zm-fs-lg: 16px; --zm-fs-xl: 18px;
  --zm-fs-2xl: 20px; --zm-fs-3xl: 24px; --zm-fs-4xl: 30px;

  /* ---- 布局尺寸 ---- */
  --zm-container: 1200px;
  --zm-nav-h: 60px;
  --zm-sidebar-w: 244px;

  /* ---- 层级 ---- */
  --zm-z-nav: 50; --zm-z-sticky: 40; --zm-z-dropdown: 60;
  --zm-z-modal: 100; --zm-z-toast: 200;

  /* ---- 动效 ---- */
  --zm-ease: cubic-bezier(.4, 0, .2, 1);
  --zm-dur: .18s;
}

/* ============================================================
 * 暗黑主题（令牌覆盖；组件因引用变量而自动适配）
 * ============================================================ */
html[data-theme="dark"] {
  --zm-bg:        #0b1120;
  --zm-surface:   #141d2f;
  --zm-surface-2: #1a2438;
  --zm-ink:       #e2e8f0;
  --zm-text:      #dbe4f3;
  --zm-muted:     #a9bcd8;
  --zm-muted-2:   #7d8fb0;
  --zm-border:    #24304a;
  --zm-border-strong: #2c3a55;
  --zm-nav-bg:    #0f1830;
  --zm-hover:     #16233f;

  --zm-success-bg: #0c2f22;
  --zm-warning-bg: #2a210e;
  --zm-danger-bg:  #34121a;
  --zm-info-bg:    #10233f;

  --zm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --zm-shadow:    0 1px 3px rgba(0, 0, 0, .5);
  --zm-shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
  --zm-shadow-lg: 0 14px 32px rgba(0, 0, 0, .6);
}