@import "tailwindcss";

@font-face {
  font-family: "NanumSquare";
  src: url("/assets/fonts/NanumSquareL.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NanumSquare";
  src: url("/assets/fonts/NanumSquare.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NanumSquare";
  src: url("/assets/fonts/NanumSquareB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NanumSquare";
  src: url("/assets/fonts/NanumSquareEB.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-sans: "NanumSquare", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@layer base {
  :root {
    color: #17171f;
    background: #fafafa;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  *::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
  }

  button {
    cursor: pointer;
  }

  input[type="password"] {
    color: #111827;
    caret-color: #111827;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-text-fill-color: #111827;
  }

  input::placeholder {
    color: #a0a7b7;
    font-family: var(--font-sans);
    font-weight: 700;
  }

  input[type="password"]::placeholder {
    color: #a0a7b7;
    font-family: var(--font-sans);
    font-weight: 700;
    -webkit-text-fill-color: #a0a7b7;
  }
}

@layer components {
  .icon-ripple-button {
    transition: color 150ms ease;
  }

  .icon-ripple-button::after {
    position: absolute;
    inset: 5px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(79, 70, 229, 0.42);
    border-radius: 9999px;
    opacity: 0;
    transform: scale(0.72);
  }

  .icon-ripple-button:active::after {
    animation: icon-ripple 340ms ease-out;
  }

  .icon-chat-blink {
    animation: icon-chat-blink 1.05s ease-in-out infinite;
  }

  @keyframes icon-ripple {
    0% {
      opacity: 0.42;
      transform: scale(0.72);
    }

    100% {
      opacity: 0;
      transform: scale(1.75);
    }
  }

  @keyframes icon-chat-blink {
    0% {
      opacity: 1;
      filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
    }

    45% {
      opacity: 0.34;
      filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.82));
    }

    100% {
      opacity: 1;
      filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
    }
  }

  .page-transition {
    will-change: opacity, transform;
    transition:
      opacity 120ms ease,
      transform 120ms ease;
  }

  .page-transition-in {
    opacity: 1;
    transform: translateY(0);
  }

  .page-transition-out {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-ripple-button:active::after {
    animation: none;
  }

  .icon-chat-blink {
    animation: none;
  }

  .page-transition {
    transition: none;
    transform: none;
  }
}