:root {
  /* global */
  --background: #18141a;
  --danger: #ffa900;
  --error: #ff0000;

  /* buttons */
  --primary: #ff2d55;
  --secondary: #242129;
  --primary-hover: #ff3d61;
  --secondary-hover: #28262c;

  /* within modals */
  --secondary-on-modal: #67637033;
  --secondary-on-modal-hover: #6763704d;
  --card-on-modal: #67637033;

  /* text */
  --text: #ffffff;
  --secondary-text: #676370;
  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;

  /* ui */
  --divider: #67637033;
  --dropdown: #716b7c;
  --dropdown-hover: #24212933;
  --popup: #676370;
  --popup-text: #ffffff;
  --navbar-popup: #242129;
  --navbar-popup-hover: #67637033;
  --card: #242129;
  --outline: 1px solid #00000005;
  --toast: #3d3b43;
  --toast-text: #ffffff;
  --modal: #242129;
  --dimmer: #000000dd;
  --text-area-border: #676370;
  --clear-divider: #a09ba8;
  --navbar-icons: #fff;

  /* shadows */
  --shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
  --shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.24);
  --shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
  --shadow-4: 0px 8px 16px 12px rgba(0, 0, 0, 0.8);

  --shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
  --shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.24);
  --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);

  /* svgs */
  --brightness: brightness(100);
  /* black svgs */

  --notification-onboarding-bell: url(97f915110ca07da8.png);

  /* Navbar2 */
  --navbar-menu-enabled: #ecebed;
  --navbar-menu-hover: #fff;
  --navbar-item-text-enabled: #cfcdd4;
  --navbar-item-text-hover: #fff;
  --navbar-item-border-enabled: #716b7c;
  --navbar-item-border-hover: #cfcdd4;
  --usermenu-item-text-enabled: #cfcdd4;
  --usermenu-item-border-enabled: #cfcdd4;
}