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

@layer base {
  .dark {
    @apply bg-neutral-950 text-white;
  }
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans.ttf");
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.ttf");
}

/* Generated with https://codepen.io/sosuke/pen/Pjoqqp and used to colorize svg icons
   It recommends prepending brightness(0) saturate(100%) because our icons
   don't come as black.
*/
.filter-neutral-000 {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7492%)
    hue-rotate(304deg) brightness(102%) contrast(103%);
}

.filter-neutral-600 {
  filter: brightness(0) saturate(100%) invert(30%) sepia(20%) saturate(605%)
    hue-rotate(176deg) brightness(98%) contrast(89%);
}

.filter-neutral-700 {
  filter: brightness(0) saturate(100%) invert(58%) sepia(26%) saturate(177%)
    hue-rotate(198deg) brightness(84%) contrast(84%);
}

.filter-neutral-950 {
  filter: brightness(0) saturate(100%) invert(8%) sepia(13%) saturate(1837%)
    hue-rotate(198deg) brightness(99%) contrast(88%);
}

.filter-primary-600 {
  filter: brightness(0) saturate(100%) invert(41%) sepia(51%) saturate(5580%)
    hue-rotate(0deg) brightness(101%) contrast(107%);
}

/* Helper class to set height to 100vh minus current header height */
.min-h-section {
  @apply min-h-[calc(100vh-72px)] md:min-h-[calc(100vh-76px)];
}