:root {
  --HALO_CERAMIC: #f6f7f8;
  --HALO_PAPER: #ffffff;
  --HALO_INK: #07111c;
  --HALO_CONTROL_NAVY: #0a2238;
  --HALO_CONTROL_NAVY_SECONDARY: #103652;
  --HALO_STEEL: #566575;
  --HALO_STEEL_MID: #8996a3;
  --HALO_SILVER: #c8d0d8;
  --HALO_MIST: #e9edf1;
  --HALO_SIGNAL_RED: #d9273f;
  --HALO_ELECTRIC_COBALT: #164bff;
  --HALO_REFRACTION_CYAN: #4fd1ff;
  --HALO_REFRACTION_VIOLET: #6d4bff;
  --HALO_SUCCESS: #1e7a59;
  --halo-bg-primary: var(--HALO_CERAMIC);
  --halo-bg-secondary: var(--HALO_MIST);
  --halo-surface-dark: var(--HALO_CONTROL_NAVY);
  --halo-surface-light: var(--HALO_PAPER);
  --halo-text-primary: var(--HALO_INK);
  --halo-text-secondary: var(--HALO_STEEL);
  --halo-accent-blue: var(--HALO_ELECTRIC_COBALT);
  --halo-accent-blue-soft: color-mix(in srgb, var(--HALO_ELECTRIC_COBALT) 16%, transparent);
  --halo-steel: var(--HALO_STEEL_MID);
  --halo-border: var(--HALO_SILVER);
  --halo-warning: var(--HALO_SIGNAL_RED);
  --halo-success: var(--HALO_SUCCESS);
  --halo-radius: 10px;
  --halo-shadow: 0 12px 32px rgba(7, 17, 28, 0.12);
  --halo-grid-line: rgba(86, 101, 117, 0.18);
  --halo-boundary-line: var(--HALO_SIGNAL_RED);
  --halo-boundary-intelligence: var(--HALO_ELECTRIC_COBALT);
  --halo-boundary-refraction: var(--HALO_REFRACTION_CYAN);
  --HALO_FONT_DISPLAY: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --HALO_FONT_BODY: "Inter", ui-sans-serif, system-ui, sans-serif;
  --HALO_FONT_TECHNICAL: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.halo-boundary-cut {
  border-inline-start: 2px solid var(--HALO_SIGNAL_RED);
  box-shadow: -1px 0 0 var(--HALO_REFRACTION_CYAN);
}

.halo-unknown { color: var(--HALO_STEEL); }

.halo-field-grid {
  background-image: linear-gradient(rgba(86, 101, 117, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(86, 101, 117, .08) 1px, transparent 1px);
  background-size: 28px 28px;
}