/* 设计令牌 —— 与 Claude Design 原型逐值对齐 */
:root {
  color-scheme: dark;

  --page:        #070c10;
  --bg:          #0e141a;
  --surface:     #161e26;
  --surface-2:   #1b252f;
  --line:        #293541;
  --line-2:      #202a34;

  --ink:         #eaf0f5;
  --ink-2:       #b2bec9;
  --muted:       #7b8996;

  --accent:      #2f8fb8;
  --accent-ink:  #7cc3e2;
  --accent-soft: #132a38;
  --s2:          #c9652a;
  --s2-ink:      #f7b98a;
  /* 空心星：是量表不是装饰，两个主题下都要看得出「还差几颗」 */
  --star-off:    #5b6b78;
  /* 日历格子的文字压在热力色上，不能用普通正文色 */
  --cal-ink:     #eaf0f5;
  --s3:          #8474d0;
  --de:          #3a4753;

  --green:       #4cbf7a;  --green-soft:  #12301f;  --green-ink:  #8fdcae;
  --yellow:      #e0b43a;  --yellow-soft: #332a10;  --yellow-ink: #f0d283;
  --orange:      #ee8e45;  --orange-soft: #38220f;  --orange-ink: #f7b98a;
  --red:         #e2574f;  --red-soft:    #3a1816;  --red-ink:    #f4a19b;

  /* 日历热力色阶：单色相顺序色阶，低值贴近表面色 */
  --seq-0: #1b252f;
  --seq-1: #16394b;
  --seq-2: #1b566f;
  --seq-3: #2478a0;
  --seq-4: #3fa3cd;

  --sans: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  /* 设计稿画布。JS 按「信息密度」设置覆盖，画布越宽字在屏上越小、装得越多 */
  --stage-w: 2176px;
  --stage-h: 1224px;
}

/* 告警等级 → 颜色，供 JS 直接取用 */
.lv-red    { --lv: var(--red);    --lv-soft: var(--red-soft);    --lv-ink: var(--red-ink); }
.lv-orange { --lv: var(--orange); --lv-soft: var(--orange-soft); --lv-ink: var(--orange-ink); }
.lv-yellow { --lv: var(--yellow); --lv-soft: var(--yellow-soft); --lv-ink: var(--yellow-ink); }
.lv-green  { --lv: var(--green);  --lv-soft: var(--green-soft);  --lv-ink: var(--green-ink); }
.lv-info   { --lv: var(--accent); --lv-soft: var(--accent-soft); --lv-ink: var(--accent-ink); }

/* ── 浅色模式 ────────────────────────────────────────────────
   不是把深色反过来就完事：白底上饱和色会发飘，所以
   实心色（柱、线、圆点）统一压暗一档保证对比度，
   soft 底色换成很浅的同色相，ink 用于文字的那档压到能在白底上读。 */
:root[data-theme="light"] {
  color-scheme: light;

  --page:        #dfe6ec;
  --bg:          #f4f7fa;
  --surface:     #ffffff;
  --surface-2:   #eef3f7;
  --line:        #cfdae4;
  --line-2:      #e3eaf1;

  --ink:         #14202b;
  --ink-2:       #445666;
  --muted:       #6d7f8e;

  --accent:      #1c7ba4;
  --accent-ink:  #14607f;
  --accent-soft: #dff0f8;
  --s2:          #b8561f;
  --s2-ink:      #8f3f12;
  --s3:          #6a57c4;
  --de:          #aebcc8;
  --star-off:    #9aa9b6;
  --cal-ink:     #22303d;

  --green:       #2f9d5c;  --green-soft:  #dcf3e6;  --green-ink:  #1d7443;
  --yellow:      #c49312;  --yellow-soft: #fbf0d2;  --yellow-ink: #8a6706;
  --orange:      #d9701f;  --orange-soft: #fbe6d5;  --orange-ink: #9c4c0c;
  --red:         #d13b32;  --red-soft:    #fadddb;  --red-ink:    #9e2620;

  /* 日历热力。浅色模式下格子里的日期和数值是深色文字，所以整条色阶
     不能压太暗，否则高热格子上的字读不出来——宁可牺牲一点区分度。 */
  --seq-0: #eef3f7;
  --seq-1: #dcecf5;
  --seq-2: #bcdcec;
  --seq-3: #95c7df;
  --seq-4: #6aaecd;
}