/*********
 # 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-blue: rgb(69 212 243);
  --blue: rgb(28 168 239);
  --dark-blue: rgb(63 46 231);
  --lilac: rgb(187 121 245);
  --purple: rgb(197 141 244);

  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: light) {
  :root {
    --background-color: var(--gray7);
    --hr-color: var(--gray1);
    --text-color-primary: var(--gray1);
    --text-color-secondary: var(--gray4);
    --text-color-light: var(--gray5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--gray1);
    --hr-color: var(--gray7);
    --text-color-primary: var(--gray7);
    --text-color-secondary: var(--gray5);
    --text-color-light: var(--gray4);
  }
}

:root {
  --background-color: light-dark(var(--gray7), var(--gray1));
  --hr-color: light-dark(var(--gray1), var(--gray7));
  --text-color-primary: light-dark(var(--gray1), var(--gray7));
  --text-color-secondary: light-dark(var(--gray4), var(--gray5));
  --text-color-light: light-dark(var(--gray5), var(--gray4));
}

:root[color-scheme="dark"] {
  color-scheme: only dark;
}

:root[color-scheme="light"] {
  color-scheme: only light;
}

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

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





/***********
 # GRADIENT
 ***********/

.text-color--gradient {
  background:
    radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
    radial-gradient(circle at 30% 30%, var(--light-blue), var(--blue) 20%, transparent 80%),
    radial-gradient(ellipse at 95% 20%, var(--dark-blue), var(--blue) 70%, transparent 80%),
    radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
    radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
    radial-gradient(ellipse at 50% 50%, var(--dark-blue), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  a[href] {
    color: inherit;
  }
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-color--gradient {
    --color1: rgb(103 128 229);
    --color2: rgb(130 90 227);
    --color3: rgb(135 101 228);
    --color4: rgb(125 115 229);
    --color5: rgb(107 130 230);
    --color6: rgb(77 153 232);
    --color7: rgb(74 136 230);
    --color8: rgb(71 128 228);
    --color9: rgb(65 80 224);
    --color10: rgb(61 58 223);

    span:nth-child(10n + 1) { color: var(--color1); }
    span:nth-child(10n + 2) { color: var(--color2); }
    span:nth-child(10n + 3) { color: var(--color3); }
    span:nth-child(10n + 4) { color: var(--color4); }
    span:nth-child(10n + 5) { color: var(--color5); }
    span:nth-child(10n + 6) { color: var(--color6); }
    span:nth-child(10n + 7) { color: var(--color7); }
    span:nth-child(10n + 8) { color: var(--color8); }
    span:nth-child(10n + 9) { color: var(--color9); }
    span:nth-child(10n)     { color: var(--color10); }
  }
}





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

.color-theme__dracula {
  --background: #282A36;
  --foreground: #f8f8f2;
  --selection: #44475A;
  --comment: #6272A4;
  --red: #ff5555;
  --orange: #ffB86C;
  --yellow: #F1FA8C;
  --green: #50FA7B;
  --purple: #BD93F9;
  --cyan: #8BE9FD;
  --pink: #FF79C6;
}


.codeblock {
  .err {
    color: var(--red);
  }

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

  .line {
    display: flex;
  }

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

  /* keyword: constant */
  /* keyword: declaration */
  /* keyword: pseudo */
  /* keyword: reserved */
  .kc, .kd, .kp, .kr {
    color: var(--orange);
  }

  /* keyword: namespace */
  .kn {
    color: var(--yellow);
  }

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

  /* line highlight */
  .hl {
    background-color: var(--selection);
  }

  /* 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: var(--text-color-secondary);
  }

  /* name: attribute */
  /* name: class */
  /* name: decorator */
  .na, .nc, .nd {
    color: var(--green);
  }

  /* name: constant */
  .no {
    color: var(--cyan);
  }

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

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

  /* name: other */
  .nx {
    color: var(--green);
  }

  /* name: tag */
  .nt {
    color: var(--red);
  }

  /* literal */
  .l {
    color: var(--cyan);
  }

  /* literal: date */
  .ld {
    color: var(--yellow);
  }

  /* literal: string, delimiter */
  /* literal: string */
  /* literal: string, backtick */
  /* literal: string, char */
  .dl, .s, .sb, .sc {
    color: var(--yellow);
  }

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

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

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

  /* operator: word */
  .ow {
    color: var(--red);
  }

  /* literal: string, double */
  /* literal: string, doc */
  /* literal: string, heredoc */
  /* literal: string, interpol */
  /* literal: string, other */
  .s2, .sd, .sh, .si, .sx {
    color: var(--yellow);
  }

  /* literal: string escape */
  .se {
    color: var(--purple);
  }

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

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

  /* comment */
  /* comment: hashbang */
  /* comment: multiline */
  /* comment: single */
  /* comment: special */
  /* comment: preproc */
  /* comment: preproc file */
  .c, .ch, .cm, .c1, .cs, .cp, .cpf {
    color: var(--comment);
  }

  /* generic: deleted */
  .gd {
    color: var(--red);
  }

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

  /* generic: inserted */
  .gi {
    color: var(--green);
  }

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

  /* generic: subheading */
  .gu {
    color: var(--text-color-secondary);
  }
}