/**
 * 橡果 acorn — 统一设计 Token
 * 颜色 · 圆角 · 间距 · 阴影 · 布局
 */

:root {
  /* —— 间距（4px 基准） —— */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.5rem;    /* 40px */
  --space-10: 3rem;     /* 48px */

  /* —— 圆角 —— */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 22px;
  --radius-full: 999px;
  --radius-panel: var(--radius-md);
  --radius: var(--radius-xl); /* 兼容旧变量 */

  /* —— 布局 —— */
  --max: 1080px;
  --content-pad: var(--space-5);
  --app-pad-x: var(--space-5);
  --app-pad-y: var(--space-3);
  --panel-pad: var(--space-5);
  --section-gap: var(--space-4);
  --stack-gap: var(--space-4);

  /* —— 颜色：品牌（DeepSeek 蓝） —— */
  --brand: #4d6efe;
  --brand-deep: #3558ea;
  --brand-ink: #2f3fd4;
  --brand-soft: rgba(77, 110, 254, 0.12);
  --brand-muted: #8b919a;
  --brand-field-line: #e4e7ed;
  --brand-field-line-hover: #d4d9e3;
  --brand-field-focus: #9eb0ff;

  /* —— 颜色：语义（日间） —— */
  --ink: #1c2430;
  --ink-soft: #5c6775;
  --mist: #eef1f5;
  --paper: #f7f8fa;
  --line: rgba(28, 36, 48, 0.11);
  --accent: #4d6efe;
  --accent-deep: #3558ea;
  --accent-soft: rgba(77, 110, 254, 0.13);
  --warn: #a85a12;
  --danger: #b42318;
  --ok: #1a7a45;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-hover: #fafbfc;
  --nav-hover: rgba(77, 110, 254, 0.1);
  --gate-bg: #f5f6f8;
  --comic-tint: rgba(244, 245, 247, 0.82);
  --code-bg: #161c24;
  --code-fg: #e4eef0;
  --wash-a: rgba(77, 110, 254, 0.1);
  --wash-b: rgba(140, 118, 82, 0.08);
  --wash-c: rgba(28, 36, 48, 0.05);
  --on-accent: #ffffff;
  --on-brand: #ffffff;

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 3px rgba(28, 36, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 36, 48, 0.07);
  --shadow: 0 6px 18px rgba(28, 36, 48, 0.08);
  --shadow-lg: 0 10px 24px rgba(28, 36, 48, 0.1);
  --shadow-brand: 0 6px 20px rgba(77, 110, 254, 0.28);
  --focus-ring: 0 0 0 3px var(--accent-soft);
  --focus-ring-brand: 0 0 0 4px var(--brand-soft);

  /* —— 字体 —— */
  --font-display: Georgia, "Songti SC", "Noto Serif SC", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", sans-serif;

  /* —— 排版（阅读） —— */
  --prose-size: 1.05rem;
  --prose-leading: 1.72;

  /* —— 氛围层 —— */
  --stage-opacity: 0;
  --stage-blur: 0px;
  --halftone-opacity: 0;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4e7ec;
  --ink-soft: #9aa3af;
  --mist: #1c2129;
  --paper: #161b24;
  --line: rgba(228, 231, 236, 0.11);
  --accent: #6b8cff;
  --accent-deep: #9bb0ff;
  --accent-soft: rgba(107, 140, 255, 0.16);
  --warn: #e8c06a;
  --danger: #f09088;
  --ok: #6dd99a;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.38);
  --comic-tint: rgba(18, 20, 26, 0.92);
  --bg: #12141a;
  --surface: rgba(22, 27, 36, 0.94);
  --surface-solid: #1a2029;
  --surface-hover: rgba(36, 42, 52, 0.98);
  --nav-hover: rgba(107, 140, 255, 0.12);
  --gate-bg: var(--paper);
  --code-bg: #0c1018;
  --code-fg: #d8e4ea;
  --wash-a: rgba(77, 110, 254, 0.12);
  --wash-b: rgba(160, 130, 90, 0.06);
  --wash-c: rgba(0, 0, 0, 0.28);
  --brand-soft: rgba(77, 110, 254, 0.16);
  --brand-ink: #a8b8ff;
  --brand-muted: #7a8494;
  --brand-field-line: rgba(228, 231, 236, 0.14);
  --brand-field-line-hover: rgba(228, 231, 236, 0.22);
  --brand-field-focus: rgba(107, 140, 255, 0.42);
  --highlight: rgba(240, 180, 41, 0.32);
  --prose-leading: 1.78;
  --image-dim: 0.92;
}