:root {

--gray-000: #f8f9fa;
--gray-100: #f1f3f5;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #868e96;
--gray-700: #495057;
--gray-800: #343a40;
--gray-900: #212529;

--red: #fa5252;
--pink: #e64980;
--grape: #be4bdb;
--purple: #7950f2;
--indigo: #4c6ef5;
--blue: #228be6;
--cyan: #15aabf;
--teal: #12b886;
--green: #40c057;
--yellow: #fab005;
--orange: #fd7e14;

--blue-300: #74c0fc;
--blue-400: #4dabf7;
--yellow-100: #fff3bf;

--body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--body-font-size: 18px;
--body-line-height: 1.5;
--body-color: var(--gray-700);
--body-bg: #fff;

--text-font: Times, "Times New Roman", "Free Serif", "Noto Serif", TimesNewRomanPSMT, "Droid Serif";

--link-color: var(--blue);
--link-hover-color: #1c7ed6;

--heading-color: var(--gray-900);

--border-color: var(--gray-300);
--border-radius: .25rem;

--code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--code-color: var(--grape);
--code-bg: var(--gray-000);

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

}

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

:root {
  --body-color: var(--gray-300);
  --body-bg: var(--gray-800);

  --heading-color: #fff;

  --link-color: var(--blue-300);
  --link-hover-color: var(--blue-400);

  --border-color: rgba(255,255,255,.15);

  --code-bg: var(--gray-900);
}

}

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