{{/*
  colors.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}




/*********
 # COLORS
 *********/

:root {
  --gray1: rgb(14 16 27);
  --gray2: rgb(28 33 49);
  --gray3: rgb(52 59 82);
  --gray4: rgb(87 94 120);
  --gray5: rgb(138 144 166);
  --gray6: rgb(200 204 217);
  --gray7: rgb(249 251 255);

  --light: var(--gray7);
  --dark: var(--gray1);

  --background-color: var(--light);
  --hr-color: var(--dark);
  --text-color: var(--dark);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Reverse the grayscale ramp in dark mode. */
    --gray7: rgb(17 19 28);
    --gray6: rgb(28 32 48);
    --gray5: rgb(53 59 82);
    --gray4: rgb(86 96 121);
    --gray3: rgb(139 144 164);
    --gray2: rgb(206 207 214);
    --gray1: rgb(255 253 249);

    --background-color: var(--dark);
    --hr-color: var(--light);
    --text-color: var(--light);
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

hr {
  border: 0;
  border-top: 1pt solid var(--hr-color);
  color: var(--hr-color);
}

.content {
  .heading__anchor {
    color: var(--gray5);
    transition: 1s color;
  }

  .heading__anchor:hover {
    color: var(--text-color);
  }
}





/**********************
 # SYNTAX HIGHLIGHTING
 **********************/

.content {
  .codeblock {
    --blue: rgb(28 168 239);
    --purple: rgb(197 141 244);
    --orange: rgb(from rgb(255 171 131) calc(r * 0.9) calc(g * 0.9) calc(b * 0.9));
    --green: #77c881;
    --yellow: rgb(248 232 93);

    color: var(--gray2);

    --background-color-factor: 0.95;
    background-color: #edeff4;

    border: 1px solid var(--gray6);

    .err {
      color: #960050;
      background-color: #1e0010
    }

    /* line link */
    .lnlinks {
      outline: none;
      text-decoration: none;
      color: inherit;
    }

    .line {
      display: flex;
    }

    /* keyword */
    .k {
      color: var(--blue);
    }

    /* keyword: constant */
    .kc {
      color: #66d9ef;
    }

    /* keyword: declaration */
    .kd {
      color: #66d9ef
    }

    /* keyword: namespace */
    .kn {
      color: #f92672
    }

    /* keyword: pseudo */
    .kp {
      color: #66d9ef
    }

    /* keyword: reserved */
    .kr {
      color: #66d9ef
    }

    /* keyword: type */
    .kt {
      color: var(--blue);
      font-weight: bolder;
    }

    /* line highlight */
    .hl {
      background-color: #3c3d38
    }

    /* line numbers */
    .ln {
      white-space: pre;
      -webkit-user-select: none;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #7f7f7f;
    }

    /* NameAttribute */
    .na {
      color: #a6e22e;
    }

    /* NameClass */
    .nc {
      color: #a6e22e;
    }

    /* NameConstant */
    .no {
      color: #66d9ef;
    }

    /* name: decorator */
    .nd {
      color: #a6e22e;
    }

    /* name: exception */
    .ne {
      color: var(--green);
      font-weight: bolder;
    }

    /* NameFunction */
    .nf {
      color: var(--green);
    }

    /* NameOther */
    .nx {
      color: #a6e22e;
    }

    /* NameTag */
    .nt {
      color: #f92672;
    }

    /* Literal */
    .l {
      color: #ae81ff;
    }

    /* LiteralDate */
    .ld {
      color: #e6db74;
    }

    /* LiteralString */
    .s {
      color: #e6db74;
    }

    /* LiteralStringBacktick */
    .sb {
      color: #e6db74;
    }

    /* LiteralStringChar */
    .sc {
      color: #e6db74;
    }

    /* LiteralStringDelimiter */
    .dl {
      color: #e6db74;
    }

    /* LiteralNumberIntegerLong */
    .il {
      color: #ae81ff;
    }

    /* literal: number */
    /* literal: number, bin */
    /* literal: number, float */
    /* literal: number, hex */
    /* literal: number, integer */
    .m, .mb, .mf, .mh, .mi {
      color: var(--purple);
      font-weight: bolder;
    }

    /* LiteralNumberOct */
    .mo {
      color: #ae81ff;
    }

    /* name: built-in */
    .nb {
      color: var(--green);
    }

    /* Operator */
    .o {
      color: var(--orange);
    }

    /* OperatorWord */
    .ow {
      color: #f92672;
    }

    /* LiteralStringDoc */
    .sd {
      color: #e6db74;
    }

    /* LiteralStringDouble */
    .s2 {
      color: #e6db74;
    }

    /* LiteralStringEscape */
    .se {
      color: #ae81ff;
    }

    /* LiteralStringHeredoc */
    .sh {
      color: #e6db74;
    }

    /* LiteralStringInterpol */
    .si {
      color: #e6db74;
    }

    /* LiteralStringOther */
    .sx {
      color: #e6db74;
    }

    /* literal: string, regex */
    .sr {
      color: var(--green);
    }

    /* literal: string, affix */
    /* literal: string, single */
    /* literal: string, symbol */
    .sa, .s1, .ss {
      color: var(--yellow);
    }

    /* Comment */
    .c {
      color: #75715e;
    }

    /* CommentHashbang */
    .ch {
      color: #75715e;
    }

    /* CommentMultiline */
    .cm {
      color: #75715e;
    }

    /* CommentSingle */
    .c1 {
      color: #75715e;
    }

    /* CommentSpecial */
    .cs {
      color: #75715e;
    }

    /* CommentPreproc */
    .cp {
      color: #75715e;
    }

    /* CommentPreprocFile */
    .cpf {
      color: #75715e;
    }

    /* GenericDeleted */
    .gd {
      color: #f92672;
    }

    /* GenericEmph */
    .ge {
      font-style: italic;
    }

    /* GenericInserted */
    .gi {
      color: #a6e22e;
    }

    /* GenericStrong */
    .gs {
      font-weight: bold;
    }

    /* GenericSubheading */
    .gu {
      color: #75715e;
    }
  }
}