/* ============================================================
   hud.tokens.css — 第一层原语 + 第二层派生 + 主题 + 环境 + 密度
   全站唯一的色值定义点。换主题只改这里。
   ============================================================ */

:root {
  /* ---------- 第一层：原语（唯一的字面色值处） ---------- */
  --hud-accent:      #3fd6c4;
  --hud-accent-deep: #1c5058;
  --hud-danger:      #ff6b6b;
  --hud-warn:        #e8a33d;
  --hud-ok:          #3bd8a0;

  --hud-bg-1: #06090e;
  --hud-bg-2: #0b1119;
  --hud-bg-3: #101823;
  --hud-bg-4: #16202d;

  --hud-ink-1: #e6eef7;
  --hud-ink-2: #8598ad;
  --hud-ink-3: #5b6b7f;
  --hud-ink-4: #3a4757;

  --hud-cut: 9px;

  /* ---------- 第二层：派生（不要手改） ---------- */
  --hud-a04: color-mix(in srgb, var(--hud-accent)  4%, transparent);
  --hud-a08: color-mix(in srgb, var(--hud-accent)  8%, transparent);
  --hud-a18: color-mix(in srgb, var(--hud-accent) 18%, transparent);
  --hud-a32: color-mix(in srgb, var(--hud-accent) 32%, transparent);
  --hud-a52: color-mix(in srgb, var(--hud-accent) 52%, transparent);
  --hud-a78: color-mix(in srgb, var(--hud-accent) 78%, transparent);

  --hud-line-1: rgba(255, 255, 255, .09);
  --hud-line-2: rgba(255, 255, 255, .05);
  --hud-line-a: var(--hud-a52);

  --hud-cut-sm:    calc(var(--hud-cut) - 3px);
  --hud-cut-btn:   calc(var(--hud-cut) - 1px);
  --hud-cut-btn-s: calc(var(--hud-cut) - 4px);

  /* ---------- 第三层：动效与排版令牌 ---------- */
  --hud-ease-out:  cubic-bezier(.22, .8, .28, 1);
  --hud-ease-in:   cubic-bezier(.4, 0, 1, 1);
  --hud-ease-io:   cubic-bezier(.4, 0, .2, 1);
  --hud-ease-back: cubic-bezier(.34, 1.4, .44, 1);

  --hud-dur-1: .15s;
  --hud-dur-2: .28s;
  --hud-dur-3: .48s;

  --hud-sans: "MiSans", "HarmonyOS Sans SC", "Noto Sans SC",
              "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --hud-mono: "等距更纱黑体 SC", "Sarasa Mono SC", "Maple Mono",
              ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --hud-fs-hero:  clamp(2.6rem, 4.4vw, 4rem);
  --hud-fs-kpi:   clamp(1.8rem, 2.6vw, 2.4rem);
  --hud-fs-h1:    1.5rem;
  --hud-fs-h2:    1.15rem;
  --hud-fs-body:  .92rem;
  --hud-fs-label: .74rem;
  --hud-fs-micro: .68rem;

  --hud-lh: 1.6;
  --hud-pad: 18px;
  --hud-gap: 24px;

  --c: var(--hud-cut);

  /* ---------- 第四层：发光与玻璃 ----------
     发光只用这四档，禁止在任何组件里手写 rgba 做 glow；
     text-shadow（文字不被裁切）与 box-shadow（元素不被 clip-path 裁切）都可直接用。 */
  --hud-glow-sm: 0 0 8px  var(--hud-a32);   /* 按钮 / 开关 hover */
  --hud-glow-md: 0 0 14px var(--hud-a32);   /* 面板标题文字 */
  --hud-glow-lg: 0 0 24px var(--hud-a52);   /* KPI 大数 */
  --hud-glow-xl: 0 0 40px var(--hud-a52);   /* splash 标识 */

  --hud-glass-blur: blur(4px);              /* 毛玻璃：仅小面积（topbar / modal header） */
}

/* ---------- 主题切换：只改主导色与暗档 ---------- */
[data-hud-accent="cyan"]  { --hud-accent: #3fd6c4; --hud-accent-deep: #1c5058; }
[data-hud-accent="blue"]  { --hud-accent: #00d4ff; --hud-accent-deep: #0d3f57; }
[data-hud-accent="green"] { --hud-accent: #5eb8ff; --hud-accent-deep: #16365c; }
[data-hud-accent="amber"] { --hud-accent: #ffb454; --hud-accent-deep: #5a3a12; }

/* 场景预设色板：军绿（军事仿真）/ 医疗蓝绿（医学仿真）/ 航空橙（航空航海仿真）
   换主色时底色色温必须一起换 —— 只改主色不改底会得到「冷底暖字」的发脏观感
   （见 references/theme-guide.md 第一节第 2 步后的说明）。
   语义色（danger/warn/ok）不随主题变，对三套底色 bg-1~bg-4 对比度均 ≥ 5.8:1。 */
[data-hud-accent="army"] {
  --hud-accent: #4ade80;  --hud-accent-deep: #1c4a2e;
  --hud-bg-1: #060a07;  --hud-bg-2: #0b120d;  --hud-bg-3: #111a13;  --hud-bg-4: #17241a;
  --hud-ink-1: #e8f5ea;  --hud-ink-2: #8fb39a;  --hud-ink-3: #5d7a68;  --hud-ink-4: #3b4c46;
}
[data-hud-accent="medic"] {
  --hud-accent: #22d3ee;  --hud-accent-deep: #0f4a54;
  --hud-bg-1: #050c0f;  --hud-bg-2: #0a1418;  --hud-bg-3: #0f1e24;  --hud-bg-4: #15272f;
  --hud-ink-1: #e4f5f8;  --hud-ink-2: #8fb2bb;  --hud-ink-3: #5d7d87;  --hud-ink-4: #3b4c52;
}
[data-hud-accent="aviation"] {
  --hud-accent: #f97316;  --hud-accent-deep: #5a2b08;
  --hud-bg-1: #0c0805;  --hud-bg-2: #140f09;  --hud-bg-3: #1c150c;  --hud-bg-4: #241b10;
  --hud-ink-1: #f7ede0;  --hud-ink-2: #b39a85;  --hud-ink-3: #7d6a59;  --hud-ink-4: #4c4034;
}

/* ---------- 环境开关：投影 vs 屏幕 ---------- */
[data-hud-env="projector"] {
  --hud-ink-2: color-mix(in srgb, var(--hud-ink-2) 100%, white 18%);
  --hud-ink-3: color-mix(in srgb, var(--hud-ink-3) 100%, white 14%);
  --hud-line-1: rgba(255, 255, 255, .14);
  --hud-line-2: rgba(255, 255, 255, .09);
}

/* ---------- 密度三档 ---------- */
[data-hud-density="loose"]  { --hud-lh: 1.75; --hud-pad: 22px; --hud-gap: 28px; }
[data-hud-density="normal"] { --hud-lh: 1.6;  --hud-pad: 18px; --hud-gap: 24px; }
[data-hud-density="tight"]  { --hud-lh: 1.45; --hud-pad: 14px; --hud-gap: 18px; }