:root {
  --color-primary: #3223b3;
  --color-secondary: #7c71f6;
  --color-primary-light: #ebe9fc;
  --color-text: #404040;
  --color-text-muted: #808080;
  --color-border: #d0d0d0;
  --color-white: #ffffff;
  --color-red: #ff0066;
  --color-secondary-hover: color-mix(
    var(--color-secondary) 30%,
    var(--color-white) 70%
  );
  --color-primary-hover: color-mix(
    var(--color-primary) 80%,
    var(--color-white) 20%
  );
}

* {
  &,
  &::before,
  &::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;

  &::-webkit-scrollbar {
    width: 16px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f5f5;
  }

  &::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border: 3px solid #f5f5f5;
    border-radius: 999px;
  }
}

body {
  font-size: 18px;
  line-height: 1.5;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  background-color: var(--color-white);
}

button {
  cursor: pointer;
}