@mixin properties() {
  --surface: #101625;
  --primary: #FF8056;
  --primary-dark: #E36152;
  --primary-light: #FFA789;
  --primary-accent: #E36152;
  --text-on-primary: #fff;

  --accent-color: #FFA385;
  //secondary colors
  --secondary: #121F36;
  --secondary-dark: #030405;
  --secondary-darker: #0C1525;
  --secondary-light: #617096;
  --secondary-accent: #8E99BB;

  --text-on-secondary: #FFFFFF;
  --text-color: rgba(255, 255, 255, .6);
  --text-title-color: var(--text-on-primary);
  --text-second-color: var(--gray-dark);

  --text-hover-color: var(--primary);
  --bg-element: var(--secondary-dark);
  --element-border-color: var(--gray-light);
  --separator-color: var(--gray-lighter);
}