/**
 * ============================================================
 *  Design Tokens — CSS Custom Properties
 * ============================================================
 *  所有视觉变量的定义。修改此处即可全局换肤。
 * ============================================================
 */

:root {
  /* ─── 色彩系统 ──────────────────────────────────────── */

  /* 中性色（zinc）— 页面基底 */
  --color-bg-primary:   #0f172a;  /* 深海军蓝 (slate-900) — 有可见蓝色调，毛玻璃可透出层次 */
  --color-bg-secondary: #18181b;  /* zinc-900 */
  --color-bg-tertiary:  #27272a;  /* zinc-800 */
  --color-bg-elevated:  #3f3f46;  /* zinc-700 */

  /* 文字色 —— 整体较暗界面下略提亮中性灰，保持 primary>secondary>tertiary 梯度。
   * 压在背景图上的文字另靠 --text-halo 描边，不依赖此处压黑 */
  --color-text-primary:  #fafafa;  /* zinc-50 */
  --color-text-secondary:#b1b1b8;  /* 由 zinc-400 提亮一档 */
  --color-text-tertiary: #97979f;  /* 由 zinc-500 提亮一档 */
  --color-text-inverse:  #18181b;  /* zinc-900 */
  /* 文字描边光晕 —— 给“浮在背景图上”的文字加一圈暗边：
   * 浅色字保证深色图可读，暗描边保证亮色图可读，任意背景图都自带对比信封。
   * 仅挂在无背板/软背板的页面根上（text-shadow 会向子级继承）。 */
  --text-halo:           0 1px 3px rgba(0, 0, 0, 0.6);
  --text-halo-strong:    0 1px 4px rgba(0, 0, 0, 0.75);
  --color-accent:        #3b82f6;  /* blue-500 */
  --color-accent-hover:  #2563eb;  /* blue-600 */
  --color-accent-subtle: rgba(59, 130, 246, 0.12);
  --color-accent-glow:   rgba(59, 130, 246, 0.25);
  /* 压在强调色上的前景：按强调色亮度自适应深浅，运行时由 skin.ts 覆盖（此为默认强调色的兜底） */
  --color-on-accent:     #18181b;

  /* 点缀色 — 琥珀（闪电/高亮点缀） */
  --color-accent-secondary:        #f59e0b;  /* amber-500 */
  --color-accent-secondary-subtle: rgba(245, 158, 11, 0.12);

  /* 语义色 */
  --color-success:       #22c55e;
  --color-warning:       #fbbf24;
  --color-error:         #ef4444;
  --color-info:          #3b82f6;

  /* 状态色（Agent status） */
  --status-online:       #4ade80;
  --status-idle:         #a1a1aa;
  --status-busy:         #fbbf24;
  --status-offline:      #6b7280;
  --status-error:        #ef4444;

  /* ─── 边框 ──────────────────────────────────────────── */
  --border-color:        rgba(255, 255, 255, 0.06);
  --border-color-hover:  rgba(255, 255, 255, 0.12);
  --border-radius-xs:    4px;
  --border-radius-sm:    6px;
  --border-radius-md:    10px;
  --border-radius-lg:    16px;
  --border-radius-full:  9999px;

  /* ─── 玻璃质感（frosted glass） ────────────────────── */
  --glass-bg:           rgba(24, 24, 27, 0.50);
  --glass-bg-hover:     rgba(39, 39, 42, 0.60);
  /* 文字密集的侧栏：与主导航玻璃一致，靠模糊而非压黑提升可读性（过黑会呆板） */
  --glass-bg-strong:    rgba(24, 24, 27, 0.50);
  /* 居中内容页的轻量底：很淡，仅托起灰色解释文字，背景图仍大面积透出。
   * 较暗界面下微提 0.25→0.32（肉眼几乎无感），主力可读性交给 --text-halo */
  --glass-bg-soft:      rgba(24, 24, 27, 0.32);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-blur:         16px;
  --glass-shadow:       0 4px 20px rgba(0, 0, 0, 0.4);

  /* ─── 阴影 ──────────────────────────────────────────── */
  --shadow-sm:           0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:           0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow:         0 0 24px var(--color-accent-glow);

  /* ─── 字体 ──────────────────────────────────────────── */
  --font-sans:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.8125rem;  /* 13px */
  --text-base:           0.875rem;   /* 14px */
  --text-lg:             1rem;       /* 16px */
  --text-xl:             1.125rem;   /* 18px */
  --text-2xl:            1.5rem;     /* 24px */
  --text-3xl:            2rem;       /* 32px */
  --text-4xl:            2.5rem;     /* 40px */

  --leading-tight:       1.25;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;

  --font-normal:         400;
  --font-medium:         500;
  --font-semibold:       600;
  --font-bold:           700;

  /* ─── 间距（4px 基准） ──────────────────────────────── */
  --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;

  /* ─── 动效 ──────────────────────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  /* 强弹性（对话窗弹出） */
  --ease-spring:     cubic-bezier(0.5, 1.6, 0.4, 1);
  /* 紧凑展开/折叠（卡片高度过渡） */
  --ease-collapse:   cubic-bezier(0.4, 0, 0.2, 1);
  /* 流畅曲线（hover、focus、scale） */
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 企宣级强减速：慢起快铺再从容收尾，侧板/抽屉展开的高级质感（Material 3 emphasized decelerate） */
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-spring: 520ms;
  /* 企宣侧板展开时长（够长才铺得出减速尾巴） */
  --duration-emphasized: 480ms;

  /* ─── 背景纹理（默认无，设置 URL 即可叠加） ────────── */
  --texture: none;
  --texture-opacity: 0;
  --texture-blur: 0px;
  --texture-blend: normal;
  --texture-size: auto;
  --texture-repeat: repeat;

  /* ─── 布局 ──────────────────────────────────────────── */
  --sidebar-width:    260px;
  --header-height:    56px;
  --content-max:      1400px;

  /* ─── 别名（兼容旧版命名） ────────────────────────── */
  --color-surface:            var(--color-bg-secondary);
  --color-bg:                 var(--color-bg-primary);
  --color-text:               var(--color-text-primary);
  --color-border:             var(--border-color);
  --color-bg-hover:           var(--color-bg-tertiary);
  --color-text-quaternary:    #76767f;  /* 由 zinc-600 提亮一档 */
  /* 之前被引用却从未定义（McpPage / chat compact），会回退成亮白；统一为可读次级灰 */
  --color-text-muted:         var(--color-text-secondary);
  --text-muted:               var(--color-text-secondary);
  --color-danger:             var(--color-error);
  --color-danger-hover:       #c53030;

  --radius-xs:                var(--border-radius-xs);
  --radius-sm:                var(--border-radius-sm);
  --radius-md:                var(--border-radius-md);
  --radius-lg:                var(--border-radius-lg);
  --radius-full:              var(--border-radius-full);

  --font-xs:                  var(--text-xs);
  --font-sm:                  var(--text-sm);
  --font-lg:                  var(--text-lg);

  /* ─── 环境光（皮肤氛围色） ────────────────────────── */
  --ambient-glow-1:           rgba(59, 130, 246, 0.35);

  /* ─── 玻璃别名 ────────────────────────────────────── */
  --glass:                    var(--glass-bg);
  --glass-hover:              var(--glass-bg-hover);
}
