/* ==========================================================================
   theme.css · 新能源热管理顶刊文献库
   --------------------------------------------------------------------------
   职责边界（PLAN 第 10 节）：
     1. 主题令牌：全站唯一的视觉数值来源（颜色 / 字号 / 间距 / 圆角 / 阴影 / 字体）
     2. 基础重置：box-sizing、默认字体与行高、链接、表单控件继承、焦点环
     3. 暗色主题：html[data-theme="dark"] 覆盖同名变量
   本文件不写任何组件样式；组件样式一律写进 assets/app.css，且只能引用本文件
   的变量（不得写死色值）。
   零外部依赖：无 @import、无字体文件、无图片、无 CDN。只用系统字体栈。
   配色取向：浅色为主、低饱和、长时间阅读不疲劳的学术工具界面。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 背景与表面：由低到高，越靠近内容越亮 ---- */
  --bg: #f5f7fa;            /* 页面底色 */
  --surface: #ffffff;       /* 卡片 / 表格 / 抽屉正文 */
  --surface-2: #eef1f6;     /* 表头、输入框、次级区块 */
  --surface-3: #e3e8ef;     /* hover / 选中 / chip 底 */

  /* ---- 文字：正文 → 次要 → 弱化元信息 ---- */
  --text: #16181d;          /* 标题与正文（白底对比度 ≈ 16:1） */
  --text-dim: #4a5361;      /* 次要说明、表头、辅助文字 */
  --text-mute: #78818f;     /* 元信息、占位符、时间戳 */

  /* ---- 描边 ---- */
  --border: #dde3ea;        /* 常规分隔线、卡片描边 */
  --border-strong: #c3ccd7; /* 输入框聚焦前描边、强调边框、表头底线 */

  /* ---- 主色 ---- */
  --accent: #1f5fd6;        /* 链接、主按钮、选中态、焦点环 */
  --accent-soft: #e8effc;   /* 主色浅底：选中行、提示块、强调查询 */
  --accent-contrast: #ffffff; /* 主色实底上的文字色 */

  /* ---- 语义色（只用于状态，不做装饰） ---- */
  --ok: #227a4a;            /* 已读、成功、校验通过 */
  --warn: #a35a06;          /* 待补字段、低置信度、容量提醒 */
  --err: #b2352c;           /* 错误、删除、冲突 */
  --info: #0e6f86;          /* 中性提示、解析中 */

  /* ---- 5 个特色标签：固定色相，徽章与矩阵必须一致（PLAN 第 10 节） ---- */
  --tag-1: #2a6fd4;         /* multi-function · 多功能集成 · 蓝 */
  --tag-1-soft: #e7f0fd;
  --tag-2: #227a4a;         /* low-cost · 低成本 · 绿 */
  --tag-2-soft: #e6f4ec;
  --tag-3: #b4620a;         /* waste-valorization · 废物资源化 · 橙 */
  --tag-3-soft: #fbf0e2;
  --tag-4: #b2352c;         /* long-life-safety · 长寿命与安全 · 红 */
  --tag-4-soft: #fbecea;
  --tag-5: #6b46c1;         /* domestic-substitution · 国产替代 · 紫 */
  --tag-5-soft: #f0ecfd;

  /* ---- 圆角 ---- */
  --radius-sm: 4px;         /* 徽章、chip、输入框内小元素 */
  --radius: 8px;            /* 按钮、输入框、卡片 */
  --radius-lg: 14px;        /* 抽屉、弹窗、大面板 */

  /* ---- 阴影：静态卡片用 --shadow-1，浮层才用 --shadow-2 ---- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);

  /* ---- 间距节奏：4px 基数 ---- */
  --gap-xs: 4px;            /* 图标与文字、徽章之间 */
  --gap-sm: 8px;            /* 按钮组、表单项内 */
  --gap: 16px;              /* 卡片内边距、列表项间距 */
  --gap-lg: 24px;           /* 区块之间、页面左右 padding */
  --gap-xl: 32px;           /* 附加：页面级大区块留白 */

  /* ---- 字体：仅系统字体栈，无外部字体 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* ---- 字号阶梯：正文 15px，为中文长文阅读留余量 ---- */
  --fs-xs: 12px;            /* 元信息、表注、徽章文字 */
  --fs-sm: 13px;            /* 次要文字、表格密集行、按钮小号 */
  --fs: 15px;               /* 正文基准 */
  --fs-lg: 17px;            /* 卡片标题、列表主标题 */
  --fs-xl: 20px;            /* 区块标题 */
  --fs-2xl: 26px;           /* 页面标题 */

  /* ---- 行高（附加）：正文宽松、标题收紧 ---- */
  --lh-tight: 1.3;
  --lh: 1.65;

  /* ---- 遮罩（附加）：抽屉 / 弹窗底幕 ---- */
  --overlay: rgba(15, 22, 34, 0.45);
}

/* ==========================================================================
   基础重置
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
fieldset {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 600;
  line-height: var(--lh-tight);
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* 按钮的视觉外观一律交给 app.css 的 .x-btn；这里只做实心重置 */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th {
  font-weight: 600;
  text-align: left;
}

hr {
  margin: var(--gap) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

pre {
  margin: 0;
  overflow: auto;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* 键盘焦点：全站统一 2px 主色环，app.css 不得移除而不给替代。
   不用 box-shadow 画环，避免覆盖组件已有的 --shadow-1 / --shadow-2。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* ==========================================================================
   暗色主题：同名变量整体覆盖，组件代码一行都不用改
   切换方式见 docs/visual-spec.md 第 2 节
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1319;
  --surface: #161b22;
  --surface-2: #1c232c;
  --surface-3: #252e39;

  --text: #e6ebf2;
  --text-dim: #a7b2c0;
  --text-mute: #7b8695;

  --border: #262f3a;
  --border-strong: #3b4653;

  --accent: #6fa8f5;
  --accent-soft: #1b2a41;
  --accent-contrast: #0b1220;

  --ok: #4fbf85;
  --warn: #e0a95a;
  --err: #f08278;
  --info: #57c2d8;

  --tag-1: #74a9f0;
  --tag-1-soft: #1a2a42;
  --tag-2: #59c98f;
  --tag-2-soft: #17291f;
  --tag-3: #e3ab66;
  --tag-3-soft: #2d2418;
  --tag-4: #ef8a80;
  --tag-4-soft: #321f1e;
  --tag-5: #b49bf0;
  --tag-5-soft: #241f3a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);

  --overlay: rgba(0, 0, 0, 0.6);
}