/* ============================================================
   天晟科技 · 官网设计令牌
   方向：工业实用 / 暗色
   主色：暖炭黑系；强调色：暖橙（取「晟」光明之意）
   ============================================================ */
:root {
  /* 颜色 */
  --color-bg: #05070d;
  --color-surface: #0d1422;
  --color-surface-2: #111a2c;
  --color-text: #e8f1fa;
  --color-muted: #8fa3bd;
  --color-accent: #4db2ff;
  --color-accent-dim: rgba(77, 178, 255, 0.14);
  --color-border: rgba(140, 190, 255, 0.14);
  --color-border-strong: rgba(140, 190, 255, 0.30);
  --color-ok: #7ad48a;
  --color-warn: #e8c45a;

  /* 字体 */
  --font-display: "Chakra Petch", "Noto Sans SC", sans-serif;   /* 拉丁展示 */
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans SC", monospace;      /* 编号 / 标签 */

  /* 字阶（1.25 比例） */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
  --fs-hero: clamp(2.2rem, 4.6vw, 3.6rem);

  /* 间距梯度 */
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;

  /* 圆角 / 阴影 / 动效 */
  --radius-sm: 4px; --radius-md: 10px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.38);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.48);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms;

  /* 版面 */
  --max-w: 1180px;
}

/* ============================================================
   三套主题（后台可切换，游客无按钮）
   维度：data-accent（配色）× data-mode（深/浅）
   默认：data-accent="space" data-mode="dark"（= 现状深空蓝）
   ============================================================ */

/* ---- 主题② 暖炭黑·橙（工业稳重，取「晟」暖意）---- */
[data-accent="warm"] {
  --color-accent: #ff8a3d;
  --color-accent-dim: rgba(255, 138, 61, 0.14);
  --color-border: rgba(255, 170, 110, 0.16);
  --color-border-strong: rgba(255, 170, 110, 0.34);
  --ai-cyan: #ffb877; --ai-blue: #ff8a3d;
  --ai-line: rgba(255, 170, 110, 0.18);
}
[data-accent="warm"][data-mode="dark"] {
  --color-bg: #0a0806;
  --color-surface: #15100b;
  --color-surface-2: #1d1610;
  --color-text: #f3ece4;
  --color-muted: #b3a393;
  --color-ok: #7ad48a; --color-warn: #e8c45a;
  --ai-glass: rgba(21, 16, 11, 0.66);
  --ai-grad-a: rgba(150, 80, 20, 0.22); --ai-grad-b: rgba(120, 50, 150, 0.14);
}
[data-accent="warm"][data-mode="light"] {
  --color-bg: #faf6f1;
  --color-surface: #ffffff;
  --color-surface-2: #f4ece3;
  --color-text: #2a2018;
  --color-muted: #7a6a5a;
  --color-accent: #e06a1e;
  --color-accent-dim: rgba(224, 106, 30, 0.10);
  --color-border: rgba(120, 80, 40, 0.14);
  --color-border-strong: rgba(120, 80, 40, 0.30);
  --color-ok: #1a9c52; --color-warn: #c48a12;
  --shadow-1: 0 2px 8px rgba(80, 50, 20, 0.08);
  --shadow-2: 0 8px 28px rgba(80, 50, 20, 0.12);
  --shadow-3: 0 24px 64px rgba(80, 50, 20, 0.16);
  --ai-cyan: #e08a3d; --ai-blue: #e06a1e;
  --ai-line: rgba(224, 138, 61, 0.16);
  --ai-glass: rgba(255, 250, 245, 0.7);
}
/* 暖色套：氛围层 / 颗粒 / 选中 联动 */
[data-accent="warm"].atmosphere::before {
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(255, 138, 61, 0.14), transparent 60%),
    radial-gradient(46rem 34rem at 105% 2%, rgba(200, 100, 60, 0.16), transparent 55%);
}
[data-accent="warm"][data-mode="light"] .atmosphere::before {
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(224, 106, 30, 0.09), transparent 60%),
    radial-gradient(46rem 34rem at 105% 2%, rgba(180, 90, 40, 0.09), transparent 55%);
}
[data-accent="warm"] .grain::after { opacity: 0.04; }
[data-accent="warm"][data-mode="light"] .grain::after { opacity: 0.03; }
[data-accent="warm"] ::selection { background: var(--color-accent); color: #0a0806; }

/* ---- 主题③ 墨绿·科技（差异化）---- */
[data-accent="green"] {
  --color-accent: #2fbf8f;
  --color-accent-dim: rgba(47, 191, 143, 0.14);
  --color-border: rgba(90, 200, 160, 0.16);
  --color-border-strong: rgba(90, 200, 160, 0.34);
  --ai-cyan: #7de8c0; --ai-blue: #2fbf8f;
  --ai-line: rgba(90, 200, 160, 0.18);
}
[data-accent="green"][data-mode="dark"] {
  --color-bg: #060a08;
  --color-surface: #0d1512;
  --color-surface-2: #111c18;
  --color-text: #e6f1ec;
  --color-muted: #8aa89c;
  --color-ok: #7ad48a; --color-warn: #e8c45a;
  --ai-glass: rgba(13, 21, 18, 0.66);
  --ai-grad-a: rgba(20, 120, 80, 0.20); --ai-grad-b: rgba(40, 60, 160, 0.14);
}
[data-accent="green"][data-mode="light"] {
  --color-bg: #f3f8f5;
  --color-surface: #ffffff;
  --color-surface-2: #eaf3ee;
  --color-text: #16241f;
  --color-muted: #54706400;
  --color-muted: #547064;
  --color-accent: #158f66;
  --color-accent-dim: rgba(21, 143, 102, 0.10);
  --color-border: rgba(30, 110, 80, 0.14);
  --color-border-strong: rgba(30, 110, 80, 0.30);
  --color-ok: #1a9c52; --color-warn: #c48a12;
  --shadow-1: 0 2px 8px rgba(20, 80, 60, 0.08);
  --shadow-2: 0 8px 28px rgba(20, 80, 60, 0.12);
  --shadow-3: 0 24px 64px rgba(20, 80, 60, 0.16);
  --ai-cyan: #2fbf8f; --ai-blue: #158f66;
  --ai-line: rgba(47, 191, 143, 0.16);
  --ai-glass: rgba(243, 248, 245, 0.72);
}
[data-accent="green"].atmosphere::before {
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(47, 191, 143, 0.14), transparent 60%),
    radial-gradient(46rem 34rem at 105% 2%, rgba(40, 120, 160, 0.16), transparent 55%);
}
[data-accent="green"][data-mode="light"] .atmosphere::before {
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(21, 143, 102, 0.09), transparent 60%),
    radial-gradient(46rem 34rem at 105% 2%, rgba(30, 100, 140, 0.09), transparent 55%);
}
[data-accent="green"] .grain::after { opacity: 0.04; }
[data-accent="green"][data-mode="light"] .grain::after { opacity: 0.03; }
[data-accent="green"] ::selection { background: var(--color-accent); color: #060a08; }

/* ---- 通用：浅色模式降颗粒/氛围（未指定 accent 时兜底）---- */
[data-mode="light"] .grain::after { opacity: 0.03; }

/* ---- 主题① 深空蓝·浅色（此前缺失，导致深空蓝切浅色无变化）---- */
[data-accent="space"][data-mode="light"] {
  --color-bg: #f4f8fd;
  --color-surface: #ffffff;
  --color-surface-2: #eaf1f9;
  --color-text: #142238;
  --color-muted: #5a6b85;
  --color-accent: #1a6cff;
  --color-accent-dim: rgba(26, 108, 255, 0.10);
  --color-border: rgba(40, 80, 140, 0.14);
  --color-border-strong: rgba(40, 80, 140, 0.30);
  --color-ok: #1a9c52; --color-warn: #c48a12;
  --shadow-1: 0 2px 8px rgba(30, 60, 110, 0.08);
  --shadow-2: 0 8px 28px rgba(30, 60, 110, 0.12);
  --shadow-3: 0 24px 64px rgba(30, 60, 110, 0.16);
  --ai-cyan: #1a6cff; --ai-blue: #1a6cff;
  --ai-line: rgba(26, 108, 255, 0.16);
  --ai-glass: rgba(244, 248, 253, 0.72);
}
[data-accent="space"][data-mode="light"] .atmosphere::before {
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(26, 108, 255, 0.08), transparent 60%),
    radial-gradient(46rem 34rem at 105% 2%, rgba(90, 60, 200, 0.08), transparent 55%);
}
[data-accent="space"][data-mode="light"] .grain::after { opacity: 0.03; }
[data-accent="space"][data-mode="light"] ::selection { background: var(--color-accent); color: #ffffff; }