:root {
  color-scheme: light dark;

  --page-gutter: 0rem;

  &[data-theme='light'] {
    color-scheme: light;
  }

  &[data-theme='dark'] {
    color-scheme: dark;
  }

  @media (width >= 40rem) {
    --page-gutter: calc(var(--spacing) * 8);
  }
}

html {
  scrollbar-color: var(--color-icon-base-tertiary) var(--color-bg-base-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
  overscroll-behavior-y: none;
}

body {
  position: relative;
  background-color: var(--color-bg-base-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-neutral);
  text-wrap: pretty;

  &::before {
    content: '';
    position: absolute;
    inset: 0 var(--page-gutter);
    margin-inline: auto;
    max-inline-size: var(--container-5xl);
    background-color: var(--color-bg-base);
    box-shadow: 0 0 0 1px var(--color-border-base-tertiary);
  }
}

.shell {
  --page-column: 38rem;
  --page-pad: calc(var(--spacing) * 8);
  --page-measure: 38rem;

  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 36);
  position: relative;
  margin-inline: auto;
  max-inline-size: min(
    calc(var(--page-column) + 2 * var(--page-pad)),
    calc(100% - 4 * var(--page-gutter))
  );
  min-block-size: 100dvh;
  padding-inline: var(--page-pad);
  padding-block: calc(var(--spacing) * 24) calc(var(--spacing) * 40);

  @media (width >= 64rem) {
    --page-column: 54rem;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 6);

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 5);
  }

  a {
    color: var(--color-text-base-secondary);
    text-decoration: none;
    transition: color 150ms var(--ease-out);

    &:hover {
      color: var(--color-text-base);
    }

    &[aria-current='page'] {
      font-weight: var(--font-weight-medium);
      color: var(--color-text-base);
    }

    &:focus-visible {
      border-radius: var(--radius-sm);
    }
  }
}

.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-base-tertiary);
  cursor: pointer;
  transition:
    color 150ms ease,
    scale 150ms var(--ease-out);

  &:hover {
    color: var(--color-icon-base-secondary);
  }

  &:active {
    scale: 0.97;
  }

  &:focus-visible {
    outline-offset: 3px;
    border-radius: calc(infinity * 1px);
  }

  &::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(var(--spacing) * 11);
    block-size: calc(var(--spacing) * 11);
    translate: -50% -50%;
  }

  svg {
    inline-size: calc(var(--spacing) * 4);
    block-size: calc(var(--spacing) * 4);
    transition: rotate 500ms var(--ease-in-out-cubic);

    :root[data-theme='dark'] & {
      rotate: 180deg;
    }
  }
}