$sm-screen: 35.5rem; $md-screen: 48rem; $lg-screen: 64rem; $xl-screen: 80rem;

:root {

--spacer: 1rem;
--spacer-2: calc(var(--spacer) * 2);
--spacer-3: calc(var(--spacer) * 3);

--body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--body-font-size: 16px;
--body-line-height: 1.5;
--body-color: var(--oc-gray-8);
--body-bg: var(--oc-white);

--link-color: var(--oc-orange-8);

--heading-font: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

--code-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
--code-bg: var(--oc-gray-1);

--border-radius: .5em;
--border-color: var(--oc-gray-6);

--sidebar-width: 20rem;
--sidebar-color: var(--oc-gray-4);
--sidebar-bg: var(--oc-gray-7);

}

@media (prefers-color-scheme: dark) {

:root {
  --body-color: var(--oc-gray-4);
  --body-bg: var(--oc-gray-9);

  --link-color: var(--oc-blue-4);

  --code-bg: var(--oc-gray-8);
}

}

@media (max-width: $md-screen) {

:root {
  --sidebar-width: 16rem;
}

}