/* 基础层：非颜色设计变量(间距/圆角/字号) + reset + 全局排版 + 滚动条 */
:root {
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px;
  --r-sm: .125rem; --r: .25rem; --r-md: .375rem; --r-lg: .5rem; --r-xl: .75rem; --r-full: 9999px;

  --fs-h1: 32px; --fs-h2: 24px; --fs-body: 16px; --fs-sm: 14px; --fs-label: 12px;
  --sidebar-w: 256px; --topbar-h: 64px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-on-bg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  transition: background .25s var(--ease), color .25s var(--ease);
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* 工业风「signature line」：标题左侧 4px 主色竖条 */
.signature {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
}
.signature::before {
  content: ""; width: 4px; height: 1.1em; border-radius: var(--r-full);
  background: var(--c-primary-container);
}

/* 大写工业标签 */
.label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-on-surface-var);
}

/* 自定义滚动条 */
.scroll { scrollbar-width: thin; scrollbar-color: var(--c-outline-var) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--c-outline-var); border-radius: var(--r-full); }
.scroll::-webkit-scrollbar-track { background: transparent; }

[x-cloak] { display: none !important; }