/* ============================================================
   Custom Soul 云端 — 设计令牌
   全站唯一色彩 / 间距 / 圆角 / 字体来源，页面不写死色值
   ============================================================ */

:root {
  /* ---- 主色（violet，呼应「灵魂」主题） */
  --brand-50:  #f4f1ff;
  --brand-100: #e9e3ff;
  --brand-200: #d5caff;
  --brand-300: #b8a4ff;
  --brand-400: #9a7bff;
  --brand-500: #7c5cff;
  --brand-600: #6a45e8;
  --brand-700: #5734bd;
  --brand-800: #452a94;
  --brand-900: #33206e;

  /* ---- 中性色 */
  --ink-900: #16121f;
  --ink-800: #221c31;
  --ink-700: #322a45;
  --ink-600: #4a415f;
  --ink-500: #6b6280;
  --ink-400: #8f88a1;
  --ink-300: #b8b2c6;
  --ink-200: #dcd8e5;
  --ink-100: #eeeaf4;
  --ink-50:  #f8f6fc;
  --white:   #ffffff;

  /* ---- 语义色 */
  --ok-50:  #e8f8ef;
  --ok-500: #1a9c5b;
  --ok-700: #12653b;
  --warn-50:  #fff6e5;
  --warn-500: #c9820a;
  --warn-700: #8a5a06;
  --err-50:  #fdecec;
  --err-500: #d64545;
  --err-700: #9b2b2b;
  --info-50:  #e8f1fd;
  --info-500: #2f6fd0;
  --info-700: #1f4a8c;

  /* ---- 表面 */
  --bg-page:    #f6f4fb;
  --bg-surface: var(--white);
  --bg-subtle:  var(--ink-50);
  --bg-code:    #f3f1f8;
  --border:     var(--ink-200);
  --border-soft: var(--ink-100);

  /* ---- 文字 */
  --text:        var(--ink-900);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-400);
  --text-invert: var(--white);

  /* ---- 圆角 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- 阴影 */
  --sh-xs: 0 1px 2px rgba(22, 18, 31, .06);
  --sh-sm: 0 2px 6px rgba(22, 18, 31, .07);
  --sh-md: 0 6px 18px rgba(22, 18, 31, .09);
  --sh-lg: 0 16px 40px rgba(22, 18, 31, .12);

  /* ---- 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* ---- 布局 */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --header-h: 60px;
}

/* ---- 基础重置 */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }
img { max-width: 100%; display: block; }
code, pre { font-family: var(--font-mono); }

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

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}