/* dekooz 主题变量：所有 dekooz 页面共用（主站、用户中心、云端训练、后台）。
 * 浅色为默认；深色跟随系统（html[data-theme="light"] 可强制浅色，html[data-theme="dark"] 强制深色）。
 * 只放变量（外加文件末尾全站共用的「减少动态效果」兜底），不放样式；页面自己的 CSS 只用这些变量，不写死颜色。 */
:root {
  /* 品牌色（docs/brand.md）：亮蓝 + 橙，两种主题下不变。亮蓝只用于 logo、图形和大面积色块；
     按钮、链接这类要放文字的地方用下面的 --accent（浅色主题深一档，保证白字对比度） */
  --brand-blue: #0a84ff;
  --brand-orange: #f58220;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #141a24;
  --muted: #5b6474;
  --border: #e2e5eb;
  --accent: #0068d6;
  --accent-text: #ffffff;
  --accent-soft: rgba(0, 104, 214, 0.08);
  --warn: #9a5b00;
  --warn-soft: rgba(214, 140, 0, 0.12);
  --danger: #c62f28;
  --danger-soft: rgba(198, 47, 40, 0.08);
  --ok: #0c7046; /* 比原来的 #0f7b4f 深一点：浅底胶囊（--ok-soft）上的绿字也够 4.5:1 */
  --ok-soft: rgba(12, 112, 70, 0.1);
  /* 状态色做底时上面的文字 / 图标（错误提示、确认中的按钮、完成的圆点……）：不要写死 #fff。
     浅色主题白字（≥ 5.4:1），深色主题的状态色很亮，用深色字（≥ 7.4:1） */
  --on-danger: #ffffff;
  --on-ok: #ffffff;
  --on-warn: #ffffff;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --radius: 14px;
  /* 布局规范（见 packages/ui/README.md「布局规范」）：页头、页尾、页面内容共用同一个容器宽度和页边距，
     所以三者左右永远对齐。标准页 1360px；工具 / 工作区页面在自己的样式里覆盖为 1600px；全屏工具（viewer）设为 none。 */
  --hx-container: 1360px;
  --hx-gutter: 24px;
  --hx-prose: 760px; /* 长文正文的阅读宽度 */
  color-scheme: light;
}
@media (max-width: 800px) { :root { --hx-gutter: 16px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1016; --panel: #151a23; --text: #e8ecf2; --muted: #9aa4b4; --border: #262d3a;
    --accent: #0a84ff; --accent-text: #0b1020; --accent-soft: rgba(10, 132, 255, 0.14);
    --warn: #f0b44c; --warn-soft: rgba(240, 180, 76, 0.12); --danger: #ff7a72; --danger-soft: rgba(255, 122, 114, 0.1);
    --ok: #3fcf8e; --ok-soft: rgba(63, 207, 142, 0.12); --shadow: none;
    --on-danger: #0b1020; --on-ok: #0b1020; --on-warn: #0b1020;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1016; --panel: #151a23; --text: #e8ecf2; --muted: #9aa4b4; --border: #262d3a;
  --accent: #0a84ff; --accent-text: #0b1020; --accent-soft: rgba(10, 132, 255, 0.14);
  --warn: #f0b44c; --warn-soft: rgba(240, 180, 76, 0.12); --danger: #ff7a72; --danger-soft: rgba(255, 122, 114, 0.1);
  --ok: #3fcf8e; --ok-soft: rgba(63, 207, 142, 0.12); --shadow: none;
  --on-danger: #0b1020; --on-ok: #0b1020; --on-warn: #0b1020;
  color-scheme: dark;
}

/* 系统设了「减少动态效果」：全站的过渡、动画和平滑滚动都关掉（转圈的加载图标停在原地，状态照样看得出来） */
@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;
  }
}