html,
body {
  /** CSS DARK THEME PRIMARY COLORS */
  --color-primary-100: #0022ff;
  --color-primary-200: #4f3cff;
  --color-primary-300: #7154ff;
  --color-primary-400: #8c6cff;
  --color-primary-500: #a384ff;
  --color-primary-600: #b89cff;

  /** CSS DARK THEME SECONDARY COLORS */
  --color-secondary-100: #09baa8;
  --color-secondary-200: #45c2b1;
  --color-secondary-300: #64cabb;
  --color-secondary-400: #7ed2c4;
  --color-secondary-500: #95dace;

  /** CSS DARK THEME SURFACE COLORS */
  --color-surface-100: #121212;
  --color-surface-200: #282828;
  --color-surface-300: #3f3f3f;
  --color-surface-400: #575757;
  --color-surface-500: #717171;
  --color-surface-600: #8b8b8b;

  --color-high-emphasis: 87%;
  --color-medium-emphasis: 60%;
  --color-disabled-emphasis: 38%;
}

body {
  background: var(--color-surface-100);
  color: #ffffff;
}