$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);

// https://github.com/necolas/normalize.css/issues/665
--body-font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--body-font-size: 16px;
--body-line-height: 1.5;

--border-radius: .5em;

// https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
--code-font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

/**
 * Color
 */
--body-bg-color: var(--oc-white);
--body-color: var(--oc-gray-9);
--code-bg-color: var(--oc-gray-1);
--heading-color: var(--oc-black);
--border-color: var(--oc-gray-4);
--link-color: var(--oc-blue-9);
--link-color-rgb: var(--oc-blue-9-rgb);
--link-hover-color: var(--oc-blue-7);
--info-color: var(--oc-green-9);
--warning-color: var(--oc-yellow-9);
--danger-color: var(--oc-red-9);

}

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

:root {
  /**
   * Color
   */
  --body-bg-color: var(--oc-gray-9);
  --body-color: var(--oc-gray-4);
  --code-bg-color: var(--oc-gray-7);
  --heading-color: var(--oc-white);
  --border-color: var(--oc-gray-7);
  --link-color: var(--oc-cyan-4);
  --link-color-rgb: var(--oc-cyan-4-rgb);
  --link-hover-color: var(--oc-cyan-6);
  --info-color: var(--oc-green-1);
  --warning-color: var(--oc-yellow-1);
  --danger-color: var(--oc-red-1);
}

}