@import url("./reset.css");
@import url("./variables.css");

body {
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-synthesis-weight: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  transition: background 280ms ease, color 280ms ease;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  border: 0;
  cursor: pointer;
}

.number,
[data-number] {
  direction: ltr;
  font-family: var(--font-family-number);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

* {
  transition-property: background-color, border-color, box-shadow, color;
  transition-duration: 220ms;
  transition-timing-function: ease;
}

.theme-is-changing body {
  animation: themeFade 360ms ease;
}

@keyframes themeFade {
  0% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(0.94);
  }

  100% {
    filter: brightness(1);
  }
}