/* ============================================================
   灵境AI社群 · 科技感配色 Design Tokens（v1.1 合并版）
   = 原《design-tokens.css》+ 补丁 v1.1（2026-10-21）
   修订记录：
   - --lj-gutter: 120px 固定值 → clamp(20px, 4vw, 64px) 响应式
   - 新增版心三件套：--lj-max-width / --lj-container-w / --lj-container-narrow
   - 新增栅格三件套：--lj-grid-2/3/4 + --lj-grid-gap + 布局工具类
   - 新增常用组合：.lj-split（hero 分栏）/ .lj-aside（侧栏双栏）
   - 字体：保留 token 但不引 webfont（站内「不引 CDN/字体」基线），
     用系统栈 fallback 生效；品牌字感后续自托管子集化再切

   用法：各页 <head> 引入本文件；同名旧变量已按新值覆盖。
   深浅主题：:root 深色（默认）/ [data-theme="light"] 浅色（预留）。
   ============================================================ */

:root {
  /* —— 极光渐变签名：青 → 紫 → 粉（Logo / 主按钮 / 强调区块） —— */
  --lj-gradient-aurora: linear-gradient(90deg, #22D3EE 0%, #7C5CFC 50%, #F472B6 100%);
  --lj-gradient-aurora-soft: linear-gradient(135deg, rgba(34,211,238,.16) 0%, rgba(124,92,252,.12) 50%, rgba(244,114,182,.16) 100%);

  /* —— 深色主题（主站默认） —— */
  --lj-bg: #0A0E27;
  --lj-bg-deep: #070A1C;
  --lj-surface: #11183C;
  --lj-surface-2: #121A3A;
  --lj-elevation: #1E2A52;
  --lj-border: #2A3358;
  --lj-border-soft: #20294F;

  --lj-primary: #22D3EE;
  --lj-secondary: #7C5CFC;
  --lj-accent: #F472B6;

  --lj-text: #EAEDFF;
  --lj-text-muted: #8A93B8;
  --lj-text-faint: #5A6486;

  /* —— 语义色（深浅通用） —— */
  --lj-success: #34D399;
  --lj-warning: #FBBF24;
  --lj-danger: #FB7185;
  --lj-info: #38BDF8;

  /* —— 辉光 / 阴影 —— */
  --lj-glow-primary: 0 8px 24px rgba(124,92,252,.45);
  --lj-glow-aurora: 0 0 48px rgba(124,92,252,.45), 0 0 24px rgba(34,211,238,.35);

  /* —— 圆角 —— */
  --lj-radius-pill: 999px;
  --lj-radius-card: 16px;
  --lj-radius-panel: 20px;
  --lj-radius-panel-lg: 24px;
  --lj-radius-tag: 12px;

  /* —— 间距（4px 基准） —— */
  --lj-space-2: 8px;
  --lj-space-3: 12px;
  --lj-space-4: 16px;
  --lj-space-5: 20px;
  --lj-space-6: 24px;
  --lj-space-7: 28px;
  --lj-space-10: 40px;
  --lj-space-12: 48px;
  --lj-space-16: 64px;
  --lj-space-24: 96px;

  /* —— 版心（v1.1 补丁：对齐站内 1600px 宽屏版心） —— */
  --lj-max-width: 1600px;
  --lj-container-w: min(var(--lj-max-width), 100% - var(--lj-gutter) * 2);
  --lj-container-narrow: 960px;

  /* —— 响应式 gutter（v1.1 补丁：覆盖原 120px 固定值） —— */
  --lj-gutter: clamp(20px, 4vw, 64px);

  /* —— 栅格三件套（v1.1 补丁） —— */
  --lj-grid-2: repeat(2, minmax(0, 1fr));
  --lj-grid-3: repeat(3, minmax(0, 1fr));
  --lj-grid-4: repeat(4, minmax(0, 1fr));
  --lj-grid-gap: clamp(16px, 2.4vw, 32px);

  /* —— 断点说明值（媒体查询无法用变量，作文档与 JS 读取用） —— */
  --lj-bp-md: 960px;
  --lj-bp-sm: 640px;

  /* —— 字体（不引 webfont，系统栈 fallback 生效） —— */
  --lj-font-cn: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --lj-font-en: system-ui, sans-serif;
}

/* —— 浅色主题（预留：主题切换机制上线时启用） —— */
[data-theme="light"] {
  --lj-bg: #F6F8FC;
  --lj-bg-deep: #ECF0F8;
  --lj-surface: #FFFFFF;
  --lj-surface-2: #F1F4FB;
  --lj-elevation: #FFFFFF;
  --lj-border: #E2E6F0;
  --lj-border-soft: #E2E6F0;
  --lj-primary: #0891B2;
  --lj-secondary: #6D4AED;
  --lj-accent: #DB2777;
  --lj-text: #0E1430;
  --lj-text-muted: #5A6486;
  --lj-text-faint: #8A93B8;
}

/* ===== 布局工具类（v1.1 补丁） ===== */
.lj-container{ width: var(--lj-container-w); margin-inline: auto; }
.lj-container-narrow{ width: min(var(--lj-container-narrow), 100% - var(--lj-gutter) * 2); margin-inline: auto; }
.lj-grid{ display: grid; grid-template-columns: var(--lj-grid-3); gap: var(--lj-grid-gap); }
.lj-grid-2{ grid-template-columns: var(--lj-grid-2); }
.lj-grid-3{ grid-template-columns: var(--lj-grid-3); }
.lj-grid-4{ grid-template-columns: var(--lj-grid-4); }

@media (max-width: 960px){
  .lj-grid{ grid-template-columns: var(--lj-grid-2); }
  .lj-grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .lj-grid, .lj-grid-2, .lj-grid-3, .lj-grid-4{ grid-template-columns: 1fr; }
}

/* —— 常用组合 —— */
.lj-split{ display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--lj-grid-gap); align-items: start; }
@media (max-width: 960px){ .lj-split{ grid-template-columns: 1fr; } }

.lj-aside{ display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; }
@media (max-width: 960px){ .lj-aside{ grid-template-columns: 1fr; } }