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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* :root {
  --primary-color: #fff;
  --secondary-color: #000;
} */


@layer base {
  @font-face {
    font-family: "BBBBaskervvol";
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/BBBBaskervvol-Base.woff2") format("woff2");
  }

  @font-face {
    font-family: "Amiamie";
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Amiamie-Regular.woff2") format("woff2");
  }

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

  @font-face {
    font-family: "Amiamie";
    font-weight: 700;
    font-display: swap;
    font-style: regular;
    src: url("/fonts/Amiamie-BlackRound.woff2") format("woff2");
  }
  @font-face {
    font-family: "Amiamie";
    font-weight: 700;
    font-display: swap;
    font-style: italic;
    src: url("/fonts/Amiamie-BlackItalicRound.woff2") format("woff2");
  }

  .underline-links a {
    text-decoration: underline;
  }

    .sanity-input {
     @apply block w-full rounded border border-gray-200 bg-white px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-[#635dff] focus:border-[#635dff] text-base transition;
   }
   .sanity-checkbox {
     @apply accent-[#635dff] w-5 h-5 rounded border-gray-300 focus:ring-[#635dff];
   }
   .sanity-btn-purple {
     @apply bg-[#635dff] hover:bg-[#5146e1] text-white font-semibold py-2 px-5 rounded transition h-12;
   }
   .sanity-btn-gray {
     @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-5 rounded transition;
   }
   .sanity-btn-green {
     @apply bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition;
   }

   dialog::backdrop {
      opacity: 0.8;
      background-color: rgb(254 240 138);
   }
}