:root {
  --web-login-background-image: none;

  --background: #000000;
  --background-heavier: #000000;
  --background-variant: #000000;
  --on-background: #ffffff;
  --on-background-variant: #b2b2b2;
  --on-background-variant-transparent: rgb(255 255 255 / 50%);

  --surface-lighter: #565252;
  --surface: #282a2c;
  --surface-heavier: #000000;
  --surface-variant: #1a1c1f;
  --on-surface: #ffffff;
  --on-surface-variant: #d6d6d6;

  --outline: #1d1d1d;
  --outline-transparent: rgba(62, 69, 86, 0.29);

  --primary-lighter: #7ad6ef;
  --primary: #00c8ff;
  --primary-heavier: #00ace8;
  --primary-transparent: #3fc5ea1f;
  --on-primary: #ffffff;

  --secondary-lighter: #56b78632;
  --secondary: #3db277;
  --secondary-heavier: #2f9c67;
  --on-secondary: #ffffff;

  --accent-lighter: #f3aa56;
  --accent: #eb9346;
  --accent-heavier: #db783e;
  --on-accent: #0077F4;

  --warn-lighter: #eb4e5c32;
  --warn: #e82839;
  --warn-heavier: #e23142;
  --on-warn: #ffffff;
}

.engine-hover--strong:hover {
  backdrop-filter: brightness(1.45);
}

.engine-hover--normal:hover {
  backdrop-filter: brightness(1.3);
}

.engine-hover--weak:hover {
  backdrop-filter: brightness(1.1);
}