@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Zodiak Font */
@font-face {
  font-family: 'Zodiak';
  src: url(/assets/Zodiak-Variable.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zodiak';
  src: url(/assets/Zodiak-VariableItalic.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Satoshi Font */
@font-face {
  font-family: 'Satoshi';
  src: url(/assets/Satoshi-Variable.woff2) format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url(/assets/Satoshi-VariableItalic.woff2) format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

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

html {
  @apply text-gray-600;
}

h1,h2,h3,h4,h5,h6 {
  @apply text-gray-800;
  @apply font-zodiak font-bold;
}

@layer components {
  .btn {
    @apply text-center cursor-pointer rounded-lg transition-colors px-9 py-3 w-full max-w-md mx-auto;
  }

  .btn-primary {
    @apply bg-primary-500 text-white hover:bg-primary-600;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:text-primary-700;
  }

  .card {
    @apply bg-white rounded-lg p-6 shadow-medium;
  }

  .pill {
    @apply hover:bg-purple-200 rounded-lg flex flex-row items-center px-2 py-1 gap-2 text-sm bg-purple-100 text-purple-600 font-medium;
  }

  .pill-orange {
    @apply hover:bg-orange-200 bg-orange-100 text-orange-600;
  }
}

.field-input {
  @apply rounded-lg border border-gray-300 px-2 py-2;
}

.in-place-editing .field-input {
  @apply rounded-lg border border-gray-300 px-2 py-1 text-sm;
}

.in-place-editing .btn {
  @apply px-2 py-1 text-sm;
}

.recommendation-card {
  @apply rounded-lg shadow-medium bg-white text-gray-800 border border border-gray-200 text-center w-full;
}

.weave-pagination .pagination {
  @apply flex justify-between items-center gap-2;
}

.weave-pagination .pagination .page,
.weave-pagination .pagination .next,
.weave-pagination .pagination .prev,
.weave-pagination .pagination .last,
.weave-pagination .pagination .first {
  @apply min-w-3 text-center inline-block;
}

.weave-pagination .pagination .page.current {
  @apply font-bold text-primary-500 border-b border-gray-300;
}

dialog::backdrop {
  backdrop-filter: blur(1px);
}
/* override Daisy UI components here */

/* example - maintains default 'btn' styles but changes border to pill style */
/* .btn {
  border-radius: 9999px;
} */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* example - include a custom font (put file in app/assets/fonts) */
 /* @font-face {
   font-family: 'Retrcade Regular';
   font-style: normal;
   font-weight: normal;
   src: url(/RetrcadeRegular.woff) format('woff');
 } */


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fadeIn {
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-1000 {
  animation-delay: 1000ms;
}

.delay-2000 {
  animation-delay: 2000ms;
}

.delay-3000 {
  animation-delay: 3000ms;
}

.delay-4000 {
  animation-delay: 4000ms;
}

.delay-5000 {
  animation-delay: 5000ms;
}

.delayedFadeOut {
  animation: fadeOut 1s ease-out 4s forwards;
}