/* Colors */
:root {
  --main-bg-color: #f9f9f9;
  --secondary-bg-color: #6c5f6d;
  --tertiary-bg-color: #f0f0f0;
  --main-text-color: #1a1a1a;
  --medium-text-color: #645b5b;
  --dark-contour-color: #252525;
  --primary-btn-color: #eeeeee;
  --secondary-btn-color: #fcfcfc;
  --tertiary-btn-color: #e8e8e8;
  --tabs-bg-color: #eaeaea;
  --inactive-btn-color: #e5e8dd;
  --primary-gradient-shadow: linear-gradient(to right, #e5e8dd, #8332ac);

  --overlay-1: #18111b;
  --overlay-1-light: #f9f9f9;
  --overlay-2: transparent;
  --overlay-3: #9a5cd0;
  --box-shadow-1: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
  --box-shadow-2: var(--secondary-bg-color) 3px 3px;
  --box-shadow-3: rgba(99, 99, 99, 0.05) 0px 0px 1px 0px;
}

[data-theme="dark"]:root {
  --main-bg-color: #232225;
  --content-bg-color: #121113;
  --secondary-bg-color: #ffdbe1;
  --tertiary-bg-color: #1a191b;
  --primary-btn-color: #eeeef0;
  --secondary-btn-color: #3c393f;
  --tertiary-btn-color: #e8e8e8;
  --medium-text-color: #faf8f8;
  --main-text-color: #eeeeee;
  --tabs-bg-color: #1a191b;
  --main-gradient-bg: linear-gradient(to bottom right, #141414, #120e13);
}

/* Inter Google Font Classes */
.inter-base {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -2%;
}

.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.inter-bold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* Montserrat Google Font Classes */
.montserrat-base {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -2%;
}

.montserrat-normal {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}