@config "../../../tailwind.config.js";
@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Prism.js token colors, matched to the site's stone/teal palette and adapted
   to light/dark mode the same way the rest of the site is (prefers-color-scheme). */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-stone-500);
  font-style: italic;
}
.token.punctuation,
.token.operator {
  color: var(--color-stone-500);
}
.token.property,
.token.attr-name,
.token.selector {
  color: var(--color-teal-800);
}
.token.keyword,
.token.tag,
.token.boolean,
.token.important,
.token.atrule {
  color: var(--color-teal-700);
  font-weight: 600;
}
.token.string,
.token.attr-value,
.token.char {
  color: var(--color-emerald-800);
}
.token.number,
.token.constant,
.token.symbol {
  color: var(--color-amber-800);
}
.token.function,
.token.class-name {
  color: var(--color-stone-900);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: var(--color-stone-400);
  }
  .token.punctuation,
  .token.operator {
    color: var(--color-stone-400);
  }
  .token.property,
  .token.attr-name,
  .token.selector {
    color: var(--color-teal-200);
  }
  .token.keyword,
  .token.tag,
  .token.boolean,
  .token.important,
  .token.atrule {
    color: var(--color-teal-300);
  }
  .token.string,
  .token.attr-value,
  .token.char {
    color: var(--color-emerald-200);
  }
  .token.number,
  .token.constant,
  .token.symbol {
    color: var(--color-amber-400);
  }
  .token.function,
  .token.class-name {
    color: var(--color-stone-100);
  }
}