@import "tailwindcss";
@import "@nuxt/ui";

@utility text-stroke-* {
  -webkit-text-stroke-width: calc(--value(integer) * 1px);
  -webkit-text-stroke-color: --value(--color-*);
  -webkit-text-stroke-color: --value([*]);
}

@theme {
  --animate-wave: wave 2.5s infinite;
  --font-mono: 'Monaspace Neon', 'ui monaspace', monospace;
  --font-sofia: 'Sofia Sans', 'ui sans-serif', sans-serif;
  --font-sans: 'DM Sans', 'ui sans-serif', sans-serif;

  @keyframes wave {
    0% {
      transform: rotate(0deg);
    }

    10% {
      transform: rotate(14deg);
    }

    20% {
      transform: rotate(-8deg);
    }

    30% {
      transform: rotate(14deg);
    }

    40% {
      transform: rotate(-4deg);
    }

    50% {
      transform: rotate(10deg);
    }

    60%,
    100% {
      transform: rotate(0deg);
    }
  }
}

:root {
  --ui-bg: #f8f8f8;
  --ui-font-family: 'DM Sans', sans-serif;
  transition-duration: 0.7s;
}

.dark {
  --ui-bg: #0f0f0f;
}

.sofia {
  --ui-font-family: 'Sofia Sans', sans-serif;
}