/* ============================================================================
 * J'sRAG 设计系统 · 三层令牌(全局 → 语义 → 组件)
 * 依据:docs/design/RAG知识库工程-界面设计系统与组件规格.md §2
 * 方向:一套系统·三轴变体 —— 主题(暖档案/冷靛蓝) × 明暗(亮/暗) × 密度(舒适/紧凑)
 * 默认:档案馆(暖 + 亮 + 舒适)
 * 深度策略:单一 —— surface 色阶分层 + 发丝边框;投影只给真正浮层。
 * 组件只认「语义令牌」层,不直接碰具体 hex。
 * ========================================================================== */

/* ---------- 全局令牌 · 档案暖(亮) ---------- */
:root {
  color-scheme: light;

  /* 中性 · 档案纸与墨(占 ~60%) */
  --g-ink-900: #1c1a17;   /* 主文字,暖黑非纯黑 */
  --g-ink-700: #3a352d;   /* 次文字 */
  --g-ink-500: #6b665e;   /* 三级/说明 */
  --g-ink-300: #a49c90;   /* 元信息/占位 */
  --g-parchment-0: #faf7f0; /* 画布 canvas */
  --g-parchment-1: #f3edde; /* 面板/卡片 surface */
  --g-parchment-2: #ece3cf; /* 抬升 surface(浮层) */
  --g-parchment-inset: #f1ead8; /* 输入内陷(比面板略深) */
  --g-hairline: rgba(28, 26, 23, 0.10);
  --g-hairline-strong: rgba(28, 26, 23, 0.18);

  /* 品牌强调 · 暖(≤10%) */
  --g-amber-600: #b0722c;
  --g-amber-700: #935d1f;
  --g-amber-050: #f6ecd9;

  /* 语义色 · 只为意义,不做装饰 */
  --g-verify-600: #3f7d4e;  /* observed 亲见 / 验证 */
  --g-verify-050: #eaf1e8;
  --g-infer-600: #9a7b3e;   /* inferred 推断(空心) */
  --g-stale-600: #8a6d2e;   /* 过时 */
  --g-stale-050: #f6ecd9;
  --g-conflict-600: #a8452f;/* 矛盾 / 危险 */
  --g-conflict-050: #f7e9e4;

  /* 圆角 · 同心阶梯(外 = 内 + padding) */
  --radius-tag: 6px;
  --radius-input: 6px;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;

  /* 间距 · base 4px,只用倍数 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* 投影 · 只给真正浮层(亮色:1px 环 + 两层柔和) */
  --shadow-overlay:
    0 0 0 1px rgba(28, 26, 23, 0.06),
    0 1px 2px -1px rgba(28, 26, 23, 0.10),
    0 8px 24px rgba(28, 26, 23, 0.10);

  /* 动效 · UI <300ms,自定义 ease-out,禁 ease-in / transition:all */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 130ms;
  --dur-pop: 190ms;
  --dur-modal: 260ms;

  /* 字体三分 */
  --font-serif: "Source Han Serif SC", "Songti SC", "Noto Serif SC", Georgia, serif;
  --font-sans: "Inter", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Sarasa Mono SC", "Cascadia Code", Menlo, monospace;

  /* 密度轴:舒适(默认) */
  --density-card-pad: var(--space-4);
  --density-row-gap: var(--space-4);
}

/* ---------- 主题变体:冷靛蓝(研究工作台) ---------- */
:root[data-brand="cool"] {
  --g-amber-600: #3a5ea8;   /* 强调换靛蓝 */
  --g-amber-700: #2f4d8a;
  --g-amber-050: #e9edf7;
}

/* ---------- 明暗变体:暗(= 控制室的底) ---------- */
:root[data-mode="dark"] {
  color-scheme: dark;
  --g-ink-900: #e6eaf0;
  --g-ink-700: #a7b1bf;
  --g-ink-500: #7f8896;
  --g-ink-300: #5b6675;
  --g-parchment-0: #14171c;  /* 驾驶舱底 */
  --g-parchment-1: #1b1f26;  /* 面板 +7%L */
  --g-parchment-2: #232833;  /* 抬升 +9%L */
  --g-parchment-inset: #10131a;
  --g-hairline: rgba(255, 255, 255, 0.09);   /* 暗底靠边框,投影失效 */
  --g-hairline-strong: rgba(255, 255, 255, 0.16);
  --g-amber-600: #e0a24a;    /* 暗底提亮的琥珀 */
  --g-amber-050: #2a2416;
  --g-verify-600: #4fae62;
  --g-infer-600: #b79a5a;
  --g-stale-600: #d6b25a;
  --g-conflict-600: #e0655a;
  --shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.10); /* 暗底只留环 */
}
:root[data-mode="dark"][data-brand="cool"] {
  --g-amber-600: #7fb0ff;
  --g-amber-050: #16233a;
}

/* ---------- 密度变体:紧凑(驾驶舱) ---------- */
:root[data-density="compact"] {
  --density-card-pad: var(--space-3);
  --density-row-gap: var(--space-2);
}

/* ============================================================================
 * 语义令牌 —— 组件只认这一层
 * ========================================================================== */
:root {
  --bg-canvas: var(--g-parchment-0);
  --bg-surface: var(--g-parchment-1);
  --bg-raised: var(--g-parchment-2);
  --bg-inset: var(--g-parchment-inset);

  --fg-primary: var(--g-ink-900);
  --fg-secondary: var(--g-ink-700);
  --fg-tertiary: var(--g-ink-500);
  --fg-muted: var(--g-ink-300);

  --border-hairline: var(--g-hairline);
  --border-emphasis: var(--g-hairline-strong);
  --focus-ring: var(--g-amber-600);

  --brand: var(--g-amber-600);
  --brand-hover: var(--g-amber-700);
  --brand-weak: var(--g-amber-050);
  --on-brand: #ffffff;

  /* 断言级溯源三态(接 Provenance.source_kind / RetrievedContext.create_safety) */
  --evidence-observed: var(--g-verify-600);
  --evidence-inferred: var(--g-infer-600);
  --evidence-self: var(--g-stale-600);

  /* 知识边界四态(接 RetrievedContext.gap_flags) */
  --gap-unknown: var(--g-ink-500);
  --gap-stale: var(--g-stale-600);
  --gap-conflict: var(--g-conflict-600);
  --gap-weak: var(--g-stale-600);

  /* 置信度三档(接 AnswerResult.confidence) */
  --confidence-high: var(--g-verify-600);
  --confidence-mid: var(--g-stale-600);
  --confidence-low: var(--g-conflict-600);
}

/* ============================================================================
 * 字阶 —— base 15px,比率 1.25;层级用 size × weight × color 三杠杆
 * ========================================================================== */
:root {
  --fs-caption: 12px;
  --fs-label: 13px;
  --fs-body: 15px;
  --fs-h4: 16px;
  --fs-answer: 17px;
  --fs-h3: 19px;
  --fs-h2: 24px;
  --fs-h1: 30px;
  --fs-metric: 28px;
}

/* ============================================================================
 * 基础复位 + 无障碍
 * ========================================================================== */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 尊重减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 数字等宽防跳动 */
.tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }