@import "tailwindcss";

@import "./utility.css";
@import "./animate.css";
@import "./button.css";
@import "./dropdown.css";
@import "./accordion.css";
@import "./drawer.css";
@import "./navbar.css";
@import "./submenu.css";


@theme {
  --font-sans: 'Inter', sans-serif;
  --font-heading: 'Bricolage Grotesque', sans-serif;

  --container-padding-x: 2rem;
  --container-padding-x-mobile: 20px;
  --container-max-width: calc(1200px + 4rem);
}

@utility container {
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
  max-width: var(--container-max-width);

  @media (max-width: 460px) {
    padding-inline: var(--container-padding-x-mobile);
  }
}

@layer base {

  h1,
  h2,
  h3 {
    font-family: var(--font-heading);
    font-weight: bold;
  }
}