$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;
$container--pad-v-sm: $line-height * 1rem;

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

$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%, 100%);

    //

    --bg-hi: var(--gray0); // Lighter background
    --bg:    var(--gray1); // Background

    --obj:   var(--gray2);

    --fg-hi: var(--gray3); // Faint text
    --fg:    var(--gray4); // Text
    --fg-lo: var(--gray5); // Strong text

    //

    --heading--fg: var(--fg-lo);

    --select--bg: hsla(270, 2%, 100%, .996);
    --select--fg: var(--bg-hi);

    --code--fg: var(--fg-hi);

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

    --link--idle--fg: var(--fg-lo);
    --link--hover--bg: var(--link--idle--fg);
    --link--hover--fg: #000;

    --nav--bg: var(--bg-hi);
    --nav--logo--fg: var(--fg-hi);
    --nav--item--idle--fg: var(--fg);
    --nav--item--hover--fg: var(--fg-lo);
    --nav--item--active--fg: var(--fg-lo);

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

    --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
    --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
    --page--link--hover--bg: var(--page--link--idle--fg);
    --page--link--hover--fg: #000;
}