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

@layer base {
  html {
    @apply font-poppins;
  }
}


@layer components {

  /* Base button styles */
  .btn {
    @apply font-semibold text-center rounded-md cursor-pointer;
  }

  /* Button variants */
  .btn-primary {
    @apply cursor-pointer text-center bg-pear-400 text-steel-purple-950 hover:bg-pear-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pear-600;
  }

  .btn-secondary {
    @apply text-center text-white border border-pear-400 hover:bg-pear-400 hover:text-steel-purple-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pear-600;
  }

  .btn-tertiary {
    @apply text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-purple {
    @apply text-white bg-purple-500 hover:bg-purple-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600;
  }

  /* Button sizes */
  .btn-xs {
    @apply px-2 py-1 text-xs rounded;
  }

  .btn-sm {
    @apply px-2 py-1 text-sm rounded;
  }

  .btn-md {
    @apply px-2.5 py-1.5 text-sm;
  }

  .btn-lg {
    @apply px-3 py-2 text-sm;
  }

  .btn-xl {
    @apply px-3.5 py-2.5 text-sm;
  }

  /* Icon button modifier */
  .btn-icon {
    @apply inline-flex items-center gap-x-1.5;
  }

  /* Icon styles */
  .btn-icon-left {
    @apply -ml-0.5 size-5;
  }

  [type=checkbox]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#000000' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
  }

  [type=radio]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#1D1932' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
  }

  .filled-star svg {
    @apply fill-candlelight-500;
  }

  .empty-star svg {
    @apply fill-steel-purple-800;
  }

  .status-pill {
    @apply py-0.5 px-2.5 text-xs font-medium rounded-full;
  }

  .pending {
    @apply bg-candlelight-950/50 text-candlelight-100;
  }

  .completed {
    @apply bg-pear-950/50 text-pear-50;
  }

  @layer utilities {
    .centered-flex {
      @apply flex items-center justify-center;
    }

    .flex-between {
      @apply flex items-center justify-between;
    }

    .centered-flex-col {
      @apply flex flex-col items-center justify-center;
    }
  }

  .markdown {
    @apply text-sm font-normal leading-5 text-white;
  }

  .markdown>h1 {
    @apply text-2xl font-bold;
  }

  .markdown * strong,
  .markdown strong {
    @apply font-semibold;
  }

  .markdown>h2 {
    @apply text-xl font-bold;
  }

  .markdown>h3 {
    @apply text-lg font-bold;
  }

  .markdown>ul {
    @apply list-disc list-inside;
  }

  .markdown>li {
    @apply text-sm;
  }

  .markdown>ol {
    @apply list-decimal list-inside;
  }

  .markdown>hr {
    @apply my-4 border-t border-steel-purple-800;
  }

  .badge {
    @apply px-2.5 py-1 text-xs text-neutral-200 bg-steel-purple-800/50 font-medium rounded-full;
  }

  .scrollbar-primary {
    scrollbar-width: thin;
    scrollbar-color: #918CAC #1D1932;
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .disabled-number-scroll::-webkit-outer-spin-button,
  .disabled-number-scroll::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .disabled-number-scroll {
    -moz-appearance: textfield;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  font-size: 16px;
}