/**
 * Prism.js theme: TRMNL
 * Custom theme for Framework docs code examples
 * Supports light and dark modes via .dark class on document root
 */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Light mode (default) */
code[class*="language-"],
pre[class*="language-"] {
  color: #2b2b2b;
}

/* Dark mode */
.dark code[class*="language-"],
.dark pre[class*="language-"] {
  color: #d8dee9;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

/* Light mode background */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #f2f0ed;
}

/* Dark mode background */
.dark :not(pre) > code[class*="language-"],
.dark pre[class*="language-"] {
  background: #1a1a1a;
}

:not(pre) > code[class*="language-"] {
  padding: 0.2em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

/* ===== Tokens - Light mode (default) ===== */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6b7280;
  font-style: italic;
}

.token.punctuation {
  color: #525252;
}

.token.tag {
  color: #2d5243;
}

.token.attr-name,
.token.namespace {
  color: #5b4dbf;
  font-style: italic;
}

.token.deleted {
  color: #991b1b;
}

.token.function-name,
.token.function {
  color: #9a5a1a;
}

.token.boolean,
.token.constant {
  color: #4b5563;
}

.token.number {
  color: #9a5a1a;
}

.token.property,
.token.symbol {
  color: #0d7a6b;
}

.token.class-name {
  color: #1d4ed8;
}

.token.selector,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #0d7a6b;
}

.token.important {
  color: #0d7a6b;
  font-weight: bold;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #a03d8f;
}

.token.operator,
.token.entity,
.token.url {
  color: #0d7a6b;
}

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

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

.token.entity {
  cursor: help;
}

.token.inserted {
  color: #15803d;
}

/* ===== Tokens - Dark mode (.dark) ===== */
.dark .token.comment,
.dark .token.block-comment,
.dark .token.prolog,
.dark .token.doctype,
.dark .token.cdata {
  color: #6d6d6d;
}

.dark .token.punctuation {
  color: #a4a4a4;
}

.dark .token.tag {
  color: #699b87;
}

.dark .token.attr-name,
.dark .token.namespace {
  color: #aaa0fa;
}

.dark .token.deleted {
  color: #bf616a;
}

.dark .token.function-name,
.dark .token.function {
  color: #efb080;
}

.dark .token.boolean,
.dark .token.constant {
  color: rgba(255, 255, 255, 0.36);
}

.dark .token.number {
  color: #ebc88d;
}

.dark .token.property,
.dark .token.symbol {
  color: #81d2ce;
}

.dark .token.class-name {
  color: #87c3ff;
}

.dark .token.selector,
.dark .token.atrule,
.dark .token.keyword,
.dark .token.builtin {
  color: #83d6c5;
}

.dark .token.important {
  color: #83d6c5;
}

.dark .token.string,
.dark .token.char,
.dark .token.attr-value,
.dark .token.regex,
.dark .token.variable {
  color: #e394dc;
}

.dark .token.operator,
.dark .token.entity,
.dark .token.url {
  color: #83d6c5;
}

.dark .token.inserted {
  color: #a3be8c;
}