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

:root {

--body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--body-font-size: 16px;
--body-line-height: 1.5;

--border-radius: .4em;

--heading-font: Georgia, "Times New Roman", Times, "Palatino Linotype", "Book Antiqua", Palatino, serif;
--code-font: "Source Code Pro", Menlo, "Lucida Console", Monaco, "Courier New", Courier, monospace;

--spacer: 1rem;
--spacer-2: 2rem;
--spacer-3: 3rem;

/*  Colors
 *  ─────────────────────────────────── */

--body-bg: var(--oc-white);
--body-fg: var(--oc-gray-0);
--code-bg: var(--oc-gray-1);

--border-color: rgb(var(--oc-gray-5-rgb), .5);
--body-color-light: var(--oc-gray-6);
--body-color: var(--oc-gray-9);
--heading-color: var(--oc-black);

--link-color-light: var(--oc-blue-6);
--link-color: var(--oc-blue-9);

--mark-color: var(--oc-yellow-9);

}

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

:root {
  --body-bg: #121212;
  --body-fg: var(--oc-gray-9);
  --code-bg: var(--oc-gray-8);

  --border-color: rgb(var(--oc-gray-7-rgb), .5);
  --body-color-light: var(--oc-gray-6);
  --body-color: var(--oc-gray-4);
  --heading-color: var(--oc-white);

  --link-color-light: var(--oc-cyan-6);
  --link-color: var(--oc-cyan-4);

  --mark-color: var(--oc-yellow-4);
}

}