:root {
  /* Light theme colors for syntax highlighting */
  --light-text-primary: hsl(228, 18%, 45%);
  --light-text-secondary: hsl(101, 30%, 36%);
  --light-text-tertiary: hsl(228, 16%, 65%);
  --light-punctuation: hsl(227, 18%, 45%);
  --light-selection-bg: hsl(230, 39%, 91%);
  --light-border-primary: hsl(230, 39%, 91%);
  --light-border-dotted: hsl(229, 37%, 20%);

  /* Token colors */
  --light-number: hsl(25, 66%, 41%);
  --light-property: hsl(38, 60%, 32%);
  --light-tag: hsl(207, 62%, 43%);
  --light-string: hsl(194, 70%, 35%);
  --light-selector: hsl(229, 50%, 60%);
  --light-keyword: hsl(49, 50%, 34%);
  --light-important: hsl(14, 71%, 46%);

  /* Highlight colors */
  --light-highlight-bg: hsla(228, 16%, 50%, 0.2);
  --light-highlight-gradient-start: hsla(228, 16%, 50%, 0.2);
  --light-highlight-gradient-end: hsla(228, 16%, 50%, 0);
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: Monaco, Menlo, Courier, "Courier New", "Ubuntu Mono", monospace;
  font-size: 14px;
  text-shadow: none;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  color: var(--light-text-primary);
}
pre > code[class*="language-"] {
  font-size: 1em;
}
code[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
pre[class*="language-"]::-moz-selection {
  text-shadow: none;
  background: var(--light-selection-bg);
}
code[class*="language-"] ::selection,
code[class*="language-"]::selection,
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection {
  text-shadow: none;
  background: var(--light-selection-bg);
}
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: var(--light-text-secondary);
}
.token.punctuation {
  color: var(--light-punctuation);
}
.token.namespace {
  opacity: 0.7;
}
.token.boolean,
.token.number,
.token.operator {
  color: var(--light-number);
}
.token.property {
  color: var(--light-property);
}
.token.tag {
  color: var(--light-tag);
}
.token.string {
  color: var(--light-string);
}
.token.selector {
  color: var(--light-selector);
}
.token.attr-name {
  color: var(--light-number);
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.url {
  color: var(--light-string);
}
.token.attr-value,
.token.control,
.token.directive,
.token.keyword,
.token.unit {
  color: var(--light-keyword);
}
.token.atrule,
.token.regex,
.token.statement {
  color: var(--light-string);
}
.token.placeholder,
.token.variable {
  color: var(--light-tag);
}
.token.deleted {
  text-decoration: line-through;
}
.token.inserted {
  border-bottom: 1px dotted var(--light-border-dotted);
  text-decoration: none;
}
.token.italic {
  font-style: italic;
}
.token.bold,
.token.important {
  font-weight: 700;
}
.token.important {
  color: var(--light-important);
}
.token.entity {
  cursor: help;
}
pre > code.highlight {
  outline: 0.4em solid var(--light-important);
  outline-offset: 0.4em;
}
.line-numbers.line-numbers .line-numbers-rows {
  border-right-color: var(--light-border-primary);
}
.line-numbers .line-numbers-rows > span:before {
  color: var(--light-text-tertiary);
}
.line-highlight.line-highlight {
  background: var(--light-highlight-bg);
  background: -webkit-linear-gradient(
    left,
    var(--light-highlight-gradient-start) 70%,
    var(--light-highlight-gradient-end)
  );
  background: linear-gradient(
    to right,
    var(--light-highlight-gradient-start) 70%,
    var(--light-highlight-gradient-end)
  );
}