/* ============================================================
   Keyarium 设计令牌
   ------------------------------------------------------------
   配色取自游戏实际美术资源，非凭空配色：
     #fff8ee  游戏内主面板底色（奶油纸白）
     #ad907d  游戏内标题栏（暖灰棕）
     #b08060  游戏内强调色，占饱和像素 30%
     #906030 / #784818  蚁巢贴图主色
     #a8a878  金蚁（最稀有变异）
     #307800  Steam 商店头图品牌绿
   ============================================================ */

:root {
  /* ── 底层 ── */
  --paper: #fff8ee;          /* 主底：游戏内面板色 */
  --paper-2: #f7eee1;        /* 次级面（卡片、条目） */
  --paper-3: #efe3d3;        /* 三级面（表头、hover） */
  --chrome: #ad907d;         /* 暖灰棕，游戏内标题栏 */

  /* ── 文字 ──
     中性色带暖色偏移（棕相），不用纯灰，才和奶油底同族。 */
  --ink: #2a1f16;
  --ink-2: #5d4b3b;
  --ink-3: #8a7563;
  --rule: #e2d3c0;           /* 装饰性分隔线，不承担对比度要求 */
  --rule-2: #d0bca4;         /* 强分隔线（装饰） */
  /* 交互组件的边界（按钮、输入框）必须 >=3:1，与装饰线分开。
     取值以最暗的承载面 --paper-2 为准（对 --paper 自然更高）。 */
  --edge: #9c8369;

  /* ── 强调 ── */
  --brand: #307800;          /* Steam 品牌绿，主 CTA */
  --brand-ink: #ffffff;
  --brand-bg: #24590a;       /* 浅色主题按钮底：比 brand 深，保证白字对比度 */
  --brand-soft: #e8f0dd;     /* 绿的浅色承载面 */
  --brand-deep: #24590a;     /* hover / 深绿文字 */
  --accent: #b08060;         /* 游戏内暖棕，次要强调 */
  --gold: #9a8a4a;           /* 金蚁色，用于稀有/成就 */

  /* ── 语义 ──（与品牌绿分离，避免混淆） */
  --passive: #7d8b5a;        /* 被动昆虫 */
  --combat: #a8503a;         /* 战斗昆虫 */

  /* ── 字体 ── */
  --display: "Fraunces", Georgia, "Songti SC", serif;
  --body: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ── 尺度 ── */
  --step--1: 13px;
  --step-0: 16px;
  --step-1: 19px;
  --step-2: 24px;
  --step-3: 31px;
  --step-4: clamp(34px, 4.4vw, 44px);
  --step-5: clamp(42px, 7vw, 68px);

  /* ── 间距与容器 ── */
  --gap: 20px;
  --pad: clamp(20px, 4vw, 40px);
  --measure: 66ch;
  --wide: 1180px;
  --radius: 3px;             /* 克制的圆角，纸感而非卡片感 */
  --shadow: 0 1px 2px rgba(42, 31, 22, .06), 0 8px 24px rgba(42, 31, 22, .05);
}

/* 深色主题：游戏内 UI 是浅色的，所以深色是「夜间阅读」变体，
   不是另一套品牌。保持暖棕相，只降明度。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191410;
    --paper-2: #221b15;
    --paper-3: #2c231b;
    --chrome: #6b574a;
    --ink: #f2eae0;
    --ink-2: #bcab99;
    --ink-3: #8d7c6b;
    --rule: #33291f;
    --rule-2: #453728;
    --edge: #7d6851;     /* 3.46:1 对 #191410 */
    --brand: #7fb556;
    --brand-ink: #14200c;
    --brand-bg: #7fb556;
    --brand-soft: #22301a;
    --brand-deep: #a2ce7f;
    --accent: #c99a76;
    --gold: #c4b072;
    --passive: #9aa877;
    --combat: #d4795f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .26);
  }
}

:root[data-theme="dark"] {
  --paper: #191410;
  --paper-2: #221b15;
  --paper-3: #2c231b;
  --chrome: #6b574a;
  --ink: #f2eae0;
  --ink-2: #bcab99;
  --ink-3: #8d7c6b;
  --rule: #33291f;
  --rule-2: #453728;
  --edge: #7d6851;     /* 3.46:1 对 #191410 */
  --brand: #7fb556;
  --brand-ink: #14200c;
  --brand-bg: #7fb556;
  --brand-soft: #22301a;
  --brand-deep: #a2ce7f;
  --accent: #c99a76;
  --gold: #c4b072;
  --passive: #9aa877;
  --combat: #d4795f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .26);
}