:root {
  /* grid */
  --grid-container-width: 83.4%;

  /* spacing */
  --spacing-xxl: 48px;
  --spacing-xl: 32px;
  --spacing-l: 24px;
  --spacing-m: 12px;
  --spacing-s: 8px;
  --spacing-xs: 4px;

  /* colors */
  color-scheme: light dark;

  --light-color: #fff;
  --light-link: #e6e6e6;
  --light-main-link: #ea998f;
  --dark-color: #0e0e0e;
  --dark-link: #3f3f3f;
  --dark-main-link: #d73220;

  /* Spectrum 2 Colors */
  --s2-cyan-800: #0086b4;
  --s2-cyan-1300: #00394e;
  --s2-orange-600: #f68511;
  --s2-orange-700: #e86a00;
  --s2-gray-50: #f8f8f8;
  --s2-gray-75: #f3f3f3;
  --s2-gray-100: #e9e9e9;
  --s2-gray-200: #e1e1e1;
  --s2-gray-300: #dadada;
  --s2-gray-400: #c6c6c6;
  --s2-gray-500: #8f8f8f;
  --s2-gray-600: #717171;
  --s2-gray-700: #505050;
  --s2-gray-800: #292929;
  --s2-green-200: #d7f7e1;
  --s2-green-300: #adeec5;
  --s2-green-600: #2fb880;
  --s2-green-700: #0ba45d;
  --s2-green-900: #05834e;
  --s2-green-1100: #025d3c;
  --s2-blue-200: #e5f0fe;
  --s2-blue-700: #5989ff;
  --s2-blue-900: #3b63fb;
  --s2-blue-1000: #274dea;
  --s2-blue-1200: #1532ad;
  --s2-blue-1300: #10288c;
  --s2-blue-1400: #0c1f69;
  --s2-red-200: #ffebe8;
  --s2-red-300: #ffd6d1;
  --s2-red-800: #ea3829;
  --s2-red-900: #d73220;
  --s2-red-1000: #b40000;
  --s2-yellow-100: #fff8cc;
  --s2-yellow-600: #d29500;

  /* fonts */
  --font-family: avenir-next-lt-pro, "Trebuchet MS", sans-serif;

  /* headings */
  --heading-font-size-xxl: 32.44px;
  --heading-font-size-xl: 28.83px;
  --heading-font-size-l: 25.63px;
  --heading-font-size-m: 22.78px;
  --heading-font-size-s: 20.25px;
  --heading-font-size-xs: 18px;
  --heading-line-height: 1.15;

  /* body */
  --body-font-size-xxxl: 25px;
  --body-font-size-xxl: 22px;
  --body-font-size-xl: 20px;
  --body-font-size-l: 18px;
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;
  --body-line-height: 1.6;

  /* misc */
  --header-height: 94px; /* (36 + 36 + 22) */
}

body {
  margin: 0;
  background-color: light-dark(var(--light-color), var(--dark-color));
  color: light-dark(var(--dark-color), var(--light-color));
  font-family: var(--font-family);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);

  a {
    text-decoration: none;
    color: light-dark(var(--dark-color), var(--light-link));
  }

  &.light-theme {
    color-scheme: light;
  }

  &.dark-theme {
    color-scheme: dark;
  }
}

header {
  height: var(--header-height);
}

main {
  margin: 0 32px;
  word-break: break-word;

  a {
    color: light-dark(var(--dark-main-link), var(--light-main-link));
  }
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
}

li {
  margin-block: 1em 1em;
}

pre {
  overflow: scroll;
}

.docket-site-nav {
  display: none;
}

.docket-page-nav {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--heading-line-height);
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

h1:first-child {
  margin-top: 12px;
}

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

img {
  max-width: 100%;
  width: auto;
  height: auto;
}


/* sections */
.section {
  display: block;
}

.default-content {
  > h2 {
    position: relative;
    margin-block-end: 1em;

    &::after {
      display: block;
      content: "";
      position: absolute;
      bottom: -12px;
      left: 0;
      right: 0;
      height: 2px;
      background: light-dark(var(--s2-gray-300), var(--s2-gray-800));
      border-radius: 1px;
    }
  }

  img {
    width: 100%;
    height: auto;
  }
}

.sitenav,
.pagenav {
  display: none;
}

@media (width >= 600px) {

}

@media (width >= 900px) {
  body {
    &.docs-template {
      display: grid;
      grid-template:
        "sitenav header header" auto
        "sitenav main pagenav" 1fr
        "sitenav footer footer" auto / 300px minmax(0, 1fr) 300px;
      justify-content: start;
      min-height: 100vh;

      header {
        grid-area: header;
      }

      .sitenav {
        display: block;
        grid-area: sitenav;
        background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 5%));
      }

      main {
        grid-area: main;
        margin: 0 72px;
      }

      .pagenav {
        display: block;
        grid-area: pagenav;
      }

      footer {
        grid-area: footer;
      }
    }
  }
}

@media (width >= 1440px) {
  :root {
    --grid-container-width: 1200px;
  }
}

main > div,
div[data-status] {
  display: none;
}