@import "tailwindcss";
@import "./custom.css";

@layer base {
  body {
    font-family: "DM Sans", sans-serif;
  }

  @font-face {
    font-family: "FONTSPRING DEMO - The Seasons";
    src: url("../fonts/FONTSPRINGDEMO-TheSeasonsBold.woff2") format("woff2"),
      url("../fonts/FONTSPRINGDEMO-TheSeasonsBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "FONTSPRING DEMO - The Seasons";
    src: url("../fonts/FONTSPRINGDEMO-TheSeasonsRegular.woff2") format("woff2"),
      url("../fonts/FONTSPRINGDEMO-TheSeasonsRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "FONTSPRING DEMO - The Seasons";
    src: url("../fonts/FONTSPRINGDEMO-TheSeasonsLightRegular.woff2")
        format("woff2"),
      url("../fonts/FONTSPRINGDEMO-TheSeasonsLightRegular.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
}

@theme {
  --font-spring-demo: "FONTSPRING DEMO - The Seasons";
  --color-primary-pink: #daada8;
  --color-low-pink: #f9f1ee;
  --color-primary-dark: #313840;
  --color-gray-light: #dadcd5;
  --color-silver: #cccccc;
  --leading-100: 100%;
}

@layer utilities {
  .container {
    max-width: 1530px;
    @apply mx-auto px-[30px];
  }

  .title_30 {
    @apply font-spring-demo md:text-3xl text-[22px] leading-[1.2] text-[#6F889E] font-bold;
  }

  .title_41 {
    @apply font-spring-demo md:text-[41px] text-[22px] leading-[1.2] text-[#6F889E] font-bold;
  }
}

@layer components {
  .active {
    @apply text-primary-pink relative;
  }

  .active::after {
    @apply content-[''] absolute -bottom-1 left-0 h-0.5 w-full bg-primary-pink transform scale-100 transition-transform duration-300;
  }

  .theme__btn {
    @apply bg-primary-pink inline-flex items-center gap-2.5 text-sm font-semibold text-white py-2.5 px-12.5 rounded-md transition-all duration-300 hover:bg-[#D26B60];
  }

  .flatpickr-day {
    @apply !flex !items-center !justify-center;
  }
}
