body {
  margin: 0;
  line-height: normal;
  height: 100vh;
  overflow: hidden;
}

:root {
  /* Color */
  --color-blueviolet: #9747ff;
  --color-gray: rgba(23, 23, 23, 0.8);
  --color-darkslategray: #333;

  /* Gap */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;

  /* Padding */
  --padding-1: 1px;
  --padding-2: 2px;
  --padding-4: 4px;
  --padding-8: 8px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-48: 48px;

  /* BorderRadius */
  --br-2: 2px;
  --br-4: 4px;
  --br-5: 5px;

  /* Font */
  --font-ibm-plex-sans: IBM Plex Sans;
  --font-ibm-plex-mono: IBM Plex Mono;

  /* FontSize */
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-18: 18px;

  /* Figma Variables */

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;

  /* Color */
  --neutral-500: #898989;
  --neutral-700-alpha-80: rgba(24, 24, 24, 0.8);
  --primary-500-alpha-90: rgba(117, 251, 76, 0.9);
  --primary-600: #44a828;
  --neutral-300: #b0b0b0;
  --primary-500-alpha-70: rgba(117, 251, 76, 0.7);
  --primary-500: #75fb4c;
  --neutral-800-alpha-80: rgba(34, 34, 34, 0.8);
  --neutral-900: #000;


  --radar-green: #44a828;
  --radar-white: #FFFFFF;
  --radar-faint-green: rgba(117, 251, 76, 0.5);
  --radar-faint-white: rgba(255, 255, 255, 0.5);
  --radar-dark-orange: #FF8C00;
  --radar-faint-orange: rgba(255, 140, 0, 0.5);
  /* fallback for dynamic 100vh calculation */
  --vh: 1vh;
  /* global UI scale set by JavaScript */
  --ui-scale: 1;
  --base: calc(1 * var(--ui-scale));
}