/* Import dist/tokens.css before this file.
   Type rules only. Components belong to the app. */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
}

.primer {
  color: var(--primer-color-text);
  background: var(--primer-color-canvas);
  font-family: var(--primer-font-body);
  font-size: var(--primer-font-size-body);
  font-weight: var(--primer-font-weight-regular);
  line-height: var(--primer-font-line-height-body);
  font-variant-numeric: tabular-nums;
}

.primer h1,
.primer-display {
  font-family: var(--primer-font-body);
  font-size: var(--primer-font-size-display);
  font-weight: var(--primer-font-weight-display);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.primer h2,
.primer-heading {
  font-size: var(--primer-font-size-heading);
  font-weight: var(--primer-font-weight-display);
  line-height: var(--primer-font-line-height-heading);
  letter-spacing: -0.03em;
  margin: 0;
}

.primer h3,
.primer-title {
  font-size: var(--primer-font-size-large);
  font-weight: var(--primer-font-weight-bold);
  line-height: var(--primer-font-line-height-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

.primer p,
.primer-body {
  font-size: var(--primer-font-size-body);
  font-weight: var(--primer-font-weight-regular);
  line-height: var(--primer-font-line-height-body);
  margin: 0;
}

.primer small,
.primer-small {
  font-size: var(--primer-font-size-small);
  line-height: 1.4;
}

.primer-muted { color: var(--primer-color-muted); }
.primer-subtle { color: var(--primer-color-subtle); }
.primer-accent { color: var(--primer-color-accent); }
.primer-success { color: var(--primer-color-success); }
.primer-warning { color: var(--primer-color-warning); }
.primer-error { color: var(--primer-color-error); }
.primer-info { color: var(--primer-color-info); }

.primer code,
.primer kbd,
.primer-mono {
  font-family: var(--primer-font-mono);
  font-size: var(--primer-font-size-small);
  font-weight: var(--primer-font-weight-regular);
}

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

@media (prefers-reduced-motion: reduce) {
  .primer *,
  .primer *::before,
  .primer *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}