/* Importera tokens från tokens.css - alla design tokens definieras där */
@import './tokens.css';
@import 'tailwindcss';

@layer base {
  html,
  body,
  #app {
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  h1,
  .h1 {
    @apply font-heading text-2xl sm:text-4xl lg:text-6xl font-extrabold mb-3 mt-0;
  }
  h2,
  .h2 {
    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-2;
  }
  .h2--small {
    @apply font-heading text-xl font-extrabold mt-4 mb-2;
  }

  h3,
  .h3 {
    @apply font-heading text-xl font-extrabold mt-4 mb-2;
  }

  .h3--small {
    @apply font-heading text-lg font-extrabold mt-4 mb-2;
  }
  h1:focus,
  h2:focus,
  h3:focus {
    @apply focus:outline-0;
  }
  .label {
    @apply font-bold mb-2 tracking-wide;
  }
  p {
    @apply mb-4;
  }
  li:not(:last-child) {
    @apply mb-2;
  }
  .link,
  .html a {
    @apply text-blue-600 hover:text-blue-700 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 cursor-pointer;
  }
  .link:active,
  .html a:active {
    @apply text-blue-800;
  }

  .capitalize-first::first-letter {
    text-transform: uppercase;
  }
}

@layer utilities {
  /** Override browser background color when autocomplete field */
  input:not(input[type='checkbox'], input[type='radio']),
  textarea {
    box-shadow: 0 0 0 1000px #fff inset !important;
  }
  /** Style active router link in main nav */
  .nav-items .router-link-active {
    @apply bg-blue-100 text-blue-700 font-bold;
  }

  #navMenu select {
    @apply focus-visible:outline-dashed focus-visible:outline-2! focus-visible:outline-offset-4! focus-visible:outline-white-solid! focus:border-transparent!;
  }

  fds-button.fds-button--primary .fds-button__el,
  fds-button.fds-button--secondary .fds-button__el {
    @apply md:min-w-[120px]!;
  }

  /* Reverse spin utility for spinners */
  @keyframes spin-reverse {
    to {
      transform: rotate(-360deg);
    }
  }
  .animate-spin-reverse {
    animation: spin-reverse 1s linear infinite;
  }
}

/* FdsDrawer slide transitions (global, outside layers so consumers always get them) */
.fds-drawer-enter-active,
.fds-drawer-leave-active {
  transition: visibility 280ms;
}

.fds-drawer-enter-active .fds-drawer-inner {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fds-drawer-leave-active .fds-drawer-inner {
  transition: transform 180ms cubic-bezier(0.4, 0, 1, 1);
}

.fds-drawer-enter-from .fds-drawer-inner,
.fds-drawer-leave-to .fds-drawer-inner {
  transform: translateY(100%);
}

.fds-drawer-enter-active .fds-drawer-backdrop,
.fds-drawer-leave-active .fds-drawer-backdrop {
  transition: opacity 280ms ease;
}

.fds-drawer-leave-active .fds-drawer-backdrop {
  transition-duration: 180ms;
}

.fds-drawer-enter-from .fds-drawer-backdrop,
.fds-drawer-leave-to .fds-drawer-backdrop {
  opacity: 0;
}

@media (min-width: 588px) {
  .fds-drawer-enter-from .fds-drawer-inner,
  .fds-drawer-leave-to .fds-drawer-inner {
    transform: translateX(100%);
  }
}