/* agent4.io 设计系统 — 令牌（见 docs/30）
   移植自 Claude Design 的 handoff bundle（tokens/{colors,typography,spacing,effects,base}.css）,
   合成一份**三个界面共用的单一来源**：控制台(/console)、终端用户客户端(/ui)、嵌入 widget。
   经 /ds 静态挂载对外，故三处引用同一份、不会各自漂移。

   语义别名是主题化的：:root = 亮色，[data-theme="dark"] = 暗色。
   **组件里只消费语义别名**（--surface / --text-primary / --accent），不要直接用原始色阶
   （--blue-500 之流）——否则暗色主题下不会自动跟着变。

   与原 DS 的两处**有意偏离**（其余逐值照搬）：
   1. `--font-sans` 的中文回落是**系统字体**，不是 Noto Sans SC/TC。全量自托管 Noto CJK 要 26MB，
      而本产品是聊天应用、用户输入任意汉字、无法按固定字符集裁子集。见 scripts/fetch_ds_fonts.py。
   2. 不含 DS 的 `base.css` 的 body/a/::selection 全局元素样式 —— 那会波及 antd 控制台的既有排版。
      重置只保留 box-sizing 与字体平滑；`.a4-grid` 保留（是品牌签名之一）。 */

@import url("/ds/fonts.css");

:root {
  /* ═══ 原始色阶：科技蓝（主色）═══ */
  --blue-50:  #eef5ff;
  --blue-100: #dae7fe;
  --blue-200: #bcd4fe;
  --blue-300: #8fb8fc;
  --blue-400: #5f95f9;
  --blue-500: #2563eb; /* primary */
  --blue-600: #1d4ed8;
  --blue-700: #1e40af;
  --blue-800: #1e3a8a;
  --blue-900: #172554;

  /* ═══ 原始色阶：青（科技感点缀 / 辉光）═══
     **只作高亮**（激活节点、渐变端点、聚焦辉光），绝不用于大面积填充 */
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;

  /* ═══ 原始色阶：Slate（冷中性色；**不用暖灰**）═══ */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #060b18;

  /* ═══ 原始色阶：语义色 ═══ */
  --green-500: #10b981;
  --green-600: #059669;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --red-500:   #ef4444;
  --red-600:   #dc2626;

  /* ═══════ 语义别名 — 亮色（默认）═══════ */
  --bg:            #ffffff;
  --bg-subtle:     #f6f9fe;
  --bg-grid:       rgba(37,99,235,0.05);
  --surface:       #ffffff;
  --surface-raised:#ffffff;
  --surface-sunken:#f1f5f9;
  --surface-hover: #f6f9fe;

  --border:        #e6ecf5;
  --border-strong: #cbd5e1;
  --border-accent: #bcd4fe;

  --text-primary:  #0b1220;
  --text-secondary:#475569;
  --text-tertiary: #94a3b8;
  --text-inverse:  #ffffff;
  --text-accent:   #1d4ed8;

  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft:   #eef5ff;
  --accent-contrast:#ffffff;

  --cyan:          #0891b2;
  --cyan-soft:     #ecfeff;

  --success:       #059669;
  --success-soft:  #ecfdf5;
  --warning:       #d97706;
  --warning-soft:  #fffbeb;
  --danger:        #dc2626;
  --danger-soft:   #fef2f2;

  --ring:          rgba(37,99,235,0.35);
  --overlay:       rgba(11,18,32,0.45);

  /* 品牌渐变与辉光。--gradient-brand 只留给 logo、主强调、细的强调分割线 */
  --gradient-brand: linear-gradient(120deg, #2563eb 0%, #06b6d4 100%);
  --gradient-brand-soft: linear-gradient(120deg, #eef5ff 0%, #ecfeff 100%);
  --gradient-hero: radial-gradient(120% 120% at 50% 0%, #eff6ff 0%, #ffffff 55%);
  --glow-accent: 0 0 0 1px rgba(37,99,235,0.12), 0 8px 30px -8px rgba(37,99,235,0.35);

  /* ═══ 字体 ═══
     Space Grotesk 是唯一核心字族（显示 + UI/正文），层级靠**字重与字号**而非第二字族。
     多文种：俄语(西里尔)→ Manrope（Space Grotesk 无西里尔）；
     **中文 → 系统字体**（原 DS 用 Noto Sans SC/TC；偏离理由见文件头）。
     简繁分开：--font-cjk-tc 供繁体界面使用，让繁体字形优先。 */
  --font-cjk-fallback: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei';
  --font-cjk-tc-fallback: 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'PMingLiU';
  --font-display: 'Space Grotesk', 'Manrope', var(--font-cjk-fallback), system-ui, sans-serif;
  --font-sans:    'Space Grotesk', 'Manrope', var(--font-cjk-fallback), system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-cjk-tc:  'Space Grotesk', 'Manrope', var(--font-cjk-tc-fallback), system-ui, sans-serif;
  --font-cyrillic:'Manrope', 'Space Grotesk', system-ui, sans-serif;

  /* 字号阶梯 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   700; /* Space Grotesk 的最大字重 */

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tighter:-0.04em;
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.14em; /* 大写 eyebrow 小标签 */

  /* ═══ 间距：严格 4px 栅格 ═══ */
  --space-0:  0;
  --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-24: 96px;
  --space-32: 128px;

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1360px;
  --gutter:        24px;
  --section-y:     96px;

  /* ═══ 圆角：4/6/8/12/16/24 + full。按钮与输入=8，卡片=12~16，胶囊=full。**不要随意混用** ═══ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ═══ 阴影：亮色下柔和低扩散。这是个扁平描边系统，不是重阴影系统 ═══ */
  --shadow-xs: 0 1px 2px rgba(11,18,32,0.05);
  --shadow-sm: 0 1px 3px rgba(11,18,32,0.08), 0 1px 2px rgba(11,18,32,0.04);
  --shadow-md: 0 4px 12px -2px rgba(11,18,32,0.10), 0 2px 6px -2px rgba(11,18,32,0.06);
  --shadow-lg: 0 12px 28px -6px rgba(11,18,32,0.14), 0 4px 10px -4px rgba(11,18,32,0.08);
  --shadow-xl: 0 24px 56px -12px rgba(11,18,32,0.20);

  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 40px;

  /* ═══ 动效：利落、有目的。无长的/弹跳的/装饰性动画 ═══ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* 只留给微交互（节点脉冲、开关旋钮）*/
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* ═══════ 语义别名 — 暗色 ═══════ */
[data-theme="dark"] {
  --bg:            #070b16;
  --bg-subtle:     #0a1120;
  --bg-grid:       rgba(96,165,250,0.06);
  --surface:       #0e1626;
  --surface-raised:#131e33;
  --surface-sunken:#0a1120;
  --surface-hover: #16223a;

  --border:        #1c2942;
  --border-strong: #2b3c5c;
  --border-accent: #274690;

  --text-primary:  #eaf1fb;
  --text-secondary:#9fb0c9;
  --text-tertiary: #64748b;
  --text-inverse:  #070b16;
  --text-accent:   #7ab0ff;

  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-active: #93bbfd;
  --accent-soft:   rgba(59,130,246,0.14);
  --accent-contrast:#ffffff;

  --cyan:          #22d3ee;
  --cyan-soft:     rgba(34,211,238,0.12);

  --success:       #34d399;
  --success-soft:  rgba(16,185,129,0.14);
  --warning:       #fbbf24;
  --warning-soft:  rgba(245,158,11,0.14);
  --danger:        #f87171;
  --danger-soft:   rgba(239,68,68,0.15);

  --ring:          rgba(96,165,250,0.45);
  --overlay:       rgba(2,6,15,0.6);

  --gradient-brand: linear-gradient(120deg, #3b82f6 0%, #22d3ee 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(59,130,246,0.16) 0%, rgba(34,211,238,0.12) 100%);
  --gradient-hero: radial-gradient(120% 120% at 50% 0%, #0d1a33 0%, #070b16 55%);
  --glow-accent: 0 0 0 1px rgba(96,165,250,0.25), 0 10px 40px -8px rgba(59,130,246,0.5);

  /* 暗色下阴影更深更实 */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 14px 34px -6px rgba(0,0,0,0.6), 0 4px 12px -4px rgba(0,0,0,0.4);
  --shadow-xl: 0 28px 64px -12px rgba(0,0,0,0.7);
}

/* 繁体界面：让繁体字形优先（简繁同码位不同字形，给简体是一眼看得出的错） */
:root:lang(zh-TW), [lang="zh-TW"] { --font-sans: var(--font-cjk-tc); --font-display: var(--font-cjk-tc); }

/* 极简重置。**刻意不设 body 的 background/color/font** —— 那会波及 antd 控制台的既有排版；
   各界面自己在其样式表里消费 --bg / --text-primary / --font-sans。 */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* 品牌签名之一：蓝图栅格背景（用于 hero / 画布类表面） */
.a4-grid {
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}