@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import "tailwindcss";
@import "./errors.css";
@import "./typography.css";

@theme {
  --font-sans: "Source Sans 3", "Geist", sans-serif; 
  --font-serif: "Merriweather", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #010101;
}

html { @apply bg-amber-50 font-serif }
html.landing { @apply bg-white font-serif }
html { scroll-behavior: smooth; }

form {
  & > div:not(:last-child),
  & > fieldset:not(:last-child) {
    @apply mb-8;
  }
  & > input[type="text"],
  & > textarea,
  & > input[type="email"],
  & > input[type="password"] {
    @apply mb-8;
  }
  & label {
    @apply block;
  }
  & input[type="text"],
  & input[type="email"],
  & input[type="password"],
  & input[type="search"],
  & select,
  & textarea {
    @apply border border-gray-200 rounded p-2 w-full focus:outline-none focus:ring focus:ring-offset-2 focus:ring-blue-500 bg-white;
  }
  & > [role="alert"] {
    @apply text-red-500 font-medium mb-8;

    & h2 {
      @apply font-black text-sm uppercase tracking-normal flex items-center;
    }

    & ul {
      @apply list-[square] list-inside pl-4 mt-2;
    }
  }
}

form input,
form textarea {
  @apply placeholder:italic;
}

input[type="submit"],
.button,
.button_to button:not(.link) {
  @apply inline-block font-semibold border border-black rounded-xl bg-white py-2 px-6 cursor-pointer border-fuchsia-700 bg-gradient-to-b from-fuchsia-700 via-fuchsia-800 to-fuchsia-900 px-4 text-neutral-50 shadow-[inset_0_1px_0px_0px_#5D32A3] hover:from-fuchsia-800 hover:via-fuchsia-800 hover:to-fuchsia-800 active:[box-shadow:none] focus:ring focus:ring-offset-2 focus:ring-fuchsia-800 text-base md:text-lg;
}

button .show-when-disabled { display: none; }
button[disabled] .show-when-disabled { display: initial; }

button .show-when-enabled { display: initial; }
button[disabled] .show-when-enabled { display: none; }

.opacity-50 {
  opacity: 0.5;
}

.drop-target {
  outline: 2px dashed #facc15; /* Tailwind amber-400 */
  outline-offset: -2px;
}

.dragging {
  opacity: 0.5;
  transform: scale(1.02);
  z-index: 10;
}

.draggable-item {
  transition: transform 200ms ease;
}

.text-purple { color: #5D32A3 }

.text-orange { color: #F5671E }

.text-yellow { color: #FAD17E }

.bottom-fade {
  background: linear-gradient(0deg, var(--color-page-background) var(--offset, 1rem 20px), rgba(255, 255, 255, 0));
  bottom: 0;
  height: 3rem;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.emoji-output {
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

@media print {
  .print\:font-emoji {
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  }
}