/**
 * 平台壳层 · 明暗主题 Token（权威定义）
 *
 * 气质：中性灰分层、低对比描边、13px 正文、紧凑 48px 顶栏、侧栏与主区同色系
 * 点缀：Light = 阳光光影；Dark = 月光光影（液态玻璃描边 / 弥散光晕）
 * 语义别名：--bg / --surface / --text / --accent 等映射自 --plat-*
 */

@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url("/web/fonts/AlimamaShuHeiTi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 字体 ── */
  --plat-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --plat-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --plat-font-display: "Alimama ShuHeiTi", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --plat-text-xs: 11px;
  --plat-text-sm: 13px;
  --plat-text-base: 14px;
  --plat-text-lg: 16px;
  --plat-weight-normal: 400;
  --plat-weight-medium: 500;
  --plat-weight-semibold: 600;

  /* ── 圆角 ── */
  --plat-radius-sm: 6px;
  --plat-radius-md: 8px;
  --plat-radius-lg: 12px;
  --plat-radius-xl: 16px;
  --plat-radius-full: 999px;

  /* ── Light · 中性灰 Light 近似 ── */
  --plat-bg: #ffffff;
  --plat-bg-subtle: #fafafa;
  --plat-bg-sidebar: #f3f3f3;
  --plat-bg-elevated: #ffffff;
  --plat-bg-input: #ffffff;
  --plat-bg-hover: rgba(0, 0, 0, 0.04);
  --plat-bg-active: rgba(0, 0, 0, 0.06);
  --plat-border: rgba(0, 0, 0, 0.08);
  --plat-border-strong: rgba(0, 0, 0, 0.14);
  --plat-text: #171717;
  --plat-text-secondary: #666666;
  --plat-text-tertiary: #757575; /* AA ≥4.5 on white */
  --plat-primary: #171717;
  --plat-primary-hover: #000000;
  --plat-primary-fg: #ffffff;
  --plat-success: #22c55e;
  --plat-warning: #ca8a04;
  --plat-danger: #ef4444;
  --plat-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --plat-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --plat-topbar-bg: rgba(255, 255, 255, 0.88);

  /*
   * 点缀色 · 月光光影（Light）
   * 主色调仍为中性黑白灰；点缀改用清冷「月光银」与银白弥散光晕（勿偏暖、勿高饱和、勿偏蓝）。
   * accent 取冷调中间银灰：白底上可做描边/文字/激活态，又能作填充配白字。
   */
  --plat-accent: #9198a6;
  --plat-accent-hover: #767d8c;
  --plat-accent-fg: #1a1c22;
  --plat-accent-soft: rgba(145, 152, 166, 0.16);
  --plat-accent-muted: rgba(145, 152, 166, 0.09);
  --plat-accent-border: rgba(145, 152, 166, 0.38);
  /* 明亮主题不用弥散光晕：白底上的银灰扩散会像脏印，直接置空，靠干净描边+极淡投影分层 */
  --plat-glow-chrome: none;
  --plat-glow-pop: none;
  --plat-glass-fill: rgba(255, 255, 255, 0.7);
  --plat-glass-fill-strong: rgba(255, 255, 255, 0.84);
  --plat-glass-blur: blur(40px) saturate(1.04) brightness(1.03);
  --plat-glass-stroke: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(226, 232, 240, 0.6) 14%,
    rgba(255, 255, 255, 0.12) 42%,
    rgba(203, 213, 225, 0.22) 72%,
    rgba(248, 250, 252, 0.7) 100%
  );
  --plat-glass-radius: 20px;
  --plat-glass-radius-sm: 14px;
  /* 明亮主题彻底去掉卡片/玻璃投影：只靠干净描边分层，杜绝白底上的灰脏残影 */
  --plat-glass-depth: none;
  --plat-glass-shadow: none;
  --plat-glass-shadow-pop: none;

  /* 平台语义映射 · Light */
  --bg: var(--plat-bg-subtle);
  --surface: var(--plat-bg);
  --surface-muted: var(--plat-bg-sidebar);
  --surface-elevated: var(--plat-bg-elevated);
  --surface-hover: var(--plat-bg-hover);
  --surface-active: var(--plat-bg-active);
  --surface-selected: rgba(0, 0, 0, 0.08);
  --border: var(--plat-border);
  --text: var(--plat-text);
  --muted: var(--plat-text-secondary);
  --primary: var(--plat-primary);
  --primary-hover: var(--plat-primary-hover);
  --accent: var(--plat-accent);
  --accent-hover: var(--plat-accent-hover);
  --accent-soft: var(--plat-accent-soft);
  --accent-muted: var(--plat-text-tertiary);
  --accent-border-strong: var(--plat-border-strong);
  --plat-accent-as-border: var(--plat-accent-border);
  --success: var(--plat-success);
  --warning: var(--plat-warning);
  --danger: var(--plat-danger);
  --radius: var(--plat-radius-lg);
  --shadow: var(--plat-shadow-sm);
  --topbar-bg: var(--plat-topbar-bg);
  --topbar-h: 48px;
  --sidebar-w: var(--explorer-w, 236px);
  --spine-w: var(--sidebar-w);

  /* ── 编辑器 / 预览组件 · Light（标签栏浅底，避免大块发灰）── */
  --editor-bg: #ffffff;
  --editor-chrome-bg: #ffffff;
  --editor-tab-bg: #f7f8fa;
  --editor-tab-hover-bg: #eef0f3;
  --editor-tab-active-bg: #ffffff;
  --editor-tab-text: #646a73;
  --editor-tab-active-text: #1f2329;
  --editor-tab-border: rgba(31, 35, 41, 0.08);
  --editor-accent: #0078d4;
  --editor-accent-hover: #106ebe;
  --editor-empty-bg: #fafafa;
  --prose-bg: #ffffff;
  --prose-text: #1e293b;
  --prose-heading: #0f172a;
  --prose-muted: #64748b;
  --prose-code-bg: #f1f5f9;
  --prose-code-inline: #be123c;
  --prose-pre-bg: #0f172a;
  --prose-pre-text: #e2e8f0;
  --prose-blockquote-bg: #f8fafc;
  --prose-border: #e2e8f0;
  --prose-border-subtle: #f1f5f9;
  --prose-table-hover: #fafafa;
  --preview-wrap-bg: #eef2f6;
  --preview-stage-bg: #ffffff;
  --preview-stage-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --toggle-track-bg: #e2e8f0;
  --toggle-btn-active-bg: #ffffff;
  --toggle-btn-text: #64748b;
  --toggle-btn-hover-text: #334155;
  --toggle-btn-active-text: #0f172a;
  --code-bg: #f8fafc;

  --agent-user-bg: rgba(0, 0, 0, 0.045);
  --agent-composer-bg: var(--plat-bg-elevated);

  --btn-ghost-bg: transparent;
  --btn-ghost-border: var(--border);
  --btn-ghost-hover-bg: var(--surface-hover);
  --btn-ghost-hover-border: var(--accent-border-strong);

  /* ── 状态指示 · Light ── */
  --status-dot-ok: #22c55e;
  --status-dot-warn: #ca8a04;
  --status-dot-error: #ef4444;
  --status-dot-pending: #a3a3a3;
  --status-text-ok: #16a34a;
  --status-text-warn: #a16207;
  --status-text-error: #dc2626;

  color-scheme: light;
}

[data-theme="dark"] {
  /* ── Dark · 中性黑灰分层（无蓝调） ── */
  --plat-bg: #121212;
  --plat-bg-subtle: #121212;
  --plat-bg-sidebar: #0e0e0e;
  --plat-bg-elevated: #1a1a1a;
  --plat-bg-input: #222222;
  --plat-bg-hover: rgba(255, 255, 255, 0.06);
  --plat-bg-active: rgba(255, 255, 255, 0.1);
  --plat-border: rgba(255, 255, 255, 0.1);
  --plat-border-strong: rgba(255, 255, 255, 0.16);
  --plat-text: #ececec;
  --plat-text-secondary: #8a8a8a;
  --plat-text-tertiary: #a3a3a3; /* AA ≥4.5 on elevated */
  --plat-primary: #ffffff;
  --plat-primary-hover: #f2f2f2;
  --plat-primary-fg: #121212;
  --plat-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --plat-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.5);
  --plat-topbar-bg: rgba(18, 18, 18, 0.82);

  /*
   * 点缀色 · 月光光影（Dark）
   * 主色调仍为中性黑灰；点缀用月光白弥散与银白折射描边，勿偏蓝、勿用绿色装饰。
   */
  --plat-accent: #f4f5f8;
  --plat-accent-hover: #ffffff;
  --plat-accent-fg: #121212;
  --plat-accent-soft: rgba(244, 245, 248, 0.1);
  --plat-accent-muted: rgba(244, 245, 248, 0.06);
  --plat-accent-border: rgba(244, 245, 248, 0.22);
  --plat-glow-chrome:
    0 0 48px rgba(244, 245, 248, 0.055),
    0 0 20px rgba(255, 255, 255, 0.06),
    0 -8px 28px rgba(244, 245, 248, 0.035);
  --plat-glow-pop:
    0 0 56px rgba(244, 245, 248, 0.07),
    0 0 24px rgba(255, 255, 255, 0.08),
    0 -10px 32px rgba(244, 245, 248, 0.04);
  --plat-glass-fill: rgba(18, 18, 20, 0.55);
  --plat-glass-fill-strong: rgba(16, 16, 18, 0.68);
  --plat-glass-blur: blur(44px) saturate(1.04) brightness(1.05);
  --plat-glass-stroke: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(236, 238, 244, 0.34) 12%,
    rgba(255, 255, 255, 0.1) 32%,
    rgba(255, 255, 255, 0.03) 52%,
    rgba(220, 222, 230, 0.12) 78%,
    rgba(245, 246, 250, 0.4) 100%
  );
  --plat-glass-radius: 20px;
  --plat-glass-radius-sm: 14px;
  --plat-glass-depth:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.28);
  --plat-glass-shadow: var(--plat-glass-depth), var(--plat-glow-chrome);
  --plat-glass-shadow-pop: var(--plat-glass-depth), var(--plat-glow-pop);

  --bg: var(--plat-bg);
  --surface: var(--plat-bg-elevated);
  --surface-muted: var(--plat-bg-sidebar);
  --surface-elevated: #222222;
  --surface-hover: var(--plat-bg-hover);
  --surface-active: var(--plat-bg-active);
  --surface-selected: rgba(255, 255, 255, 0.1);
  --border: var(--plat-border);
  --text: var(--plat-text);
  --muted: var(--plat-text-secondary);
  --primary: var(--plat-primary);
  --primary-hover: var(--plat-primary-hover);
  --accent: var(--plat-accent);
  --accent-hover: var(--plat-accent-hover);
  --accent-soft: var(--plat-accent-soft);
  --topbar-bg: var(--plat-topbar-bg);
  --shadow: var(--plat-shadow-sm);

  /* ── 编辑器 / 预览组件 · Dark（栏底略深、激活=编辑面，单层）── */
  --editor-bg: #121212;
  --editor-chrome-bg: #121212;
  --editor-tab-bg: #161616;
  --editor-tab-hover-bg: #1c1c1c;
  --editor-tab-active-bg: #121212;
  --editor-tab-text: #8a8a8a;
  --editor-tab-active-text: #ececec;
  --editor-tab-border: rgba(255, 255, 255, 0.08);
  --editor-accent: #4daafc;
  --editor-accent-hover: #6bb8ff;
  --editor-empty-bg: #0a0a0a;
  --prose-bg: #121212;
  --prose-text: #d4d4d4;
  --prose-heading: #ececec;
  --prose-muted: #8a8a8a;
  --prose-code-bg: #222222;
  --prose-code-inline: #f87171;
  --prose-pre-bg: #0a0a0a;
  --prose-pre-text: #d4d4d4;
  --prose-blockquote-bg: #1a1a1a;
  --prose-border: rgba(255, 255, 255, 0.1);
  --prose-border-subtle: rgba(255, 255, 255, 0.06);
  --prose-table-hover: rgba(255, 255, 255, 0.04);
  --preview-wrap-bg: #0a0a0a;
  --preview-stage-bg: #121212;
  --preview-stage-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --toggle-track-bg: #222222;
  --toggle-btn-active-bg: #2a2a2a;
  --toggle-btn-text: #8a8a8a;
  --toggle-btn-hover-text: #b0b0b0;
  --toggle-btn-active-text: #ececec;
  --code-bg: #222222;

  --agent-user-bg: rgba(255, 255, 255, 0.06);
  --agent-composer-bg: var(--plat-bg-elevated);

  --btn-ghost-bg: rgba(255, 255, 255, 0.04);
  --btn-ghost-border: rgba(255, 255, 255, 0.18);
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-ghost-hover-border: rgba(255, 255, 255, 0.26);

  /* ── 状态指示 · Dark ── */
  --status-dot-ok: #4ade80;
  --status-dot-warn: #facc15;
  --status-dot-error: #f87171;
  --status-dot-pending: #6a6a6a;
  --status-text-ok: #4ade80;
  --status-text-warn: #facc15;
  --status-text-error: #f87171;

  color-scheme: dark;
}

html {
  font-family: var(--plat-font-sans);
  font-size: var(--plat-text-sm);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--plat-font-sans);
  font-size: var(--plat-text-sm);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

code, pre, .path-label, .fp-pathbar {
  font-family: var(--plat-font-mono);
}