$font-size: 17px;
$line-height: 1.5;

$code-block--font-size: $font-size - 1;
$code-block--line-height: 1.4;

$content--width: 80ch;
$content--h1--font-size: $font-size + 1;

$subcontent--indent: 4ch;

$container--pad-h: 2rem;
$container--pad-h-sm: 1rem;
$container--pad-v: $line-height * 2rem;

$nav--font-size: $font-size - 1;
$nav--item--spacing: 4ch;
$nav--item--spacing-sm: 3ch;
$nav--item--pad-h: 1ch;
$nav--item--pad-v: 1em;

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

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