$font-size: 16px;
$content-font-size: $font-size + 1;
$content-h1-font-size: $content-font-size + 1;

$line-height: 1.5;
$code-block-line-height: 1.4;

$content-width: 75ch;

$nav-item-spacing: 4ch;
$nav-item-spacing-sm: 3ch;
$nav-item-pad-h: 1ch;
$nav-item-pad-v: 1rem;

$page-item-prefix-max-chars: 3ch;
$page-item-prefix-pad: 2ch;
$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;

$subcontent-indent: 4ch;

$breakpoints: (
  xs: 380px,
  sm: 700px,
);

:root {
  --gray0: hsl(270, 0%, 7%);
  --gray1: hsl(270, 0%, 10%);
  --gray2: hsl(270, 1%, 29%);
  --gray3: hsl(270, 2%, 54%);
  --gray4: hsl(270, 2%, 73%);
  --gray5: hsl(270, 2%, 83%);
  --gray6: hsl(270, 2%, 100%);

  --bg-minus: var(--gray0);
  --bg: var(--gray1);
  --bg-plus: var(--gray2);
  --fg-minus: var(--gray3);
  --fg: var(--gray4);
  --fg-plus: var(--gray5);
  --fg-plus-2: var(--gray6);

  --heading-fg: var(--fg-plus-2);

  --select-bg: hsla(270, 2%, 100%, 0.996);
  --select-fg: var(--bg-minus);

  --code-fg: var(--fg-minus);
  --code-block-fg: var(--fg-minus);

  --page-item-prefix-fg: var(--fg-minus);

  --link-idle-fg: var(--fg-plus-2); //#90acf2;
  --link-visited-fg: var(--fg-plus); //#bc9df2;
  --link-hover-bg: var(--fg-plus-2);
  --link-hover-fg: var(--bg-minus);

  --nav-bg: var(--bg-minus);
  --nav-logo-fg: var(--fg-minus);
  --nav-item-idle-fg: var(--fg);
  --nav-item-hover-fg: var(--fg-plus-2);
  --nav-item-active-fg: var(--fg-plus-2);
}