/* ==========================================================================
   XFM Theme · base.css
   重置 / 排版基础 / 滚动条 / 代码高亮配色
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.xfm-no-scroll {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(var(--xfm-primary-rgb), 0.07), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(120, 88, 220, 0.06), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
  overflow-wrap: break-word;
}

html[data-scheme="dark"] body {
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(var(--xfm-primary-rgb), 0.13), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(120, 88, 220, 0.10), transparent 58%);
}

body.xfm-lock {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--c-text);
}

h1 { font-size: 1.95em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.08em; }
h5 { font-size: 1em; }
h6 { font-size: 0.94em; color: var(--c-text-soft); }

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--xfm-primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: color-mix(in srgb, var(--xfm-primary) 78%, #000);
}

html[data-scheme="dark"] a:hover {
  color: color-mix(in srgb, var(--xfm-primary) 78%, #fff);
}

img,
svg,
video,
iframe {
  max-width: 100%;
  vertical-align: middle;
}

img {
  height: auto;
  border-style: none;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

hr {
  height: 1px;
  margin: 2.2em 0;
  border: 0;
  background: var(--c-border);
}

blockquote {
  margin: 0;
}

mark {
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background: var(--c-primary-bg);
  color: inherit;
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  color: var(--c-text-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

::selection {
  background: rgba(var(--xfm-primary-rgb), 0.22);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   焦点可见性
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--xfm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   滚动条
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-faint);
  background-clip: padding-box;
}

/* --------------------------------------------------------------------------
   图标
   -------------------------------------------------------------------------- */
.xfm-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
}

.xfm-sprite symbol path[fill="none"],
.xfm-sprite symbol circle[fill="none"] {
  fill: none;
}

.spin {
  animation: xfm-spin 0.9s linear infinite;
}

@keyframes xfm-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   辅助类
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* 入场动画 */
html:not(.no-animation) body:not(.no-animation) .animate-in {
  animation: xfm-fade-up var(--t-slow) var(--ease-out) both;
}

body.no-animation .animate-in,
body.no-animation * {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

@keyframes xfm-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   代码高亮配色（同时作用于文章代码块与其它 pre）
   ========================================================================== */
.highlight,
pre,
code {
  font-family: var(--font-mono);
}

.highlight {
  --code-bg: #f8f9fc;
  --code-fg: #2d3342;
  --code-comment: #8b93a1;
  --code-keyword: #a626a4;
  --code-string: #2f9e57;
  --code-number: #b7791f;
  --code-func: #2a6ee0;
  --code-type: #0e8a8a;
  --code-attr: #c1621f;
  --code-meta: #7b8698;
  --code-add: #1a7f37;
  --code-del: #c0392b;
}

html[data-scheme="dark"] .highlight {
  --code-bg: #12161e;
  --code-fg: #d5dae4;
  --code-comment: #6b7684;
  --code-keyword: #d68fff;
  --code-string: #7ee08a;
  --code-number: #f0c26b;
  --code-func: #74aaff;
  --code-type: #56d4c4;
  --code-attr: #ffab70;
  --code-meta: #8791a1;
  --code-add: #6ee07a;
  --code-del: #ff8f87;
}

.highlight .comment,
.highlight .quote {
  color: var(--code-comment);
  font-style: italic;
}

.highlight .keyword,
.highlight .selector-tag,
.highlight .literal,
.highlight .section,
.highlight .name,
.highlight .doctag,
.highlight .strong {
  color: var(--code-keyword);
}

.highlight .string,
.highlight .regexp,
.highlight .link,
.highlight .subst,
.highlight .template-tag,
.highlight .addition {
  color: var(--code-string);
}

.highlight .number,
.highlight .symbol,
.highlight .bullet,
.highlight .meta {
  color: var(--code-number);
}

.highlight .title,
.highlight .title.function_,
.highlight .function .title,
.highlight .attr,
.highlight .attribute,
.highlight .variable,
.highlight .params,
.highlight .built_in,
.highlight .builtin-name {
  color: var(--code-func);
}

.highlight .type,
.highlight .class .title,
.highlight .typename {
  color: var(--code-type);
}

.highlight .selector-id,
.highlight .selector-class,
.highlight .property,
.highlight .tag {
  color: var(--code-attr);
}

.highlight .deletion {
  color: var(--code-del);
}

.highlight .emphasis { font-style: italic; }
.highlight .strong { font-weight: 700; }

/* KaTeX 溢出保护 */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}