:root,
:root.dark {
  --brand: #0066FF;
  --brand-color: #fff;
  --brand-border-color: var(--brand);

  --primary-bg: #16181D;
  --primary-color: #FFFFFF;
  --primary-border-color: #3A3A3A;

  --main-bg: #FFFFFF1A;
  --main-color: #FFFFFF;
  /* --main-color2: #a0a0ab;
  --main-border-color: #ffffff14; */

  --secondary-bg: #FFFFFF1A;
  --secondary-color: #FFFFFF66;
  /* --secondary-color2: #a0a0ab;
  --secondary-border-color: #ffffff14; */

  --tertiary-bg: #05050726;
  --tertiary-color: #FFFFFF;
  /* --tertiary-color2: #fff;
  --tertiary-border-color: #343541; */

  --quarternary-bg: #05050766;
  --quarternary-bg2: #050507;

  /* --HF-bg: #232328;
  --HF-color: #fff;
  --HF-border-color: #343541;

  --Profile-bg: var(--main-bg);
  --Profile-color: var(--main-color);
  --Profile-color2: #9797a2;
  --Profile-border-color: #343541;

  --Modal-bg: #24252d;
  --Modal-color: #fff;
  --Modal-color2: #fff;

  --Calendar-bg: var(--secondary-bg);
  --Calendar-color: var(--secondary-color);
  --Calendar-border-color: var(--secondary-bg);

  --Field-bg: #44444e;
  --Field-bg2: #343541;
  --Field-color: #fff;
  --Field-border-color: transparent;
  --Field-disabled-bg: #44444e;
  --Field-disabled-color: #9797a2;
  --Field-label-color: #e8e8e8;
  --Field-Item-bg: var(--tertiary-bg);
  --Field-Item-color: var(--tertiary-color);
  --Field-Item-active-bg: var(--brand);
  --Field-Item-active-color: var(--brand-color); */
}