@import "tailwindcss";
@import "lenis/dist/lenis.css";

button {
  @apply cursor-pointer;
}

@theme {
  --font-sans: "Outfit", sans-serif;

  --color-bg: #212123;
  --color-bg-500: #686a71;
  --color-midnight: #121063;
  --color-gold-500: #a27e40;

  --color-secondary-50: #f1f1f1;
  --color-secondary-100: oklch(0.922 0.001 287.25);
  --color-secondary-200: oklch(0.846 0.001 287.15);
  --color-secondary-300: oklch(0.758 0.003 286.67);
  --color-secondary-400: oklch(0.681 0.004 286.48);
  --color-secondary-500: oklch(0.604 0.004 286.43);
  --color-secondary-600: oklch(0.526 0.006 286.29);
  --color-secondary-700: oklch(0.447 0.006 286.22);
  --color-secondary-800: oklch(0.373 0.005 286.24);
  --color-secondary-900: oklch(0.286 0.004 286.27);
  --color-secondary-950: oklch(0.249 0.004 286.21);
}

input[type="submit"],
button {
  cursor: pointer;
}

@utility btn {
  @apply rounded-md bg-yellow-700 px-3.5 py-2.5 text-sm font-semibold text-white
              shadow-xs hover:bg-yellow-400 focus-visible:outline-2
              focus-visible:outline-offset-2 focus-visible:outline-yellow-500;
}

@layer components {
  .nav-link {
    @apply font-medium text-base hover:text-gold-500 transition-all duration-700;
  }

  .active {
    @apply text-gold-500 font-semibold;
  }

  .form-input {
    @apply block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline
            -outline-offset-1 outline-gray-300 placeholder:text-gray-400
            focus:outline  focus:-outline-offset-2 focus:outline-gold-500
            dark:bg-white/5 dark:text-white dark:outline-white/10
            dark:placeholder:text-gray-500 dark:focus:outline-gold-500;
  }
}

@utility text-gradient {
  background: linear-gradient(#ffffff, #898989);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  @apply py-1 tracking-tighter;
}