@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

@theme {
  --font-inter: "Inter", sans-serif;

  --color-primary: #063356;
  --color-secondary: #68b5d7;
  --color-primaryText: #14202a;
  --color-secondaryText: #ffffff;
  --color-thirdText: #707f8f;
  --color-bodyBg: #ffffff;
  --color-mainBg: #ffffff;
  --color-border-clr1: #627488;
}

.dark {
  --color-primary: #063356;
  --color-secondary: #68b5d7;
  --color-primaryText: #14202a;
  --color-secondaryText: #ffffff;
  --color-thirdText: #707f8f;
  --color-bodyBg: #ffffff;
  --color-mainBg: #ffffff;
  --color-border-clr1: #627488;
}

@layer base {
  body {
    @apply bg-bodyBg;
  }
}

@layer components {
  .custom-container {
    @apply container mx-auto px-6 md:px-10 lg:px-16 xl:px-28 min-[1600px]:px-40;
  }

  .primary-transition {
    @apply transition-all duration-400 ease-in-out;
  }

  .h1Text {
    @apply font-bold text-2xl sm:text-3xl md:text-4xl lg:text-6xl xl:text-[5rem];
  }

  .h2Text {
    @apply font-semibold text-xl md:text-3xl lg:text-4xl xl:text-6xl min-[2000px]:text-4xl;
  }

  .h3Text {
    @apply font-semibold md:text-lg lg:text-2xl xl:text-3xl;
  }

  .h4Text {
    @apply font-semibold md:text-lg xl:text-xl min-[2000px]:text-2xl;
  }

  .h5Text {
    @apply font-semibold lg:text-lg xl:text-xl;
  }

  .h6Text {
    @apply font-medium lg:text-lg;
  }

  .bodyText {
    @apply md:text-lg;
  }

  .captionText {
    @apply font-semibold text-xs md:text-sm;
  }

  .smallText {
    @apply text-xs md:text-sm;
  }
}
