html,
body {
  height: 100%;
}

/* 全局主题变量（使用 _theme-helpers.scss 中的 mixin/map）
	 - 在 :root 中生成默认亮色主题变量
	 - 支持手动切换（data-theme="dark" / .theme-dark）
	 - 保留 prefers-color-scheme 媒体查询用于自动切换
*/

// 亮色主题变量 map（键不带 -- 前缀）
$theme-light: (
  "color-fg-default": #24292f,
  "color-fg-muted": #57606a,
  "color-fg-subtle": #6e7781,
  "color-canvas-default": #ffffff,
  "color-canvas-subtle": #f6f8fa,
  "color-border-default": #d0d7de,
  "color-border-muted": hsla(210, 18%, 87%, 1),
  "color-neutral-muted": rgba(175, 184, 193, 0.2),
  "color-accent-fg": #0969da,
  "color-accent-emphasis": #0969da,
  "color-attention-subtle": #fff8c5,
  "color-danger-fg": #cf222e,
  "color-mark-default": rgb(255, 255, 0),
  "color-mark-fg": rgb(255, 187, 0),
);

// 暗色主题变量 map（对应亮色变量的语义）
$theme-dark: (
  "color-fg-default": #c9d1d9,
  "color-fg-muted": #8b949e,
  "color-fg-subtle": #6e7681,
  "color-canvas-default": #0d1117,
  "color-canvas-subtle": #010409,
  "color-border-default": #30363d,
  "color-border-muted": hsla(210, 18%, 20%, 1),
  "color-neutral-muted": rgba(175, 184, 193, 0.12),
  "color-accent-fg": #58a6ff,
  "color-accent-emphasis": #2389ff,
  "color-attention-subtle": rgba(255, 214, 10, 0.07),
  "color-danger-fg": #ff7b72,
  "color-mark-default": rgb(255, 214, 10),
  "color-mark-fg": rgb(255, 165, 0),
);

// 在 :root 中生成默认（亮色）变量，便于组件直接使用 css var
@include generate-theme(":root", $theme-light);

// 手动主题切换支持：data-theme 或 class
@include generate-theme(':root[data-theme="dark"]', $theme-dark);
@include generate-theme(".theme-light", $theme-light);
@include generate-theme(".theme-dark", $theme-dark);

#app {
  height: 100%;
  background-color: css-var(color-canvas-default);
  color: css-var(color-fg-default);
  line-height: 1.2;
}