* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.88) 0%, rgba(247, 245, 238, 0.96) 42%, var(--color-page) 100%),
    radial-gradient(circle at 10% -10%, rgba(40, 102, 110, 0.12), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(138, 111, 61, 0.08), transparent 24rem);
}

:root[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.94) 0%, rgba(21, 31, 45, 0.98) 54%, var(--color-page) 100%),
    radial-gradient(circle at 10% -10%, rgba(143, 203, 210, 0.1), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(216, 189, 121, 0.08), transparent 24rem);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  border-radius: var(--radius-sm);
  background: var(--color-heading);
  color: white;
  padding: 0.65rem 1rem;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 1rem;
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-heading);
}