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

/* The base layer is for things like reset rules or default styles applied to plain HTML elements. */
@layer base {
  @font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 400;
    src:
      local(""),
      url("@/assets/fonts/Roobert-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 500;
    src:
      local(""),
      url("@/assets/fonts/Roobert-Medium.woff2") format("woff2");
  }
  @font-face {
    font-family: "Roobert";
    font-style: normal;
    font-weight: 600;
    src:
      local(""),
      url("@/assets/fonts/Roobert-SemiBold.woff2") format("woff2");
  }

  html {
    overflow-y: scroll; /* Avoid width variation */
  }

  html,
  body,
  #__nuxt,
  #__layout {
    @apply min-h-screen w-full;
    @apply bg-gray-50 dark:bg-gray-900;
    @apply font-roobert;
  }

  div,
  span,
  input,
  textarea,
  button,
  select,
  a {
    @apply focus:outline-none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* The components layer is for class-based styles that you want to be able to override with utilities. */
@layer components {
}

/* The utilities layer is for small, single-purpose classes that should always take precedence over any other styles. */
@layer utilities {
  .primary-text {
    @apply text-primary-500 dark:text-primary-400;
  }

  .primary-text-muted {
    @apply text-gray-500 dark:text-gray-400;
  }

  .decorated {
    @apply decoration-primary-500 dark:decoration-primary-400 underline underline-offset-8;
  }
}
