/**
 * 蝶发行政服务平台 · 设计令牌（Design Tokens）
 * ------------------------------------------------------------------
 * 主色：万物云蓝系 #1565D8
 * 规范：全 SVG 图标 / 零 emoji / 动效 170ms / 每屏强调色 ≤ 2 处
 * 所有组件样式必须引用本文件的变量，禁止裸值。
 */
:root {
  /* ---------- 品牌与语义色 ---------- */
  --color-primary: #1565d8;
  --color-primary-hover: #1152b3;
  --color-primary-active: #0e4396;
  --color-primary-light: #e8f1fd;
  --color-primary-lighter: #f3f8fe;
  --color-primary-border: #b3d1f5;

  /* 辅助强调色（每屏仅允许 1 处，用于 AI 助手等核心入口） */
  --color-accent: #e8833a;
  --color-accent-hover: #d06f28;
  --color-accent-light: #fdf1e7;

  /* 语义色 */
  --color-success: #18a058;
  --color-success-light: #e8f6ee;
  --color-warning: #e8a33a;
  --color-warning-light: #fdf5e6;
  --color-danger: #d94a4a;
  --color-danger-light: #fdecec;
  --color-info: #1565d8;
  --color-info-light: #e8f1fd;

  /* ---------- 中性色 ---------- */
  --color-text: #1c2430;
  --color-text-secondary: #5a6675;
  --color-text-tertiary: #8b95a3;
  --color-text-disabled: #b8bfc9;
  --color-text-inverse: #ffffff;

  --color-bg: #f4f6f9;
  --color-bg-page: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-hover: #f7f9fc;
  --color-surface-sunken: #f0f3f7;

  --color-border: #e3e8ef;
  --color-border-light: #eef1f6;
  --color-border-strong: #cdd5e0;
  --color-divider: #eef1f6;

  /* ---------- 字体 ---------- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.35;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* ---------- 间距 ---------- */
  --space-0: 0;
  --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;

  /* ---------- 圆角 ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 36, 48, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 36, 48, 0.08), 0 1px 2px rgba(28, 36, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 36, 48, 0.08);
  --shadow-lg: 0 8px 24px rgba(28, 36, 48, 0.12);
  --shadow-xl: 0 16px 40px rgba(28, 36, 48, 0.16);

  /* ---------- 动效 ---------- */
  --duration: 170ms;
  --duration-fast: 120ms;
  --duration-slow: 260ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-chat: 600;

  /* ---------- 布局 ---------- */
  --layout-max-width: 1200px;
  --layout-header-height: 60px;
  --layout-sidebar-width: 200px;
  --layout-content-padding: 24px;
}

/* ---------- 深色模式预留（后续通过 data-theme 切换） ---------- */
[data-theme='dark'] {
  --color-text: #e8ecf2;
  --color-text-secondary: #a8b3c2;
  --color-text-tertiary: #7d8896;
  --color-bg: #14181f;
  --color-bg-page: #14181f;
  --color-surface: #1c222c;
  --color-surface-hover: #232a36;
  --color-surface-sunken: #10141a;
  --color-border: #2b333f;
  --color-border-light: #232a36;
  --color-border-strong: #3a4453;
  --color-divider: #232a36;
  --color-primary-light: #12233d;
  --color-primary-lighter: #16294a;
}