@import "./tailwind.css";

/* Map next/font CSS variables to handy classes */
.font-inter {
  font-family:
    var(--font-inter),
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Apple Color Emoji",
    "Segoe UI Emoji";
}

.font-bricolage-grotesque {
  font-family:
    var(--font-bricolage-grotesque),
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
}

.font-space-grotesk {
  font-family:
    var(--font-space-grotesk),
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
}

/* Set default body text face */
html,
body {
  font-family:
    var(--font-inter),
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
}

body {
  background-color: black;
  min-height: 100vh;
}

/* Skip link: parked above the viewport until focused. */
.skip-to-content {
  position: absolute;
  left: var(--spacing-scale-016);
  top: var(--spacing-scale-016);
  z-index: 100;
  padding: var(--spacing-scale-012) var(--spacing-scale-016);
  border-radius: var(--radius-measures-radius-full);
  background-color: var(--color-surface-inverse-primary);
  color: var(--color-content-inverse-primary);
  text-decoration: none;
  outline: none;
  cursor: pointer;
  box-shadow:
    0 0 0 2px var(--color-border-default-primary),
    0 0 0 4px var(--color-border-invert-primary);
  transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
}