/* ==========================================================================
   variables.css — 设计令牌（全站视觉基调的单一事实源）
   青 = 脑机接口 / 信号采集（--c-cyan）
   紫 = AI 情绪 / 仿生（--c-purple）
   ========================================================================== */

:root {
  /* ---- 色彩 ---- */
  --bg-deep: #050810;          /* 深空黑 */
  --bg-panel: #0a0f1e;         /* 卡片/面板底色 */
  --bg-elevated: #0d1428;

  --c-cyan: #00e5ff;           /* 电光青：脑机接口 / 信号 */
  --c-purple: #b26bff;         /* 霓虹紫：AI 情绪 / 仿生 */
  --c-cyan-soft: color-mix(in srgb, var(--c-cyan) 16%, transparent);
  --c-purple-soft: color-mix(in srgb, var(--c-purple) 16%, transparent);
  --c-cyan-faint: color-mix(in srgb, var(--c-cyan) 8%, transparent);
  --c-purple-faint: color-mix(in srgb, var(--c-purple) 8%, transparent);

  --grad-brand: linear-gradient(120deg, var(--c-cyan), var(--c-purple));
  --grad-brand-soft: linear-gradient(
    120deg,
    color-mix(in srgb, var(--c-cyan) 30%, transparent),
    color-mix(in srgb, var(--c-purple) 30%, transparent)
  );

  /* ---- 文字 ---- */
  --text-main: #e8f0ff;
  --text-sub: #9aa4bd;
  --text-dim: #5f6a85;

  /* ---- 玻璃 ---- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(10, 15, 30, 0.78);
  --glass-border: rgba(255, 255, 255, 0.09);

  /* ---- 辉光 ---- */
  --glow-cyan-sm: 0 0 12px color-mix(in srgb, var(--c-cyan) 35%, transparent);
  --glow-cyan-md: 0 0 26px color-mix(in srgb, var(--c-cyan) 26%, transparent);
  --glow-purple-sm: 0 0 12px color-mix(in srgb, var(--c-purple) 35%, transparent);
  --glow-purple-md: 0 0 26px color-mix(in srgb, var(--c-purple) 26%, transparent);

  /* ---- 字体 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 间距 ---- */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ---- 其他 ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1200px;
  --nav-h: 64px;
  --z-nav: 100;
  --z-menu: 90;
  --z-canvas: 1;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}