/* ==========================================================================
   RESIDENT EVIL: OUTBREAK PROTOCOL — Design Tokens v1.0
   设计师：颜好看 | 架构：四层 Token（A1 identity → A2 semantic → B slot → C extension）
   纪律：本文件是全项目唯一直色值来源（UI 层）。Canvas 层镜像见 brief §6。
   禁止：紫→粉渐变 / emoji 图标 / token 之外的硬编码色值 / 弹性缓动
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     A1 — IDENTITY（品牌 DNA：背景层、表面层、文本层、主色）
     ------------------------------------------------------------------ */

  /* 背景三级（近黑绿 — 浣熊市警局夜巡基调） */
  --bg-0: #0a0d0a;            /* 页面底色 / 全屏遮罩基底 */
  --bg-1: #0f130e;            /* Canvas 地面基色 */
  --bg-2: #141a12;            /* HUD 底衬 / 更高一级抬升 */

  /* 表面两级 */
  --surface-0: #1a2116;       /* 面板 / Pause 底 */
  --surface-1: #232c1d;       /* 面板 hover / 高一级表面 */

  /* 文本三级（含禁用）— 基于 --bg-0 对比度：15.1:1 / 6.2:1 / 3.2:1(仅禁用态) */
  --text-primary: #d8ded0;    /* 主文本 / 标题 / HUD 数值 */
  --text-secondary: #8f9a85;  /* 次级文本 / 标签 / 说明 */
  --text-disabled: #4c5546;   /* 禁用态文本 — 禁止用于可读内容 */

  /* 主色 — RE 深绿（交互主体色，非紫非粉） */
  --color-primary: #4a6741;        /* 主按钮 / 玩家本体 */
  --color-primary-hover: #597a4e;  /* 悬停提亮 */
  --color-primary-active: #3a5233; /* 按下压暗 */
  --color-primary-dim: #26301f;    /* 血条轨道 / 低饱和衬底 */

  /* ------------------------------------------------------------------
     A2 — SEMANTIC（语义色：血 / 琥珀 / 成功）
     ------------------------------------------------------------------ */

  /* 血红 — 只属于伤害与死亡。深色是渍，亮色才可作文本。 */
  --color-blood: #6e0d0d;              /* 陈旧血渍 / 血红深填充 */
  --color-danger: #b71c1c;             /* 危险填充 / 死亡按钮 / 血红分隔线 */
  --color-danger-bright: #ef5350;      /* 深底上的红文本 / 低血条 — 6.0:1 */

  /* 警示琥珀 — 只属于警告与奖励 */
  --color-warn: #b98a2f;               /* 弹药警告填充 / 丧尸瞳孔 */
  --color-warn-bright: #e0b34e;        /* 奖励文本 / 深底琥珀 — 9.8:1 */

  /* 成功绿 */
  --color-success: #5fae57;            /* 满血条 / WAVE CLEARED — 7.4:1 */

  /* 边框两级 */
  --border: #2c3526;          /* 面板描边 / 主网格 */
  --border-soft: #1e2618;     /* 内部分隔 / 次网格 */

  /* ------------------------------------------------------------------
     A1-STRUCTURE — 字体（系统栈，零依赖，离线可用）
     ------------------------------------------------------------------ */

  /* 标题 — 碑文衬线（RE logo 气质） */
  --font-display: Georgia, 'Times New Roman', 'Liberation Serif', serif;

  /* 正文/HUD/数据 — 安布雷拉终端等宽 */
  --font-mono: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* 字号阶梯 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 64px;

  /* 字重 */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 行高与字距 */
  --leading-tight: 1.1;       /* 标题 */
  --leading-body: 1.5;        /* 正文 / HUD */
  --tracking-caps: 0.08em;    /* ALL CAPS（mono 标签/HUD） */
  --tracking-display: 0.18em; /* 大标题（RESIDENT EVIL 式拉开） */

  /* ------------------------------------------------------------------
     A2-STRUCTURE — 间距（4px 网格）
     ------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 圆角 — 恐怖主题：硬朗直角，禁大圆角 */
  --radius-none: 0;
  --radius-sm: 2px;           /* 血条 / 细小元素 */
  --radius-md: 4px;           /* 面板 / 按钮 */

  /* ------------------------------------------------------------------
     A2 — 阴影（克制：血光 glow 全流程最多 1-2 处）
     ------------------------------------------------------------------ */
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.6);          /* Pause/Modal 深投影 */
  --shadow-glow-danger: 0 0 24px rgba(183, 28, 28, 0.45); /* YOU DIED 标题专用 */
  --shadow-glow-warn: 0 0 12px rgba(224, 179, 78, 0.30);  /* 枪口闪光 / 奖励微光 */

  /* ------------------------------------------------------------------
     A2 — 动效（时长 × 缓动收敛）
     ------------------------------------------------------------------ */
  --motion-instant: 80ms;     /* 按钮按下 */
  --motion-fast: 150ms;       /* hover / 受击脉冲 */
  --motion-base: 300ms;       /* 面板淡入淡出 */
  --motion-slow: 400ms;       /* banner 滑入 / 跨屏过渡 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* 唯一标准缓动 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);       /* 进场 */

  /* 禁用（弹性/回弹缓动 — 恐怖基调禁止俏皮动效，仅存档备查）：
     --ease-banned-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); */

  /* 焦点环 — 琥珀（血红只留给危险语义，避免混淆） */
  --focus-ring: 0 0 0 3px rgba(224, 179, 78, 0.45);

  /* ------------------------------------------------------------------
     A2 — z-index 层级表
     ------------------------------------------------------------------ */
  --z-canvas: 0;      /* 游戏画布 */
  --z-fx: 5;          /* 屏幕特效（暗角/受击闪光，pointer-events:none） */
  --z-hud: 10;        /* HUD 四角元素 */
  --z-banner: 20;     /* Wave 通知条 */
  --z-overlay: 30;    /* Pause 遮罩 */
  --z-modal: 40;      /* Start Screen / YOU DIED */
  --z-toast: 50;      /* 全局提示（保留） */

  /* ------------------------------------------------------------------
     B — SLOT（组件级别名）
     ------------------------------------------------------------------ */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-bg-active: var(--color-primary-active);
  --btn-primary-text: #f2f5ec;
  --btn-ghost-border: var(--border);
  --btn-ghost-text: var(--text-primary);
  --btn-ghost-bg-hover: var(--surface-1);
  --btn-danger-bg: var(--color-danger);
  --btn-danger-text: #f2f5ec;

  --scrim: rgba(10, 13, 10, 0.86);          /* 全屏遮罩 */
  --scrim-heavy: rgba(10, 13, 10, 0.94);    /* YOU DIED 遮罩 */
  --overlay-vignette: rgba(0, 0, 0, 0.5);   /* Canvas 边缘暗角 */
  --overlay-hit: rgba(183, 28, 28, 0.12);   /* 受击红角脉冲上限 */

  --hud-track: var(--color-primary-dim);    /* 血条/进度轨道 */

  /* ------------------------------------------------------------------
     C — EXTENSION（Canvas 专用 — JS 侧须在 palette.js 建立 1:1 镜像，
     Canvas 2D 读取不到 CSS 变量；两侧同步修改，色值不可偏离）
     ------------------------------------------------------------------ */
  --cv-player-body: #4a6741;      /* = --color-primary */
  --cv-player-outline: #597a4e;   /* = --color-primary-hover */

  --cv-zombie-a: #5b6b52;         /* 丧尸变体 A 本体 */
  --cv-zombie-b: #49563f;         /* 丧尸变体 B 本体 */
  --cv-zombie-eye: #e0b34e;       /* = --color-warn-bright（琥珀瞳孔） */

  --cv-boss-body: #37452f;        /* Boss 暗体 */
  --cv-boss-outline: #b71c1c;     /* = --color-danger（血红描边） */
  --cv-boss-eye: #ef5350;         /* = --color-danger-bright */

  --cv-blood-fresh: #b71c1c;      /* 新鲜血渍（生成 alpha 0.5） */
  --cv-blood-deep: #6e0d0d;       /* 陈旧血渍（常态 alpha 0.35） */

  --cv-grid-line: #1e2618;        /* = --border-soft（次网格 40px） */
  --cv-grid-major: #2c3526;       /* = --border（主网格 每 4 格） */
  --cv-muzzle: #e0b34e;           /* = --color-warn-bright（枪口闪光） */
}

/* ----------------------------------------------------------------------
   全局基础（可选引入 — 静态站零依赖，直接可用）
   ---------------------------------------------------------------------- */
html {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* 键盘焦点可见性（无障碍强制） */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}