@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --font-gotham: "Gotham", sans-serif;
  --color-navy-50: #f3f3f5;
  --color-navy-100: #dbdbe1;
  --color-navy-500: #7d7f95;
  --color-navy-950: #070c35;
  --color-inverse: var(--color-navy-950);
  --color-secondary: var(--color-navy-50);
  --color-fg-primary: var(--color-navy-950);
  --color-fg-inverse: var(--color-white);
  --color-fg-inverse-hover: var(--color-navy-500);
}
@layer base {
  html {
    font-family: var(--font-gotham);
    font-weight: 400;
  }
  a {
    @apply transition-colors duration-300;
  }
}
@layer components {
  .wrapper {
    @apply max-w-[1440px] px-20 mx-auto;
  }
  @media (max-width: 1024px) {
    .wrapper {
      @apply p-[25px];
    }
  }
  #main-menu {
    @apply flex items-center gap-5 text-fg-inverse text-sm;
    a {
      @apply hover:text-fg-inverse-hover whitespace-nowrap;
    }
  }
  .sub-menu {
    @apply absolute z-10 top-[62px] left-0
        w-full bg-white
        shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)]
        grid grid-cols-3;
  }
}
@layer utilities {
  .debug {
    @apply border-[3px] border-[red];
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../styles/tailwind.css%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAQ;AAER;AAEA;EACE;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAGF;EACE;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAEA;IAHF;MAII;;;EAIJ;IACE;IACA;MACE;;;EAIJ;IACE;AAAA;AAAA;AAAA;;;AAMJ;EACE;IACE%22,%22file%22:%22tailwind.css%22%7D */