/* Monochrome darkroom palette: depth and hierarchy come from luminance alone. */
:root {
  --color-black: #000000;
  --color-void: #050505;
  --color-panel: #0d0d0d;
  --color-surface: #171717;
  --color-raised: #222222;
  --color-line: #333333;
  --color-line-strong: #4a4a4a;
  --color-dim: #898989;
  --color-muted: #a5a5a5;
  --color-text-soft: #cacaca;
  --color-text: #ededed;
  --color-white: #ffffff;
  --color-accent: #f5f5f5;
  --color-accent-soft: #d9d9d9;
  --color-success: #bfbfbf;
  --color-info: #adadad;
  --color-warning: #d0d0d0;
  --color-live: #f8f8f8;
  --color-danger: #e3e3e3;
  /* Reserved for dense telemetry only: sober, fixed and color-blind-conscious. */
  --color-chart-red: #d65f5f;
  --color-chart-amber: #d99a48;
  --color-chart-green: #62a875;
  --color-chart-cyan: #56a6ad;
  --color-chart-blue: #648bc4;
  --color-chart-violet: #9574b8;
  --color-transparent: transparent;
}

/* Avatars vary only by grayscale tone; no hidden hue leaks into the UI. */
.avatar {
  --color-avatar-border: color-mix(in srgb, var(--color-white) calc(var(--avatar-tone, 9%) + 10%), var(--color-transparent));
  --color-avatar-text: var(--color-text-soft);
  --color-avatar-fill: color-mix(in srgb, var(--color-white) var(--avatar-tone, 9%), var(--color-panel));
}