:root {
  font-family: "InterVariable", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--wcag-t--variant--weight);
  font-variation-settings:
    "opsz" var(--wcag-t--variant--opsz),
    "wght" var(--wcag-t--variant--weight);
}

html {
  inline-size: 100vw;
  min-block-size: 100vh;
}

body {
  display: grid;
  grid-template-columns: var(--docs--aside--width) 1fr var(--docs--scroll-spy--width);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "aside main -"
    "footer footer footer";

  background-color: var(--docs--background-color);
  background-image: url("../../assets/background-image.svg");
  background-size: 100vw auto;
  background-repeat: repeat-y;

  inline-size: 100vw;
  min-block-size: 100vh;
}

@media screen and (width >= 1366px) {
  body {
    grid-template-rows: var(--docs--header--min-height) 1fr var(--docs--footer--min-height);

    grid-template-areas:
      "header header header"
      "aside main scroll-spy"
      "footer footer footer";
  }
}

a {
  --wcag-f--outline-offset: calc(var(--wcag-f--outline-width) * 2);

  border-radius: 0.4rem;
}
