@use 'tailwindcss';

@theme {
  --font-saira: 'Saira', sans-serif;
}

@font-face {
  font-family: 'Saira';
  src: url('/fonts/Saira-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Saira';
  src: url('/fonts/Saira-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Saira';
  src: url('/fonts/Saira-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Saira';
  src: url('/fonts/Saira-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@variant dark (&:where(.dark, .dark *));

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

html {
  scroll-behavior: smooth;
}