:root {
  /* Base colors */
  --rich-white: #fff;
  --elements-red: #e55252;
  --elements-primary: #5fa7da;
  --elements-blue: #5fa7da;
  --elements-base: #141417;
  --elements-orange: #ec9439;
  --elements-yellow: #ffd73a;
  --elements-dark-blue: #5a68e2;
  --elements-green: #5bc784;
  --elements-white: #e0e0e0;
  --elements-ash-blue: #899dac;
  --elements-rich-white: rgb(255 255 255 / 28%);
  --rich-black: #000;
  --body-bg: var(--elements-base);

  /*
    Typography
    TODO: replace typography colors with strict values, without opacity
  */
  --typography-primary: rgb(255 255 255 / 87%);
  --typography-secondary: rgb(255 255 255 / 60%);
  --typography-tertiary: rgb(255 255 255 / 40%);
  --typography-error: #e55252;
  --typography-notification: #ec9439;
  --typography-regular-body: #9b9b9b;

  /* Elevation levels */
  --elevation-step: rgb(255 255 255 / 2.5%);
  --elevation-double-step: rgb(255 255 255 / 5%);
  --elevation-tripple-step: rgb(255 255 255 / 10%);
  --elevation-02: #18181b;
  --elevation-04: #1d1d20;
  --elevation-06: #212124;
  --elevation-08: #262629;
  --elevation-12: #303033;
  --elevation-16: #39393c;
  --elevation-20: #434345;
  --elevation-24: #4c4c4e;

  /* Base color levels */
  --base-level-90: #e7e7e8;
  --base-level-30: #5a5a5d;
  --base-level-80: #d0d0d0;
  --base-level-70: #b8b8b9;
  --base-level-60: #a1a1a2;
  --base-level-50: #89898b;
  --base-level-40: #727273;
  --base-level-20: #434345;
  --base-level-10: #2b2b2e;
  --base-level-05: #1f1f22;
  --base-level-02: #18181b;
  --base-level-04: #1d1d20;

  /* Shadows */
  --shadow-flat: none;
  --shadow-regular: 0 4px 8px 0 rgb(0 0 0 / 15%), 0 2px 4px 0 rgb(0 0 0 / 20%);
  --shadow-indicator-line: 0 0 6px 0 var(--elevation-02);
  --shadow-hover: 0 12px 24px 0 rgb(0 0 0 / 15%), 0 4px 8px 0 rgb(0 0 0 / 20%);
  --shadow-inner-light: rgb(29 29 32 / 0%);
}