:root {
  --grayscale-color-white: #ffffff;
  --grayscale-color-200: #f5f5f5;
  --grayscale-color-300: #e5e8ea;
  --grayscale-color-400: #cbd1d5;
  --grayscale-color-500: #6e707c;
  --grayscale-color-700: #414354;
  --grayscale-color-900: #231e33;
  --grayscale-color-black: #000000;

  --grayscale-color-opacity-96: rgba(255, 255, 255, 0.96);
  --grayscale-color-opacity-88: rgba(255, 255, 255, 0.88);
  --grayscale-color-opacity-72: rgba(255, 255, 255, 0.72);
  --grayscale-color-opacity-64: rgba(255, 255, 255, 0.64);
  --grayscale-color-opacity-56: rgba(255, 255, 255, 0.56);
  --grayscale-color-opacity-48: rgba(255, 255, 255, 0.48);
  --grayscale-color-opacity-40: rgba(255, 255, 255, 0.4);
  --grayscale-color-opacity-32: rgba(255, 255, 255, 0.32);
  --grayscale-color-opacity-24: rgba(255, 255, 255, 0.24);
  --grayscale-color-opacity-16: rgba(255, 255, 255, 0.16);
  --grayscale-color-opacity-8: rgba(255, 255, 255, 0.08);
  --grayscale-color-opacity-4: rgba(255, 255, 255, 0.04);

  --outline-color: #115df0;

  --success-color-accent: #50a37d;
  --success-color-dark: #2a6449;
  --success-color-pale: #f3fcf8;

  --info-color-accent: #509bd1;
  --info-color-dark: #275c88;
  --info-color-pale: #f2f8fd;

  --warning-color-accent: #e5ac4a;
  --warning-color-dark: #8b5c00;
  --warning-color-pale: #fdf6e7;

  --danger-color-accent: #dc4a3f;
  --danger-color-dark: #a62316;
  --danger-color-pale: #fdf4f2;

  --data-color-blue: #5472f2;
  --data-color-purple: #8d42f5;

  --box-shadow-100: 0px 0px 6px rgba(0, 0, 0, 0.02),
    0px 2px 4px rgba(0, 0, 0, 0.08);
  --box-shadow-300: 0px 0px 4px rgba(0, 0, 0, 0.04),
    0px 8px 16px rgba(0, 0, 0, 0.08);

  --font-family: 'Elevance Sans', Arial, sans-serif;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --icon-size-s: 1rem;
  --icon-size-m: 1.5rem;
  --icon-size-l: 2.5rem;
  --icon-size-xl: 3rem;
  --icon-size-xxl: 5rem;

  --container-max-text: calc(808px + var(--container-gap) * 2);
  --container-max-grid: calc(1224px + var(--container-gap) * 2);
  --container-gap: 1rem;

  --accent-color: #5526d6;
  --text-color: #1f2430;
  --muted-color: #5a6072;
  --divider-color: #e6e6ea;
}