/* 全项目唯一的取值来源：颜色、间距、圆角、字号、动效。
   组件里不允许再出现硬编码的色值与像素值。
   地狱版通过 html[data-hell] 整体换一套颜色，布局不变。 */

:root {
  color-scheme: light;

  /* 页面底、中央面板、画板三层，由深到浅拉开 */
  --color-bg: #e4e4e4;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f1f1;
  --color-surface-sunken: #e9e9e9;

  /* 描边 */
  --color-line: #d2d2d2;
  --color-line-strong: #111111;
  --border-width: 1.5px;
  --border-width-strong: 2px;

  /* 文字 */
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #9a9a9a;

  /* 强调与状态 */
  --color-accent: #111111;
  --color-accent-hover: #000000;
  --color-accent-ink: #ffffff;
  --color-success: #1f8a4c;
  --color-danger: #c4443e;
  --color-tier-hard: #b4650f;

  /* 画板：原图与玩家笔迹同色，结算靠粗细与透明度区分 */
  --color-board: #ffffff;
  --color-ink: #111111;
  --alpha-ghost: 0.16;

  /* 绘制用色。只有地狱版会展示调色板，所以第六色取白——在黑底上和其余五色拉得最开 */
  --color-draw-rose: #d4453f;
  --color-draw-amber: #c07d10;
  --color-draw-mint: #17916d;
  --color-draw-sky: #2a63c4;
  --color-draw-violet: #7040c4;
  --color-draw-chalk: #ffffff;

  /* 色块边缘：白色一类的浅色块在浅底托盘上要有一圈细边才看得出轮廓 */
  --color-swatch-edge: rgb(17 17 17 / 18%);

  /* 骰子 */
  --color-dice: #ffffff;
  --color-dice-pip: #111111;
  --dice-size: 56px;

  /* 遮罩 */
  --color-backdrop: rgb(17 17 17 / 40%);
  --shadow-panel: 0 12px 40px rgb(0 0 0 / 8%);
  --shadow-modal: 0 24px 60px rgb(0 0 0 / 24%);

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 圆角：整体偏小偏紧，卡片与按钮不用大软圆角、不用胶囊形状（与色鬼的风格区分开）；
     --radius-pill 只留给焦点环和滚动条这类天然该是全圆的小部件 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* 字号 */
  --font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: clamp(26px, 7vw, 32px);

  --line-height-body: 1.6;
  --line-height-title: 1.25;
  --letter-spacing-wide: 0.06em;

  /* 尺寸 */
  --control-size: 44px;

  /* 工具区与结算时那一条副按钮共用的行高。两者互换时高度必须一致，
     否则画板会跟着变高、底下的按钮会跳一下 */
  --action-row-height: 72px;
  --stage-max: 500px;
  --stage-tall: 880px;   /* 面板最高长到这里，再高的屏幕就上下留白 */
  --board-width: 320px;  /* 由脚本按剩余空间实时写入 */
  --board-height: 320px;

  /* 安全区 */
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));

  /* 动效 */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-theme: 600ms ease;
}

/* 地狱版：黑底、红色强调，画板反色，绘制用色调亮以便在黑底上看清 */
html[data-hell] {
  color-scheme: dark;

  --color-bg: #0b0b0b;
  --color-surface: #161616;
  --color-surface-soft: #222222;
  --color-surface-sunken: #1c1c1c;

  --color-line: #333333;
  --color-line-strong: #f2f2f2;

  --color-text: #f2f2f2;
  --color-text-muted: #a4a4a4;
  --color-text-faint: #6c6c6c;

  --color-accent: #d3302a;
  --color-accent-hover: #b8231e;
  --color-accent-ink: #ffffff;
  --color-success: #e0554f;
  --color-danger: #e0554f;
  --color-tier-hard: #f2b234;

  --color-board: #111111;
  --color-ink: #f2f2f2;
  --alpha-ghost: 0.22;

  --color-draw-rose: #ff6b63;
  --color-draw-amber: #f2b234;
  --color-draw-mint: #3fd39e;
  --color-draw-sky: #5f9bff;
  --color-draw-violet: #b085ff;
  --color-draw-chalk: #ffffff;

  --color-swatch-edge: rgb(0 0 0 / 40%);

  --color-dice: #f2f2f2;
  --color-dice-pip: #d3302a;

  --color-backdrop: rgb(0 0 0 / 64%);
  --shadow-panel: 0 12px 40px rgb(0 0 0 / 60%);
  --shadow-modal: 0 24px 60px rgb(0 0 0 / 70%);
}