:root {
  /* Shared Variables */
  --font-family: Consolas, Monaco, "Andale Mono", monospace;
  --line-height: 1.5;
  --tab-size: 4;
  --padding-inline-code: 0.1em;
  --border-radius-inline-code: 0.3em;

  /* Default Light Theme Variables */
  --fg1: #3c3836;
  --fg0: #282828;
  --fg4: #7c6f64;
  --red2: #9d0006;
  --yellow2: #b57614;
  --purple2: #8f3f71;
  --green2: #797403;
  --bg0_h: #f9f5d7;
  --bg4: #a89984;

  --code-bg: var(--bg0_h);
  --code-fg: var(--fg1);
  --selection-bg: var(--bg4);
  --selection-fg: var(--fg0);
}

html[data-theme="dark"] {
  /* Dark Theme Overrides */
  --fg1: #ebdbb2;
  --fg0: #fbf1c7;
  --fg4: #a89984;
  --red2: #fb4934;
  --yellow2: #fabd2f;
  --purple2: #d3869b;
  --green2: #b8bb26;
  --bg0_h: #1d2021;
  --bg4: #7c6f64;

  --code-bg: var(--bg0_h);
  --code-fg: var(--fg1);
  --selection-bg: var(--bg4);
  --selection-fg: var(--fg0);
}

/* Base Styles */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--code-fg);
  font-family: var(--font-family);
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: var(--line-height);

  -moz-tab-size: var(--tab-size);
  -o-tab-size: var(--tab-size);
  tab-size: var(--tab-size);

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  color: var(--selection-fg);
  background: var(--selection-bg);
}

/* Code Blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  background: var(--code-bg);
}

:not(pre)>code[class*="language-"] {
  padding: var(--padding-inline-code);
  border-radius: var(--border-radius-inline-code);
  background: var(--code-bg);
}

/* Token Styles */
.token.comment,
.token.prolog,
.token.cdata {
  color: var(--fg4);
}

.token.delimiter,
.token.boolean,
.token.keyword,
.token.selector,
.token.important,
.token.atrule {
  color: var(--red2);
}

.token.operator,
.token.punctuation,
.token.attr-name {
  color: var(--fg4);
}

.token.tag,
.token.tag .punctuation,
.token.doctype,
.token.builtin {
  color: var(--yellow2);
}

.token.entity,
.token.number,
.token.symbol {
  color: var(--purple2);
}

.token.property,
.token.constant,
.token.variable {
  color: var(--red2);
}

.token.string,
.token.char {
  color: var(--green2);
}

.token.attr-value,
.token.attr-value .punctuation {
  color: var(--fg4);
}

.token.url {
  color: var(--green2);
  text-decoration: underline;
}

.token.function {
  color: var(--yellow2);
}

.token.regex {
  background: var(--green2);
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.inserted {
  background: var(--fg4);
}

.token.deleted {
  background: var(--red2);
}