@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family:
      'Pretendard Variable',
      Pretendard,
      -apple-system,
      BlinkMacSystemFont,
      system-ui,
      Roboto,
      'Helvetica Neue',
      'Segoe UI',
      'Apple SD Gothic Neo',
      'Noto Sans KR',
      'Malgun Gothic',
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      sans-serif;

    /* colors */
    --purple-700: #452bd9;
    --purple-600: #5031ff;
    --purple-500: #7057ff;
    --purple-400: #917eff;
    --purple-300: #b4a7ff;
    --purple-200: #d5ceff;
    --purple-100: #eeebff;

    --black: #1e1e1e;
    --black-alpha-60: rgba(30, 30, 30, 0.6);
    --grey-900: #5b5d60;
    --grey-800: #777a7d;
    --grey-700: #999ea2;
    --grey-500: #d8dee4;
    --grey-400: #e0e5e9;
    --grey-300: #e5e9ed;
    --grey-200: #edf0f3;
    --grey-100: #f3f5f7;
    --grey-50: #fbfcfc;
    --white: #ffffff;

    --red: #f45c55;
    --yellow: #ffe04c;
    --green: #2ddd93;
  }

  * {
    @apply transition-colors duration-200 ease-in-out;
  }

  input:focus,
  textarea:focus {
    outline: none;
  }

  /* input type='search'의 기본 css 제거 */
  input::-ms-clear,
  input::-ms-reveal {
    opacity: 0;
  }
  input::-webkit-search-decoration,
  input::-webkit-search-cancel-button,
  input::-webkit-search-results-button,
  input::-webkit-search-results-decoration {
    opacity: 0;
  }

  .floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @keyframes floating {
    from {
      transform: translate(0, 0px);
    }
    65% {
      transform: translate(0, 15px);
    }
    to {
      transform: translate(0, -0px);
    }
  }
}

.custom-dashed {
  position: relative;
  border-radius: 8px;
  background-clip: padding-box;
}

.custom-dashed::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 3px dashed var(--grey-300);
}

.custom-scrollbar::-webkit-scrollbar {
  @apply w-2;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--grey-200);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply rounded-full;
  background: var(--purple-200);
  cursor: pointer;
}
