@import "tailwindcss";

@plugin 'tailwindcss-primeui';

@custom-variant dark (&:where([class*="app-dark"], [class*="app-dark"] *));

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1920px;

  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
  --animate-float: float 3.5s ease-in-out infinite;
  --animate-wiggle: wiggle 3.5s ease-in-out infinite;

  @keyframes infinite-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px) scale(1.005);
    }
  }
  @keyframes wiggle {
    0%,
    30%,
    100% {
      transform: rotate(0deg);
    }
    10%,
    20% {
      transform: rotate(-1deg);
    }
    15%,
    25% {
      transform: rotate(1deg);
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility landing-container {
  @apply px-6 w-full max-w-248 mx-auto;
  @media (width >= theme(--breakpoint-md)) {
    @apply max-w-280;
  }
  @media (width >= theme(--breakpoint-xl)) {
    @apply max-w-340;
  }
}

@utility title-h1 {
  @apply text-7xl font-semibold text-surface-900 dark:text-surface-0 text-center leading-tight;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv07" on,
    "cv09" on,
    "cv05" on,
    "cv10" on,
    "cv11" on;
}

@utility title-h2 {
  @apply font-semibold text-surface-950 dark:text-surface-0 text-center leading-none;
  font-size: 4rem;
  font-family: "InterDisplay", sans-serif;
}

@utility title-h3 {
  @apply font-semibold text-surface-900 dark:text-surface-0 leading-tight text-center;
  font-size: 3.5rem;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv07" on,
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv09" on,
    "cv05" on,
    "cv10" on,
    "cv11" on;
}

@utility title-h4 {
  @apply font-semibold text-surface-900 dark:text-surface-0 leading-tight text-center;
  font-size: 2.85rem;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv07" on,
    "cv09" on,
    "cv05" on,
    "cv10" on,
    "cv11" on;
}

@utility title-h5 {
  @apply text-4xl text-center font-medium text-surface-950 dark:text-surface-0 leading-snug;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv07" on,
    "cv09" on,
    "cv05" on,
    "cv10" on,
    "cv11" on;
}

@utility title-h6 {
  @apply text-3xl text-center font-medium text-surface-950 dark:text-surface-0;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv07" on,
    "cv09" on,
    "cv05" on,
    "cv10" on,
    "cv11" on;
}

@utility title-h7 {
  @apply text-2xl text-center font-medium text-surface-950 dark:text-surface-0;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
}

@utility body-large {
  @apply text-xl text-center text-surface-500;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
}

@utility body-medium {
  @apply text-lg text-center text-surface-500;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
}

@utility body-small {
  @apply text-base text-center text-surface-500;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
}

@utility body-xsmall {
  @apply text-sm text-center text-surface-500;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
}

@utility label-large {
  @apply text-surface-950 dark:text-surface-0 font-medium text-xl;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv05" on,
    "cv04" on,
    "cv03" on,
    "cv07" on,
    "cv09" on,
    "cv10" on,
    "cv11" on;
}

@utility label-medium {
  @apply text-surface-950 dark:text-surface-0 font-medium text-lg;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv11" on,
    "cv10" on,
    "cv09" on,
    "cv07" on,
    "cv05" on,
    "cv04" on,
    "cv03" on,
    "cv02" on,
    "cv01" on;
}

@utility label-small {
  @apply text-surface-500 font-medium text-base text-center;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv11" on,
    "cv10" on,
    "cv09" on,
    "cv07" on,
    "cv05" on,
    "cv04" on,
    "cv03" on,
    "cv02" on,
    "cv01" on;
}

@utility label-xsmall {
  @apply text-surface-500 font-medium text-sm text-center;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv01" on,
    "cv02" on,
    "cv03" on,
    "cv04" on,
    "cv07" on,
    "cv11" on,
    "cv09" on,
    "cv10" on,
    "cv05" on;
}

@utility paragraph-xsmall {
  @apply text-sm text-center;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "ss11" on,
    "cv09" on,
    "liga" off,
    "calt" off;
}

@utility badge {
  @apply mx-auto body-small leading-normal text-surface-950 dark:text-surface-0 px-3.5 py-1 border border-surface-200 dark:border-surface-800 rounded-full w-fit;
}

@utility body-button {
  @apply py-2 px-3.5 rounded-lg bg-primary-600 hover:bg-primary-500 text-surface-0 font-normal text-center transition-all;
  width: 8.5rem;
  font-feature-settings:
    "cv11" on,
    "cv10" on,
    "cv09" on,
    "cv07" on,
    "cv05" on,
    "cv04" on,
    "cv03" on,
    "cv02" on,
    "cv01" on;
}

@utility social-button {
  @apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-200 font-medium leading-normal;
  font-family: "InterDisplay", sans-serif;
  font-feature-settings:
    "cv08" on,
    "cv09" on,
    "cv03" on,
    "cv02" on,
    "dlig" on,
    "cv06" on,
    "cv01" on,
    "liga" off,
    "calt" off;
  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
}
