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

  --accent-color: var(--primary);
  //secondary colors
  --secondary: #121F36;
  --secondary-dark: #121F36;
  --secondary-light: #313C50;
  --secondary-accent: #424F6E;
  --text-on-secondary: #FFFFFF;

  //background
  --text-color: #000;
  --text-title-color: var(--secondary-dark);
  --text-second-color: var(--gray-dark);
  --text-hover-color: var(--primary);

  --bg-element: var(--gray-light);
  --element-border-color: var(--gray-light);
  --separator-color: var(--gray-darker);
}