/* ============================================================================
   Fangzhang Bot Admin — Design Tokens (CSS Custom Properties)
   基准：Element UI 蓝 (#409eff) + 4px 间距网格
   用法：在所有样式表之前引入本文件；组件中一律使用 var(--token)，禁止硬编码。
   分组：颜色 / 字体 / 字号 / 间距 / 圆角 / 阴影 / 层级 / 动效 / 断点 / 触控
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 颜色
     主色：Element primary；语义色 success/warning/danger/info 各配 hover/active/浅底 */

  /* 主色（含 Element 官方色阶） */
  --color-primary: #409eff;
  --color-primary-hover: #66b1ff;   /* light-3 */
  --color-primary-active: #3a8ee6;  /* dark-2  */
  --color-primary-500: #a0cfff;    /* light-5 */
  --color-primary-700: #c6e2ff;    /* light-7 */
  --color-primary-800: #d9ecff;    /* light-8 */
  --color-primary-100: #ecf5ff;    /* light-9，浅底 */

  /* 成功 */
  --color-success: #67c23a;
  --color-success-hover: #85ce61;
  --color-success-active: #5daf34;
  --color-success-100: #f0f9ff;

  /* 警告 */
  --color-warning: #e6a23c;
  --color-warning-hover: #ebb563;
  --color-warning-active: #cf9236;
  --color-warning-100: #fdf6ec;

  /* 危险 */
  --color-danger: #f56c6c;
  --color-danger-hover: #f78989;
  --color-danger-active: #dd6161;
  --color-danger-100: #fef0f0;

  /* 信息（中性灰蓝） */
  --color-info: #909399;
  --color-info-hover: #a6a9ad;
  --color-info-active: #82848a;
  --color-info-100: #f4f4f5;

  /* 中性：文字（对比度从高到低） */
  --color-text-primary: #303133;     /* 标题/主要 */
  --color-text-regular: #606266;     /* 正文      */
  --color-text-secondary: #909399;   /* 次要说明，≥4.5:1 时使用 */
  --color-text-placeholder: #c0c4cc; /* 仅占位符，不用于真实内容 */
  --color-text-on-primary: #ffffff;  /* 主色底上的文字 */
  --color-text-inverse: #ffffff;

  /* 中性：边框（从深到浅） */
  --color-border: #dcdfe6;           /* 基础边框/输入框 */
  --color-border-light: #e4e7ed;     /* 次级分隔 */
  --color-border-lighter: #ebeef5;   /* 卡片/表格分隔 */
  --color-border-extra-light: #f2f6fc;

  /* 中性：背景/填充 */
  --color-bg-page: #f0f2f5;          /* 页面底 */
  --color-bg-card: #ffffff;          /* 卡片/弹层 */
  --color-bg-overlay: #ffffff;
  --color-bg-fill: #f5f7fa;          /* 浅灰填充/表头 */
  --color-bg-fill-hover: #f5f7fa;
  --color-bg-mask: rgba(0, 0, 0, 0.5); /* 遮罩 */

  /* 纯白/纯黑（语义化引用，避免散落 #fff/#000） */
  --color-white: #ffffff;
  --color-black: #000000;

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

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

  /* 字号阶梯 */
  --font-size-micro: 10px;   /* 角标/辅助小字 */
  --font-size-caption: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;   /* 后台正文基准 */
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;    /* 大标题/看板大数字 */
  --font-size-5xl: 48px;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;

  /* ---------------------------------------------------------------- 间距
     4px 网格；半值 2px 仅用于精细微调 */
  --sp-0: 0;
  --sp-half: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------------------------------------------------------------- 圆角
     收敛到 2/4/6/8/12；胶囊用 pill，圆形用 circle */
  --radius-sm: 2px;
  --radius-base: 4px;   /* 按钮/输入框默认 */
  --radius-md: 6px;
  --radius-lg: 8px;     /* 卡片 */
  --radius-xl: 12px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------- 阴影
     4 级投影 + 统一焦点环（焦点环统一主色，不再双轨） */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 28px rgba(31, 45, 61, 0.16);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.22); /* 模态/最强浮层 */

  --focus-ring: 0 0 0 2px rgba(64, 158, 255, 0.20);
  --focus-ring-danger: 0 0 0 2px rgba(245, 108, 108, 0.20);

  /* ---------------------------------------------------------------- 层级
     固定分层，杜绝 9999/10000/99999/2147483000 军备竞赛 */
  --z-base: 0;
  --z-dropdown: 1000;   /* 下拉菜单 */
  --z-sticky: 1020;     /* 吸顶 */
  --z-fixed: 1030;      /* 固定栏 */
  --z-modal-backdrop: 1040;
  --z-modal: 1050;      /* 弹窗 */
  --z-modal-sub: 1052;  /* 弹窗内第 2 层（预览/编辑/抽屉飞出） */
  --z-modal-sub2: 1054; /* 弹窗内第 3 层 */
  --z-modal-sub3: 1056; /* 弹窗内第 4 层 */
  --z-popover: 1060;    /* 气泡/右键/更多 操作菜单 */
  --z-toast: 1080;      /* 全局提示 */
  --z-tooltip: 1090;    /* 悬浮提示（最高） */

  /* ---------------------------------------------------------------- 动效 */
  --ease-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.35s;

  /* ---------------------------------------------------------------- 断点
     移动优先；媒体查询中配合 var() 使用（见 DESIGN.md） */
  --bp-sm: 640px;   /* 大手机竖屏 */
  --bp-md: 768px;   /* 平板竖屏 */
  --bp-lg: 1024px;  /* 平板横屏/小桌面 */
  --bp-xl: 1280px;  /* 桌面 */
  --bp-2xl: 1536px; /* 大桌面 */

  /* ---------------------------------------------------------------- 触控
     统一变量见布局区 --touch-target-size（iOS HIG / WCAG 2.2 = 44px） */

  /* ---------------------------------------------------------------- 布局 */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 64px;
  --header-height: 56px;
  --content-max-width: 1600px;
  --touch-target-size: 44px;   /* 移动端可点元素最小尺寸 */
}

/* ---------------------------------------------------------------------------
   无障碍：统一键盘焦点（全站 0 个 focus-visible 的修复入口）
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-base);
}

/* 用户偏好减弱动效时，关闭非必要动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   移动端：触摸目标最小 44px（仅 ≤768px，不影响桌面紧凑布局）
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 导航、菜单、下拉项 */
  .menu-item,
  .header-nav a,
  .dropdown-item,
  [role="tab"],
  [role="menuitem"] {
    min-height: var(--touch-target-size);
  }

  /* 常规按钮与可点元素（排除 TinyMCE 密集工具栏/集合项/色块；
     .switch 视觉滑块为绝对定位填满，强拉会变形，且其宽已 44、多与文字标签整行可点，故不设） */
  .btn,
  button:not(.tox-tbtn):not(.tox-collection__item):not(.tox-swatch),
  [role="button"]:not(.tox-tbtn):not(.tox-collection__item),
  select {
    min-height: var(--touch-target-size);
  }

  /* 单行输入框（便于聚焦），排除复选/单选/隐藏/文件/范围/颜色 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    min-height: var(--touch-target-size);
  }

  /* 图标型按钮：关闭、分页、新增/删除行等，保证 44×44 */
  .modal-close,
  .icon-btn,
  button[aria-label]:not(.tox-tbtn) {
    min-width: var(--touch-target-size);
    min-height: var(--touch-target-size);
  }
}