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

:root {

--body-font-size: 16px;
--body-line-height: 1.5;
--body-color:       var(--oc-gray-9);
--body-color-light: var(--oc-gray-6);
--body-bg:          var(--oc-white);
--link-color:       var(--oc-blue-9);
--heading-color:    var(--oc-black);

--body-font: Noto Sans,Helvetica,Arial,sans-serif;
--brand-title-font: Noto Sans,Helvetica,Arial,sans-serif;
--heading-font: Noto Sans,Helvetica,Arial,sans-serif;
--code-font: Noto Sans,Helvetica,Arial,sans-serif;

--sidebar-color: var(--oc-gray-4);

--message-color: var(--oc-white);
--message-bg:    var(--oc-yellow-9);

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

--code-bg:       var(--oc-gray-1);

}

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

:root {
  --body-color:       var(--oc-gray-4);
  --body-color-light: var(--oc-gray-6);
  --body-bg:          var(--oc-gray-9);
  --link-color:       var(--oc-blue-4);
  --heading-color:    var(--oc-white);

  --message-color: var(--oc-gray-9);
  --message-bg:    var(--oc-yellow-4);

  --border-color:  var(--oc-gray-7);

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

}