/* ============================================================================
 * tokens.css - AISCP 全站设计 token 系统
 * ----------------------------------------------------------------------------
 * 用途: 把硬编码数字 (16px/24px/...) 替换成有语义的名字, 方便统一调整
 * 引入: 必须在 styles.css / admin.css / 各页面 css 之前
 * 维护: v3.80 起, 任何新模块/新样式 必须用 token, 不准再写裸数字
 *
 * 12 类 token 覆盖 4 个新模块:
 *   - AI 图片:        --image-grid-*, --image-card-*
 *   - AI 视频生成:    --status-*
 *   - 社群运营:       复用 chat.css 气泡 + 表格 token
 *   - 数据统计:       --chart-1..8, --card-*
 * ============================================================================ */

:root {
  /* ============ 1. 间距阶 (4 8 12 16 20 24 32 48 64) ============ */
  --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;
  --space-20: 80px;
  --space-2-5: 10px;        /* v3.82.1: 补 10px 阶 (gap 10px 出现 19 次) */
  --space-3-5: 14px;        /* v3.82.1: 补 14px 阶 (padding 14px 出现 9 次) */
  --space-4-5: 18px;        /* v3.82.1: 补 18px 阶 (border-radius 18px 出现 6 次) */

  /* ============ 2. 字号阶 (12 13 14 16 18 20 24 28 32 40) ============ */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-2xs: 10.5px;          /* v3.82.2: 补 10.5px (极小提示) */
  --text-2xs-plus: 11px;       /* v3.82.2: 补 11px (表格辅助) */
  --text-2xs-max: 11.5px;      /* v3.82.2: 补 11.5px (副 label) */
  --text-xs-half: 12.5px;      /* v3.82.2: 补 12.5px (tag/badge, 出现 37 次) */
  --text-sm-half: 13.5px;      /* v3.82.2: 补 13.5px (中等提示, 10 次) */
  --text-md-half: 15px;        /* v3.82.2: 补 15px (装饰区小标题, 8 次) */

  /* ============ 2.5 字重阶 (4 档: 常规/中/半粗/粗/特粗) ============ */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  /* ============ 3. 圆角阶 (6 10 14 18 24) ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 999px;
  --radius-xs: 8px;          /* v3.82.1: 补 8px (小按钮/小卡) */
  --radius-md-2: 12px;       /* v3.82.1: 补 12px (卡 12px 出现 11 次) */
  --radius-lg-2: 16px;       /* v3.82.1: 补 16px (装饰区装饰卡) */

  /* ============ 4. 阴影阶 ============ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);

  /* ============ 5. 状态色 (AI 视频/图片 生成用) ============ */
  --status-pending: #f59e0b;     /* 橙 - 等待中 */
  --status-processing: #3b82f6;  /* 蓝 - 生成中 */
  --status-success: #10b981;     /* 绿 - 已完成 */
  --status-failed: #ef4444;      /* 红 - 失败 */
  --status-pending-bg: rgba(245, 158, 11, 0.12);
  --status-processing-bg: rgba(59, 130, 246, 0.12);
  --status-success-bg: rgba(16, 185, 129, 0.12);
  --status-failed-bg: rgba(239, 68, 68, 0.12);

  /* ============ 6. 图表色板 (数据统计模块用) ============ */
  --chart-1: #3b82f6;   /* 蓝 */
  --chart-2: #10b981;   /* 绿 */
  --chart-3: #f59e0b;   /* 橙 */
  --chart-4: #ef4444;   /* 红 */
  --chart-5: #8b5cf6;   /* 紫 */
  --chart-6: #06b6d4;   /* 青 */
  --chart-7: #ec4899;   /* 粉 */
  --chart-8: #f97316;   /* 橘 */
  --chart-bg-1: rgba(59, 130, 246, 0.10);
  --chart-bg-2: rgba(16, 185, 129, 0.10);
  --chart-bg-3: rgba(245, 158, 11, 0.10);
  --chart-bg-4: rgba(239, 68, 68, 0.10);
  --chart-bg-5: rgba(139, 92, 246, 0.10);
  --chart-bg-6: rgba(6, 182, 212, 0.10);
  --chart-bg-7: rgba(236, 72, 153, 0.10);
  --chart-bg-8: rgba(249, 115, 22, 0.10);

  /* ============ 7. 卡片模式 (新模块通用) ============ */
  --card-padding: var(--space-5);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --card-gap: var(--space-4);

  /* ============ 8. 输入控件 ============ */
  --input-height: 40px;
  --input-radius: var(--radius-md);
  --input-padding: 0 var(--space-3);
  --input-border-width: 1px;

  /* ============ 9. 按钮 ============ */
  --btn-radius: var(--radius-full);   /* 主按钮全圆角 */
  --btn-height: 40px;
  --btn-height-sm: 32px;
  --btn-height-lg: 48px;
  --btn-padding-x: var(--space-6);
  --btn-padding-x-sm: var(--space-4);
  --btn-font-weight: 600;
  --btn-on-accent: #ffffff;            /* 主按钮上的文字色 (始终白) */
  --rating-on: #ffb400;               /* 评分已点 颜色 */
  --rating-off: #ffd66b;              /* 评分预览 颜色 */

  /* ============ 10. 三区式布局 (v3.81 用) ============ */
  --sidebar-width: 280px;
  --content-max-width: 880px;
  --aside-width: 320px;
  --breakpoint-tablet: 1024px;
  --breakpoint-mobile: 720px;
  --breakpoint-wide: 1680px;

  /* ============ 11. 渐变 (从 AI 商品套图截图学的) ============ */
  --gradient-primary: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%);
  --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);

  /* ============ 12. 图片网格 (AI 图片模块核心) ============ */
  --image-grid-min: 240px;
  --image-grid-gap: var(--space-5);
  --image-card-radius: var(--radius-lg);
  --image-overlay-bg: rgba(0, 0, 0, 0.6);
  --image-placeholder-bg: rgba(255, 255, 255, 0.04);

  /* ============ 15. 动效阶 (v3.82.4) ============ */
  --duration-instant: 0.08s;    /* 0.08s 鼠标按下等即时反馈 */
  --duration-fast: 0.15s;        /* 0.15s 按钮/输入框 hover 反馈 (出现 25 次) */
  --duration-base: 0.22s;        /* 0.22s 布局切换/侧栏折叠 (出现 12 次) */
  --duration-slow: 0.4s;         /* 0.4s 进度条/chart 填充 (出现 2 次) */
  --ease-default: ease;          /* 默认 ease (出现 50 次) */
  --ease-emphasis: cubic-bezier(.22,.61,.36,1);  /* 强调 ease (6 次) */
  --ease-smooth: ease-in-out;    /* 平滑切换 (3 次) */
  --ease-linear: linear;         /* 线性动画 (17 次) */

  /* 常用组合 */
  --transition-fast: all var(--duration-fast) var(--ease-default);
  --transition-base: all var(--duration-base) var(--ease-default);
  --transition-slow: all var(--duration-slow) var(--ease-default);
}

/* ============================================================================
 * 暗色模式覆盖 (v3.82 细节打磨时会完善, 这里先保底)
 * ============================================================================ */
:root[data-theme="dark"] {
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.50);
}

/* ============================================================================
 * 占位样式骨架 (v3.83-86 新模块直接复用)
 * 不写死颜色, 全用 token. 新模块只需在 HTML 加 class, 不需重写 CSS
 * ============================================================================ */

/* --- AI 图片模块 (v3.83) --- */
.ai-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--image-grid-min), 1fr));
  gap: var(--image-grid-gap);
}
.ai-image-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--image-card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.ai-image-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}
.ai-image-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--image-placeholder-bg);
}
.ai-image-card-body {
  padding: var(--space-3) var(--space-4);
}
.ai-image-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}
.ai-image-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.ai-image-status--pending    { color: var(--status-pending);    background: var(--status-pending-bg); }
.ai-image-status--processing { color: var(--status-processing); background: var(--status-processing-bg); }
.ai-image-status--success    { color: var(--status-success);    background: var(--status-success-bg); }
.ai-image-status--failed     { color: var(--status-failed);     background: var(--status-failed-bg); }

/* --- AI 视频生成模块 (v3.84) --- */
/* 复用 ai-image-card 视觉风格, 加视频特有比例 9:16 */
.ai-video-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--image-card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.ai-video-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}
.ai-video-card-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--image-placeholder-bg);
}
.ai-video-progress {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ai-video-progress-bar {
  height: 100%;
  background: var(--status-processing);
  transition: width 0.3s ease;
}

/* --- 社群运营模块 (v3.85) --- */
/* 复用 chat.css 的气泡, 这里只放表格/列表 token */
.community-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.community-list-item {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.16s ease;
}
.community-list-item:hover {
  background: var(--accent-soft);
}

/* --- 数据统计模块 (v3.86) --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--card-gap);
}
.kpi-card {
  padding: var(--card-padding);
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.kpi-card-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin: var(--space-2) 0;
}
.kpi-card-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.kpi-card-trend {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-1);
}
.kpi-card-trend--up   { color: var(--status-success); }
.kpi-card-trend--down { color: var(--status-failed); }
.chart-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.chart-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}
.chart-bar-fill--1 { background: var(--chart-1); }
.chart-bar-fill--2 { background: var(--chart-2); }
.chart-bar-fill--3 { background: var(--chart-3); }
.chart-bar-fill--4 { background: var(--chart-4); }
.chart-bar-fill--5 { background: var(--chart-5); }
.chart-bar-fill--6 { background: var(--chart-6); }
.chart-bar-fill--7 { background: var(--chart-7); }
.chart-bar-fill--8 { background: var(--chart-8); }