:root {
  --grey-highlight: #f0f0f0;
  --pink-highlight: oklch(74.26% 0.1809 352.82);
  --purple-highlight: oklch(79.67% 0.1809 314.48);
  --green-highlight: oklch(0.86 0.1855 155.65);
  --darkyellow-highlight: oklch(0.89 0.1855 92.12);
  --red-highlight: oklch(0.51 0.1921 28.59);
  --gold-highlight: oklch(0.793 0.1921 55.06);
  --salmon-highlight: oklch(82.64% 0.084 44);
  --blue-highlight: oklch(0.89 0.1691 231.28);
  --lime-highlight: #89f336;
  /* --grey-highlight: #f5f5f5; */
}

@media (prefers-color-scheme: dark) {
  :root {
    --pink-highlight: #a8216b;
    --purple-highlight: oklch(53.26% 0.1809 321.54);
    --salmon-highlight: oklch(0.65 0.0922 44);
    --gold-highlight: oklch(0.685 0.1921 55.06);
    --green-highlight: oklch(0.645 0.1855 155.65);
    --blue-highlight: #1e90ff;
    --lime-highlight: oklch(0.66 0.2345 135.09);
  }
}

.highlight {
  line-height: 2rem;
  font-style: normal;
  /* From bolt.css mark */
  border-radius: var(--highlight-border-radius);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 5px;
  cursor: pointer;
}

.nahwand {
  background-color: var(--purple-highlight);
}

.bayat {
  background-color: var(--darkyellow-highlight);
  color: #000;
}

.sigah {
  background-color: var(--gold-highlight);
}

.rast {
  background-color: var(--green-highlight);
}

.ajam {
  background-color: var(--red-highlight);
  color: white;
}

.grey {
  background-color: var(--grey-highlight);
}

.hijaz {
  background-color: var(--salmon-highlight);
}

.saba {
  background-color: var(--blue-highlight);
}

.kurd {
  background-color: var(--lime-highlight);
}