/*
 * Base document styles
 *
 * Global resets are kept minimal. Application-specific rules are scoped
 * beneath the .qive-site class.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.qive-site {
  min-width: 320px;
  color: var(--qive-color-text);
  background:
    radial-gradient(circle at 10% 10%, #f1c98e 0, transparent 27rem),
    radial-gradient(circle at 90% 30%, #d49a6a 0, transparent 26rem),
    var(--qive-sand-100);
  font-family: var(--qive-font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qive-site::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.25;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 32px 32px;
}

.qive-site h1,
.qive-site h2,
.qive-site h3,
.qive-site p {
  margin-top: 0;
}

.qive-site a {
  color: inherit;
}

.qive-site img,
.qive-site svg {
  max-width: 100%;
}

.qive-site button,
.qive-site a {
  -webkit-tap-highlight-color: transparent;
}

.qive-site :focus-visible {
  outline: 3px solid var(--qive-color-accent);
  outline-offset: 4px;
}

.qive-site ::selection {
  color: var(--qive-sand-50);
  background: var(--qive-color-accent);
}

.qive-skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--qive-radius-pill);
  color: var(--qive-sand-50);
  background: var(--qive-brown-900);
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--qive-transition-fast);
}

.qive-skip-link:focus {
  transform: translateY(0);
}