/* Prism.js Custom Theme for Web Component Crown */
/* Background and overall text */
code[class*="language-"],
pre[class*="language-"],
code-editor {
  display: block;
  color: #e8ffcb; /* Soft enchanted white for text */

  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: "Fira Code", monospace;
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Token colors */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6c77a3; /* Mystical purple for comments */
}

.token.punctuation {
  color: #9ccfd8; /* Soft cyan for punctuation */
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #f58a60; /* Fiery orange for HTML tags */
}

.token.function-name {
  color: #ff5e99; /* Magical pink for function names */
}

.token.boolean,
.token.number,
.token.function {
  color: #f4d144; /* Glowing golden yellow for numbers and booleans */
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #ffcc66; /* Bright golden amber for classes and properties */
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #ff68d7; /* Bright magical pink for keywords */
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #5ce17a; /* Glowing green for strings and variables */
}

.token.operator,
.token.entity,
.token.url,
.token.inserted {
  color: #89ddff; /* Icy blue for operators and URLs */
}

/* Shadows for tokens */
/* .token.keyword,
      .token.operator,
      .token.tag { */
/* text-shadow: 0 0 5px rgba(255, 105, 180, 0.75); Glowing pink for magic */
/* } */

/* Line highlight */
pre[class*="language-"] > code[class*="language-"] .line-highlight {
  background: rgba(255, 225, 0, 0.1); /* Soft glow for active line */
  box-shadow: inset 5px 0 0 0 rgba(255, 225, 0, 0.7);
}

/* Selection colors */
::selection {
  background: rgba(
    225,
    155,
    255,
    0.2
  ); /* Enchanted light orange for text selection */
}

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

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