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

@layer base {
  :root {
    --color-primary: #faaf19;
    --color-secondary: #545afa;
    --color-dark: #0c0c0c;
    --color-blue: #545afa;
    /* ... */
    --color-yellow: #ffc75f;
    --color-error: #f91c42;
  }

  /* ----- BASE ----- */
  html {
    font-size: 14px;
  }

  body {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

}

@layer components {

  img {
    @apply max-w-full w-full h-auto;
  }

  section {
    @apply relative;
  }

  .title {
    @apply text-center;
  }

  .title p {
    @apply max-w-3xl mx-auto;
  }

  .title h2 {
    @apply max-w-5xl mx-auto mb-2 px-8;
  }

  ol {
    @apply list-disc list-inside m-4 p-4;
  }

  /* Typography */
  h1,
  h2,
  h3,
  h6 {
    color: var(--color-dark);
  }

  h1 {
    @apply text-4xl font-bold mb-5;
    line-height: 3.75rem;
  }

  .h1 {
    @apply text-3xl leading-[4rem] font-bold tracking-widest;
  }

  h2 {
    @apply text-lg font-bold mb-2;
    line-height: 2rem;
  }

  h2 b {
    @apply font-bold;
  }

  .h2 {
    @apply text-lg font-bold leading-[3.6875rem];
  }

  h3 {
    @apply text-base font-semibold mb-2;
    line-height: 2rem;
  }

  .h3 {
    @apply md:text-base leading-[2rem];
  }

  .section-terms .h3 {
    @apply mt-8;
  }

  h4 {
    @apply text-sm font-semibold leading-[2.1875rem] text-gray-700 tracking-tight mb-1;
  }

  h5 {
    @apply text-base leading-6 font-semibold mb-5;
  }

  h6,
  .subtitle {
    @apply text-lg font-semibold leading-[1.6875rem] tracking-wide mb-2;
  }

  .lead {
    @apply text-lg leading-8 font-normal;
  }

  .text-regular {
    @apply font-normal;
  }

  .btn {
    @apply border border-transparent tracking-[.9px] text-[1.1rem] font-semibold px-5 py-4 text-center inline-block cursor-pointer rounded-[.6rem] md:rounded-[0.375rem] lg:rounded-[0.8rem];
  }

  .btn-primary {
    @apply bg-[var(--color-blue)] text-white border-[var(--color-blue)];
  }

  .btn-secondary {
    @apply bg-white text-[var(--color-blue)] border-[var(--color-blue)];
  }

  .btn-secondary-alt {
    @apply bg-white text-[var(--color-blue)] border-[var(--color-blue)];
  }

  .btn-blue-secondary {
    @apply bg-[var(--color-blue-secondary)] text-[--color-blue] border-[unset] !p-[0.714rem_1.714rem] !rounded-[0.571rem];
  }

  .btn-error {
    @apply bg-[var(--color-error)] text-white border-[var(--color-error)];
  }

  .btn-red {
    @apply hover:border-[var(--color-error)];
  }

  .btn-outline-red {
    @apply border-[var(--color-error)];
  }

  .btn-disabled {
    @apply bg-gray-300 text-gray-500 cursor-not-allowed;
  }

  .active-link {
    @apply !text-[var(--color-blue)] !font-semibold;
  }

  .error-msg {
    @apply text-[var(--color-error)] text-sm h-[15px] !leading-[1.4];
  }

  .error-input {
    @apply !border-[var(--color-error)] !border-[2px] !border-[solid] !rounded-[5px];
  }

  .responsive-text {
    @apply text-[.875rem] leading-[1.3125rem] md:text-[.9rem] md:leading-4 lg:text-[1rem] lg:leading-[1.5625rem];
  }

  .responsive-h2 {
    @apply font-bold w-full text-[1.125rem] leading-6 lg:text-[1.5rem] lg:leading-8;
  }

  .responsive-h4 {
    @apply font-semibold w-full text-[#000] text-[1.25rem] md:text-[1.5rem] lg:text-[1.75rem];
  }
}