/**
 * These colors are from the Horizon Theme.
 * https://horizontheme.netlify.app/
 */
:root {
  /* "Dark" */
  --horizon-lavender: #B877DB;
  --horizon-turquoise: #25B2BC;
  --horizon-cranberry: #E95678;
  --horizon-apricot: #F09383;
  --horizon-rosebud: #FAB795;
  --horizon-tacao: #FAC29A;

  /* "Light" */
  --horizon-amethyst: #8931B9;
  --horizon-elm: #1D8991;
  --horizon-crimson: #DA103F;
  --horizon-thunderbird: #DC3318;
  --horizon-tango: #F6661E;
  --horizon-jaffa: #F77D26;
}

.theme-light, .theme-dark {
  --horizon-shadow: #16161C;
  --horizon-border: #1A1C23;
  --horizon-background: #1C1E26;
  --horizon-background-alt: #232530;
  --horizon-accent: #2E303E;
  --horizon-accent-alt: #6C6F93;
  --horizon-accent: #E9436F;
  --horizon-secondary-accent-alt: #E95379;
  --horizon-negative: #F43E5C;
  --horizon-positive: #09F7A0;
  --horizon-warning: #27D796;
  --horizon-modifier: #21BFC2;
  --horizon-tertiary-accent: #FAB28E;

  --code-bg: var(--horizon-background-alt);
  --code-variable: var(--horizon-cranberry);
  --code-param: var(--horizon-apricot);
  --code-class: var(--horizon-yellow);
  --code-tag: var(--horizon-accent-alt);
  --code-name: var(--horizon-yellow);
  --code-number: var(--horizon-warning);
  --code-punctuation: #aaa;
  --code-regex: #be4678;
  --code-function: var(--horizon-turquoise);
  --code-builtin: var(--horizon-lavender);
  --code-literal: var(--horizon-cranberry);
  --code-string: var(--horizon-tacao);
  --code-keyword: var(--horizon-lavender);
  --code-highlight-bg: var(--horizon-background);

  /* overrides, for readability */
  --horizon-amethyst: #8931B9;
  --horizon-elm: #1D8991;
  --horizon-crimson: #DA103F;
  --horizon-thunderbird: #DC3318;
  --horizon-tango: #F6661E;

  --horizon-blue: #3FC6DE;
  --horizon-cyan:#6BE6E6;
  --horizon-green: #3FDAA4;
  --horizon-magenta: #F075B7;
  --horizon-red: #EC6A88;
  --horizon-yellow: #bb8367;
}

.prose {
  max-width: 1000px;
}

.prose pre {
  background: var(--code-bg);
  color: #ccc;
  margin-top: 0px;
}
.prose pre code.hljs,
.hljs {
  background: var(--code-bg);
  display: block;
  font-family: ui-monospace,
             Menlo, Monaco,
             "Cascadia Mono", "Segoe UI Mono",
             "Roboto Mono",
             "Oxygen Mono",
             "Ubuntu Monospace",
             "Source Code Pro",
             "Fira Mono",
             "Droid Sans Mono",
             "Courier New", monospace;
  line-height: 1.25rem;
  font-size: 0.85rem;
}

.hljs-comment { color: #777; }
.hljs-quote { color: #655f6d; }
.hljs-operator,
.hljs-punctuation { color: var(--code-punctuation); }

.hljs-variable,
.hljs-template-variable {
  color: var(--code-variable);
}
.hljs-params { color: var(--code-param); }
.hljs-attribute { color: var(--code-param); }

.hljs-class { color: var(--code-class); }
.hljs-tag { color: var(--code-tag); }
.hljs-title { color: var(--code-name); }
.hljs-name { color: var(--code-name); }
.hljs-number { color: var(--code-number); }

.hljs-regexp,
.hljs-link,
.hljs-selector-id,
.hljs-selector-class {
  color: var(--code-regex);
}

.hljs-function { color: var(--code-function); }
.hljs-built_in,
.hljs-builtin-name { color: var(--code-builtin); }

.hljs-meta,
.hljs-literal,
.hljs-type {
  color: var(--code-literal);
}

.hljs-string,
.hljs-symbol,
.hljs-code,
.hljs-bullet {
  color: var(--code-string);
}

.hljs-keyword,
.hljs-selector-tag {
  color: var(--code-keyword);
}

.hljs-section {
  color: var(--horizon-lavender);
}

.hljs-deletion,
.hljs-addition {
  color: var(--code-highlight-bg);
  display: inline-block;
  width: 100%;
}

.hljs-deletion { background-color: var(--horizon-negative); }
.hljs-addition { background-color: var(--horizon-positive); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }