pages/app.css
@import "../src/assets/styles/reset.css";
@import "../src/assets/styles/variables.css";
@import "../src/assets/fonts/sneak.css";

body {
  font-family: "Sneak", Arial, Helvetica, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  background: var(--color-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "calt", "ss03";
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-background), 0 0 0 6px var(--color-primary);
}

a {
  color: var(--color-text);
  text-decoration: none;
}

hr {
  border: none;
  border-top: 1px solid var(--color-grayscale-light);
}

::selection {
  color: var(--color-primary);
}

.fade-enter {
  opacity: 0;
  transform: translateY(var(--spacing-32));
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity ease-out 0.4s, transform ease-out 0.4s;
}

.fade-exit {
  opacity: 1;
  transform: translateY(0);
}

.fade-exit.fade-exit-active {
  opacity: 0;
  transform: translateY(var(--spacing-48));
}
