@import './fonts.css';
@import 'prismjs/themes/prism-tomorrow.css';

/* 基础主题。--rm-* 变量继续作为主题接口，字体在本地加载。 */
:root {
  color-scheme: light;
  --rm-sidebar-width: 288px;
  --rm-font-text: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --rm-font-heading: 'Noto Serif SC', 'Source Han Serif SC', serif;
  --rm-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --rm-font-size: 16px;
  --rm-line-height: 1.75;
  --rm-content-width: 760px;
  --rm-paragraph-spacing: 16px;
  --rm-glass-opacity: 0.75;
  --rm-bg: #faf8ff;
  --rm-sidebar-bg: #f2f3ff;
  --rm-text: #131b2e;
  --rm-text-muted: #777587;
  --rm-divider: rgba(119, 117, 135, 0.14);
  --rm-accent: #4f46e5;
  --rm-accent-strong: #3525cd;
  --rm-selection: rgba(79, 70, 229, 0.16);
  --rm-hover: rgba(199, 196, 216, 0.14);
  --rm-active: rgba(255, 255, 255, 0.85);
  --rm-danger: #ba1a1a;
  --rm-warn-bg: #fff8e6;
  --rm-warn-text: #8a5a00;
  --rm-shadow: 0 12px 40px -12px rgba(19, 27, 46, 0.18), 0 2px 8px rgba(19, 27, 46, 0.03);
  --rm-inline-code-bg: #eaedff;
  --rm-inline-code-text: #3525cd;
  --rm-code-bg: #ffffff;
  --rm-code-text: #334155;
  --rm-code-font-size: 14px;
  --rm-highlight-bg: rgba(255, 213, 0, 0.35);
}

:root:where([data-rm-color-mode="dark"]) {
  color-scheme: dark;
  --rm-bg: #1e2022;
  --rm-text: rgba(255, 255, 255, 0.87);
  --rm-text-muted: rgba(235, 235, 235, 0.6);
  --rm-divider: rgba(84, 84, 84, 0.48);
  --rm-accent: #42d392;
  --rm-accent-strong: #42b883;
  --rm-inline-code-bg: #2f2f2f;
  --rm-inline-code-text: #f19a58;
  --rm-code-bg: #2d2d2d;
  --rm-code-text: #ccc;
  --rm-highlight-bg: rgba(255, 213, 0, 0.28);

  --rm-sidebar-bg: #191b1d;
  --rm-hover: rgba(255, 255, 255, 0.06);
  --rm-active: rgba(66, 211, 146, 0.16);
  --rm-warn-bg: #2f2716;
  --rm-warn-text: #f0c060;
  --rm-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-rm-color-mode])) {
    color-scheme: dark;
    --rm-bg: #1e2022;
    --rm-text: rgba(255, 255, 255, 0.87);
    --rm-text-muted: rgba(235, 235, 235, 0.6);
    --rm-divider: rgba(84, 84, 84, 0.48);
    --rm-accent: #42d392;
    --rm-accent-strong: #42b883;
    --rm-inline-code-bg: #2f2f2f;
    --rm-inline-code-text: #f19a58;
    --rm-code-bg: #2d2d2d;
  --rm-code-text: #ccc;
    --rm-highlight-bg: rgba(255, 213, 0, 0.28);

    --rm-sidebar-bg: #191b1d;
    --rm-hover: rgba(255, 255, 255, 0.06);
    --rm-active: rgba(66, 211, 146, 0.16);
    --rm-warn-bg: #2f2716;
    --rm-warn-text: #f0c060;
    --rm-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

html,
body {
  margin: 0;
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-text);
}

.cm-editor {
  font-size: var(--rm-font-size);
  line-height: var(--rm-line-height);
  background: var(--rm-bg);
  color: var(--rm-text);
}
.cm-editor.cm-focused {
  outline: none;
}
.cm-editor .cm-scroller {
  font-family: var(--rm-font-editor, var(--rm-font-text));
}
.cm-editor .cm-content {
  max-width: var(--rm-content-width);
  margin: 0 auto;
  padding: 32px 24px 40vh;
  caret-color: var(--rm-accent);
}
.cm-editor .cm-content.cm-rm-source { font-family: var(--rm-font-mono); }
.cm-editor .cm-cursor {
  border-left: 2px solid var(--rm-accent);
}
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground {
  background: var(--rm-selection) !important;
}

/* 标题 */
.cm-line:is(.cm-rm-h1, .cm-rm-h2, .cm-rm-h3, .cm-rm-h4, .cm-rm-h5, .cm-rm-h6) { line-height: 1.4; padding-top: 1rem; padding-bottom: 0.5rem; }
.cm-line.cm-rm-h1 { font-size: 2.2em; line-height: 1.3; }
.cm-line.cm-rm-h2 { font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid var(--rm-divider); }
.cm-line.cm-rm-h3 { font-size: 1.4em; line-height: 1.43; }
.cm-line.cm-rm-h4 { font-size: 1.2em; }
.cm-line.cm-rm-h5, .cm-line.cm-rm-h6 { font-size: 1em; }

/* Markdown 标记（激活行显示源码时） */
.cm-rm-markup,
.cm-rm-url { color: var(--rm-text-muted); }
.cm-rm-link,
.cm-rm-link .cm-rm-url { color: var(--rm-accent-strong); text-decoration: none; cursor: text; }

/* 行内代码 */
.cm-rm-inline-code {
  font-family: var(--rm-font-mono);
  font-size: 0.875em;
  background: var(--rm-inline-code-bg);
  color: var(--rm-inline-code-text);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* 代码块
 * 背景画在 ::before 上并置于选区图层之下：若直接给 .cm-line 设背景，会盖住 CodeMirror 绘制的选区 */
.cm-line.cm-rm-code {
  position: relative;
  font-family: var(--rm-font-mono);
  font-size: var(--rm-code-font-size);
  line-height: 1.5;
  color: var(--rm-code-text);
  padding: 0 24px;
  tab-size: 4;
}
.cm-line.cm-rm-code::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rm-code-bg);
  z-index: -10;
  pointer-events: none;
}
.cm-line.cm-rm-code .cm-rm-mono { font-family: inherit; }
.cm-line.cm-rm-code-begin { padding-top: 10px; min-height: 26px; }
.cm-line.cm-rm-code-end { padding-bottom: 10px; }
.cm-line.cm-rm-code-begin::before { border-radius: 8px 8px 0 0; }
.cm-line.cm-rm-code-end::before { border-radius: 0 0 8px 8px; }
.cm-line.cm-rm-code-begin.cm-rm-code-end::before { border-radius: 8px; }
/* 围栏展开前后保持同一行高，语言标签与复制按钮不参与行高计算，避免代码内容跳动。 */
.cm-rm-code-header { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; user-select: none; }
.cm-line.cm-rm-code-begin .cm-rm-code-header { position: absolute; top: 6px; right: 12px; }
.cm-rm-code-lang { color: var(--rm-text-muted); font-size: 12px; line-height: 1; }
.cm-rm-code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rm-text-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.cm-rm-code-copy:hover { color: var(--rm-accent-strong); background: var(--rm-hover); }
.cm-rm-code-copy.cm-rm-copied { color: #42d392; }
.cm-rm-code .cm-rm-markup { color: var(--rm-text-muted); }

/* 引用 */
.cm-line.cm-rm-quote {
  border-left: 3px solid var(--rm-accent);
  padding: 5px 15px;
  background: color-mix(in srgb, var(--rm-accent) 4%, transparent);
}

/* 列表 */
.cm-rm-bullet { color: var(--rm-text-muted); display: inline-block; width: 1ch; }
.cm-rm-task { margin: 0 0.4em 0 0; vertical-align: -0.1em; accent-color: var(--rm-accent); cursor: pointer; }

/* 分隔线 */
.cm-rm-hr { display: inline-block; width: 100%; border-top: 1px solid var(--rm-divider); vertical-align: middle; }

/* 图片 */
.cm-rm-image { display: block; }
.cm-rm-image img { max-width: 100%; border-radius: 4px; }
.cm-rm-image-error { color: var(--rm-text-muted); font-style: italic; }

/* 表格：光标在表格内时以等宽源码显示，否则为可编辑的渲染表格 */
.cm-line.cm-rm-table { font-family: var(--rm-font-mono); font-size: 0.9em; }
.cm-rm-table-widget { padding: 2px 0 4px; width: fit-content; max-width: 100%; }
.cm-rm-table-scroll { overflow-x: auto; }
.cm-rm-table-widget table { border-collapse: collapse; font-size: 0.95em; line-height: 1.5; }
.cm-rm-table-widget th,
.cm-rm-table-widget td {
  border: 1px solid var(--rm-divider);
  padding: 6px 12px;
  min-width: 3em;
  cursor: text;
  outline: none;
}
.cm-rm-table-widget th { font-weight: 600; text-align: left; background: var(--rm-inline-code-bg); }
.cm-rm-table-widget [contenteditable] { box-shadow: inset 0 0 0 2px var(--rm-accent); font-family: var(--rm-font-mono); font-size: 0.9em; }
.cm-rm-table-widget code { font-family: var(--rm-font-mono); font-size: 0.875em; background: var(--rm-inline-code-bg); color: var(--rm-inline-code-text); padding: 0.1em 0.35em; border-radius: 4px; }
.cm-rm-table-widget a { color: var(--rm-accent-strong); }
/* 工具栏占据表格上方的固定空间，只切换可见性，不遮挡表格也不引起跳动 */
.cm-rm-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}
.cm-rm-table-widget:hover .cm-rm-table-toolbar,
.cm-rm-table-widget:focus-within .cm-rm-table-toolbar { visibility: visible; opacity: 1; }
.cm-rm-table-tools {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--rm-divider);
  border-radius: 8px;
  background: var(--rm-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cm-rm-table-tools button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rm-text-muted);
  font: 12px/1 var(--rm-font-text);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.cm-rm-table-tools button:hover { color: var(--rm-accent-strong); background: var(--rm-selection); }
.cm-rm-table-tools button.cm-rm-danger:hover { color: #e5484d; background: rgba(229, 72, 77, 0.1); }
.cm-rm-table-tools svg { flex: none; }
.cm-rm-table-tools .cm-rm-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--rm-divider); }
.cm-rm-image { cursor: pointer; }

@media (max-width: 640px) {
  .cm-editor .cm-content { padding: 16px 16px 40vh; }
  /* 触屏没有悬停，工具栏常显，按钮加大触控热区 */
  .cm-rm-table-toolbar { visibility: visible; opacity: 1; }
  .cm-rm-table-tools button { height: 36px; padding: 0 10px; }
  .cm-rm-code-copy { width: 36px; height: 36px; }
  .cm-line.cm-rm-code { padding-left: 12px; padding-right: 12px; }
  .cm-line.cm-rm-code-begin { min-height: 36px; }
}

/* ---- Typora 扩展语法 ---- */
.cm-rm-highlight,
.cm-rm-table-widget mark { background: var(--rm-highlight-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.cm-rm-sup { vertical-align: super; font-size: 0.75em; line-height: 0; }
.cm-rm-sub { vertical-align: sub; font-size: 0.75em; line-height: 0; }
.cm-rm-placeholder { color: var(--rm-text-muted); font-style: italic; }

.cm-rm-math { cursor: pointer; }
.cm-rm-math-block { display: block; padding: 8px 0; text-align: center; overflow-x: auto; overflow-y: hidden; cursor: pointer; }
.cm-rm-math-block .katex-display { margin: 0; }
.cm-line.cm-rm-math-source { font-family: var(--rm-font-mono); font-size: 0.9em; color: var(--rm-text-muted); }
/* 编辑时显示在源码下方的预览 */
.cm-rm-preview { margin: 4px 0 8px; padding: 8px 12px; border: 1px dashed var(--rm-divider); border-radius: 6px; cursor: default; }

.cm-rm-code-render { display: block; padding: 8px 0; overflow-x: auto; cursor: pointer; }
.cm-rm-mermaid { display: block; padding: 8px 0; text-align: center; overflow-x: auto; cursor: pointer; color: var(--rm-text-muted); }
.cm-rm-mermaid svg { max-width: 100%; height: auto; }
.cm-rm-render-error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(229, 72, 77, 0.08);
  color: #e5484d;
  font-family: var(--rm-font-mono);
  font-size: 12px;
  text-align: left;
  white-space: pre-wrap;
}

.cm-rm-emoji { cursor: text; }

.cm-rm-footnote-ref { color: var(--rm-accent-strong); font-size: 0.75em; cursor: pointer; padding: 0 1px; }
.cm-line.cm-rm-footnote { font-size: 0.9em; color: var(--rm-text-muted); }
.cm-rm-footnote-label { color: var(--rm-accent-strong); }

.cm-rm-toc { display: block; padding: 8px 12px; border-left: 3px solid var(--rm-divider); cursor: pointer; }
.cm-rm-toc-item { display: block; color: var(--rm-accent-strong); line-height: 1.8; cursor: pointer; text-decoration: none; }
.cm-rm-toc-item:hover { text-decoration: underline; }

.cm-line.cm-rm-frontmatter { font-family: var(--rm-font-mono); font-size: 0.85em; color: var(--rm-text-muted); background: var(--rm-inline-code-bg); padding: 0 12px; }
.cm-line.cm-rm-frontmatter-begin { border-radius: 6px 6px 0 0; padding-top: 4px; }
.cm-line.cm-rm-frontmatter-end { border-radius: 0 0 6px 6px; padding-bottom: 4px; }

/* 浅色编辑排版与分享共用同一套 Prism token 颜色。 */
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) .token { text-shadow: none; background: none; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.comment,.prolog,.doctype,.cdata) { color: #94a3b8; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.punctuation,.operator) { color: #64748b; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.keyword,.atrule,.tag) { color: #7c3aed; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.string,.char,.attr-value,.builtin) { color: #059669; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.function,.class-name) { color: #2563eb; }
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.number,.boolean,.constant) { color: #d97706; }
.cm-line:is(.cm-rm-h1,.cm-rm-h2,.cm-rm-h3,.cm-rm-h4,.cm-rm-h5,.cm-rm-h6) { font-family: var(--rm-font-heading); font-weight: 600; }
.cm-line.cm-rm-h1 { font-size: 2.125em; line-height: 1.4; }
.cm-line.cm-rm-h2 { font-size: 1.5em; line-height: 1.5; }
.cm-editor .cm-content { padding-top: 36px; }
.cm-rm-code-lang { font-family: var(--rm-font-mono); }
.cm-line.cm-rm-code-begin::before { border-top: 1px solid var(--rm-divider); }
.cm-line.cm-rm-code-end::before { border-bottom: 1px solid var(--rm-divider); }
.cm-line.cm-rm-paragraph-end { padding-bottom: var(--rm-paragraph-spacing); }
@media (max-width: 767px) {
  :root:not([data-rm-color-mode="dark"]) { --rm-code-bg: #283044; --rm-code-text: #eef0ff; }
  :root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.keyword,.atrule,.tag) { color: #c4b5fd; }
  :root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.string,.char,.attr-value,.builtin) { color: #6ee7b7; }
  :root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.function,.class-name) { color: #93c5fd; }
  :root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.number,.boolean,.constant) { color: #fcd34d; }
  .cm-line.cm-rm-h1 { font-size: 1.75em; }
}