[data-theme='light'] {
  --neutral-50: #F6F7F6;
  --neutral-100: #E9EAE8;
  --neutral-200: #C9CBC4;
  --neutral-300: #A6A99F;
  --neutral-400: #81867B;
  --neutral-500: #686C60;
  --neutral-600: #51554C;
  --neutral-700: #42463F;
  --neutral-800: #373A35;
  --neutral-900: #2A2B28;
  --neutral-950: #111210;


  --primary-50: #FFF0F3;
  --primary-100: #FFE2E8;
  --primary-200: #FFC9D7;
  --primary-300: #FF9CB6;
  --primary-400: #FF6591;
  --primary-500: #FF306F;
  --primary-600: #ED0C5B;
  --primary-700: #CD034F;
  --primary-800: #AB064A;
  --primary-900: #920945;
  --primary-950: #520021;
}

[data-theme='dark'] {
  --neutral-50: #111210;
  --neutral-100: #2A2B28;
  --neutral-200: #373A35;
  --neutral-300: #42463F;
  --neutral-400: #51554C;
  --neutral-500: #686C60;
  --neutral-600: #81867B;
  --neutral-700: #A6A99F;
  --neutral-800: #C9CBC4;
  --neutral-900: #E9EAE8;
  --neutral-950: #F6F7F6;

  --primary-50: #520021;
  --primary-100: #920945;
  --primary-200: #AB064A;
  --primary-300: #CD034F;
  --primary-400: #ED0C5B;
  --primary-500: #FF306F;
  --primary-600: #ED0C5B;
  --primary-700: #FF9CB6;
  --primary-800: #FFC9D7;
  --primary-900: #FFE2E8;
  --primary-950: #FFF0F3;
}


/* width */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 900px;
  overflow: hidden;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-600);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-700);
}

body, p, html, button {
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}


body {
  overflow: hidden;
  margin: 0;
}

#app {
  background: var(--neutral-50);
  color: var(--neutral-950);
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

button {
  color: var(--neutral-900);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 600;
}

h1 {
  font-size: 24px;
  line-height: 29px;
}

h2 {
  font-size: 20px;
  line-height: 20px;
}

p {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}

.sub-text {
  color: var(--neutral-50);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.iconDefault {
  color: var(--neutral-950);
}

.iconDefaultStroke {
  Stroke: var(--neutral-950);
}
.iconDefaultStrokeReverse {
  stroke: var(--neutral-50);
}
.iconFixedStrokeWhite {
  stroke: #F6F7F6;
}
.iconFixedStrokeBlack {
  stroke: #111210;
}

.iconDefaultFill {
  fill: var(--neutral-950);
}

.iconDefaultFillReverse {
  fill: var(--neutral-50);
}

.iconFixedFillWhite {
  fill: #F6F7F6;
}
.iconFixedFillBlack {
  fill: #111210;
}

.colorFixedWhite {
    color: #F6F7F6;
}
.colorFixedBlack {
    color: #111210;
}