:root {

    --black:                    hsl(  0,   0%,   0%);
    --grey-0:                   hsl(  0,   0%,   6%);
    --grey-1:                   hsl(  0,   0%,   8%);
    --grey-2:                   hsl(  0,   0%,  10%);
    --grey-3:                   hsl(  0,   0%,  12%);
    --grey-4:                   hsl(  0,   0%,  14%);
    --grey-5:                   hsl(  0,   0%,  16%);
    --white:                    hsl(360, 100%, 100%);

    --tone-one:                 hsl(160,  50%,  40%);
    --tone-one-bright:          hsl(160,  50%,  50%);
    --tone-one-brighter:        hsl(160,  50%,  60%);
    --tone-one-dark:            hsl(160,  50%,  30%);
    --tone-one-darker:          hsl(160,  50%,  20%);

    --text:                     hsl(  0,   0%,  60%);
    --text-bright:              hsl(  0,   0%,  90%);
    --text-brighter:            hsl(  0,   0%, 100%);
    --text-dark:                hsl(  0,   0%,  50%);
    --text-darker:              hsl(  0,   0%,  40%);

    --border-main:              1px solid var(--grey-2);
    --border-main-bright:       1px solid var(--grey-3);
    --border-tone-one:          1px dashed var(--tone-one);
    --border-tone-one-dark:     1px dashed var(--tone-one-dark);
    --border-transparent:       1px solid transparent;

    --author:                   var(--text);

    --link:                     var(--tone-one);
    --link-current:             var(--tone-one-bright);
    --link-visited:             var(--tone-one);

    --link-hover:               var(--text-bright);
    --link-hover-border:        none;

    --link-focus:               none;
    --link-focus-border:        none;

    --link-active:              none;
    --link-active-border:       none;

    --transition:               all 0.2s ease-in-out;
    --transition-quick:         all 0.15s ease-in-out;
    --transition-slow:          all 0.4s ease-in-out;

    --font-family-monospace: "Iosevka SS10", "Iosevka", "Consolas", "monaco", monospace;
    --render-mode: optimizeLegibility;

}