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

@font-face {
  font-family: 'Poppins';
  src: url("/assets/Poppins-Regular-3ffb09f3.ttf"),
       url("/assets/Poppins-Black-3f1f7d66.ttf"),
       url("/assets/Poppins-BlackItalic-feb3c4e1.ttf"),
       url("/assets/Poppins-Bold-72adf1e6.ttf"),
       url("/assets/Poppins-BoldItalic-82d05519.ttf"),
       url("/assets/Poppins-ExtraBold-ef82d925.ttf"),
       url("/assets/Poppins-ExtraBoldItalic-97a19743.ttf"),
       url("/assets/Poppins-ExtraLight-6bc9b799.ttf"),
       url("/assets/Poppins-ExtraLightItalic-f508dd04.ttf"),
       url("/assets/Poppins-Italic-b26add6a.ttf"),
       url("/assets/Poppins-Light-cf4e6327.ttf"),
       url("/assets/Poppins-LightItalic-dd52df46.ttf"),
       url("/assets/Poppins-Medium-aac684dd.ttf"),
       url("/assets/Poppins-MediumItalic-bf5fd43e.ttf"),
       url("/assets/Poppins-SemiBold-8f59aac1.ttf"),
       url("/assets/Poppins-SemiBoldItalic-4477eba1.ttf"),
       url("/assets/Poppins-Thin-d3249c19.ttf"),
       url("/assets/Poppins-ThinItalic-9d0007f1.ttf");
  font-display: swap;
}

@layer components {
  .cs-notice {
    @apply w-full py-2 px-3 text-sm rounded mb-4;
  }

  .cs-notice-success {
    @apply bg-green-100 text-green-700;
  }

  .cs-notice-warning {
    @apply bg-yellow-100 text-yellow-700;
  }

  .cs-notice-error {
    @apply bg-red-100 text-red-700;
  }

  .cs-link-primary {
    @apply text-tertiary;
  }

  .cs-link-secondary {
    @apply text-secondary;
  }

  .cs-link-cancel {
    @apply text-red-500;
  }

  .cs-button-container {
    @apply flex flex-col md:flex-row justify-between gap-4;
  }

  .cs-button {
    @apply w-full md:w-auto rounded-md p-2 text-center md:text-left text-sm text-white inline-block cursor-pointer;
  }

  .cs-button-default {
    @apply cs-button bg-gray-300 border border-gray-300;
  }

  .cs-button-default-outline {
    @apply cs-button text-black border border-gray-300;
  }

  .cs-button-primary {
    @apply cs-button bg-primary border border-primary;
  }

  .cs-button-primary-outline {
    @apply cs-button text-primary border border-primary;
  }

  .cs-button-secondary {
    @apply cs-button bg-secondary border border-secondary;
  }

  .cs-button-secondary-outline {
    @apply cs-button text-secondary border border-secondary;
  }

  .cs-button-success {
    @apply cs-button bg-green-500;
  }

  .cs-button-success-outline {
    @apply cs-button text-green-500 border border-green-500;
  }

  .cs-button-success-outline:hover {
    @apply bg-green-500 text-white;
  }

  .cs-button-danger {
    @apply cs-button bg-red-500;
  }

  .cs-button-danger-outline {
    @apply cs-button text-red-500 border border-red-500;
  }

  .cs-badge {
    @apply inline-block px-2 py-1 text-xs font-medium rounded-full;
  }

  .cs-badge-primary {
    @apply cs-badge bg-primary text-white;
  }

  .cs-badge-primary-outline {
    @apply cs-badge text-primary border border-primary;
  }

  .cs-badge-secondary {
    @apply cs-badge bg-indigo-500 text-white;
  }

  .cs-badge-secondary-outline {
    @apply cs-badge text-indigo-500 border border-indigo-500;
  }

  .cs-label {
    @apply block w-full text-sm text-gray-700 font-semibold;
  }

  .cs-field {
    @apply block w-full bg-white rounded-md border border-gray-200 text-sm placeholder-gray-300 outline-none px-3 py-2 mt-2;
  }

  .field_with_errors .cs-field {
    @apply border-red-500;
  }

  .cs-container {
    @apply min-h-[calc(100vh-134px)] md:min-h-[calc(100vh-118px)] flex flex-col max-w-screen-xl mx-auto;
  }

  .cs-content {
    @apply flex-grow flex flex-col p-4 md:p-6;
  }

  .cs-title-and-breadcrumbs {
    @apply flex flex-row items-start justify-between items-center;
  }

  .cs-breadcrumbs {
    @apply flex flex-row items-center text-xs mt-1;
  }

  .cs-sticky-buttons {
    @apply sticky bottom-0 backdrop-blur-md border-t border-gray-100 flex flex-col-reverse justify-between gap-6 p-4 md:flex-row md:p-6;
  }

  .cs_document {
    h1, h2 {
      @apply mt-8;
    }

    h3, h4, h5, h6 {
      @apply mt-6;
    }

    p, ul, ol, blockquote {
      @apply mt-4;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  @apply font-poppins font-semibold text-accent;
}

h1 {
  @apply text-h1 font-h1 font-extrabold;
}

h2 {
  @apply text-h2 font-h2 font-bold;
}

h3 {
  @apply text-h3 font-h3;
}

h4 {
  @apply text-h4 font-h4;
}

h5 {
  @apply text-h5 font-h5;
}

h6 {
  @apply text-h6 font-h6;
}

.link {
  @apply text-primary;
}