:root,
:root.dark {
  --brand: #ef7925;
  --brand-color: #fff;
  --brand-border-color: var(--brand);
  --brand-gradient: linear-gradient(90deg, hsl(from #ef7925 h s l / 0.8) -15.71%, #bb6426 118.11%);

  --primary-bg: #000000;
  --primary-color: #9797a2;
  --primary-border-color: #9797a2;

  --main-bg: #24252d;
  --main-color: #e8e8e8;
  --main-color2: #a0a0ab;
  --main-border-color: #ffffff14;

  --secondary-bg: #44444e;
  --secondary-color: #e8e8e8;
  --secondary-color2: #a0a0ab;
  --secondary-border-color: #ffffff14;

  --tertiary-bg: #343541;
  --tertiary-color: #fff;
  --tertiary-color2: #fff;
  --tertiary-border-color: #343541;

  --quaternary-bg: #ffffff0d;
  --quaternary-color: #e8e8e8;

  --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: #343541;
  --Field-color: #fff;
  --Field-border-color: transparent;
  --Field-disabled-bg: #44444e;
  --Field-disabled-color: rgba(232, 232, 232, 0.6);
  --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);
}