/* Enhanced Prism.js Theme - Inspired by Modern Documentation Sites */

/* Define syntax highlighting colors */
:root {
  /* Light theme syntax colors */
  --syntax-bg: #f6f8fa;
  --syntax-border: #d1d9e0;
  --syntax-text: #24292e;
  --syntax-comment: #6a737d;
  --syntax-keyword: #d73a49;
  --syntax-string: #032f62;
  --syntax-number: #005cc5;
  --syntax-function: #6f42c1;
  --syntax-operator: #d73a49;
  --syntax-punctuation: #24292e;
  --syntax-variable: #e36209;
  --syntax-class: #6f42c1;
  --syntax-constant: #005cc5;
  --syntax-property: #005cc5;
  --syntax-tag: #22863a;
  --syntax-attribute: #6f42c1;
  --syntax-selector: #6f42c1;
  --syntax-inserted: #22863a;
  --syntax-deleted: #d73a49;
  --syntax-diff-bg-add: #e6ffed;
  --syntax-diff-bg-del: #ffeef0;

  /* Inline code */
  --inline-code-bg: #f3f4f6;
  --inline-code-border: #e5e7eb;
  --inline-code-text: #d73a49;
}

[data-theme="dark"] {
  /* Dark theme syntax colors */
  --syntax-bg: #161b22;
  --syntax-border: #30363d;
  --syntax-text: #c9d1d9;
  --syntax-comment: #8b949e;
  --syntax-keyword: #ff7b72;
  --syntax-string: #a5d6ff;
  --syntax-number: #79c0ff;
  --syntax-function: #d2a8ff;
  --syntax-operator: #ff7b72;
  --syntax-punctuation: #c9d1d9;
  --syntax-variable: #ffa657;
  --syntax-class: #d2a8ff;
  --syntax-constant: #79c0ff;
  --syntax-property: #79c0ff;
  --syntax-tag: #7ee83f;
  --syntax-attribute: #d2a8ff;
  --syntax-selector: #d2a8ff;
  --syntax-inserted: #aff5b4;
  --syntax-deleted: #ffdcd7;
  --syntax-diff-bg-add: #033a16;
  --syntax-diff-bg-del: #67060c;

  /* Inline code */
  --inline-code-bg: #1f2937;
  --inline-code-border: #374151;
  --inline-code-text: #ff7b72;
}

/* Base code styling */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--syntax-text);
  background: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  tab-size: 2;
  hyphens: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1rem;
  margin: calc(var(--spacing-unit) * 3) 0;
  overflow: auto;
  border-radius: 6px;
  background-color: var(--syntax-bg);
  border: 1px solid var(--syntax-border);
  position: relative;
}

/* Scrollbar styling for code blocks */
pre[class*="language-"]::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
  background: transparent;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Line numbers */
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid var(--syntax-border);
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: var(--syntax-comment);
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

/* Inline code */
:not(pre) > code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 0.85em;
  background-color: var(--inline-code-bg);
  border: 1px solid var(--inline-code-border);
  border-radius: 3px;
  white-space: normal;
  font-family: var(--font-mono);
  color: var(--inline-code-text);
}

/* Language label */
pre[class*="language-"]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  color: var(--syntax-comment);
  background: var(--syntax-bg);
  border: 1px solid var(--syntax-border);
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Copy button */
.code-toolbar {
  position: relative;
}

.code-toolbar .toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-toolbar:hover .toolbar {
  opacity: 1;
}

.code-toolbar .toolbar button {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: var(--font-sans);
}

.code-toolbar .toolbar button:hover {
  background: var(--color-accent-hover);
}

/* Token colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--syntax-comment);
  font-style: italic;
}

.token.punctuation {
  color: var(--syntax-punctuation);
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: var(--syntax-constant);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--syntax-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: var(--syntax-variable);
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--syntax-function);
}

.token.keyword {
  color: var(--syntax-keyword);
  font-weight: 500;
}

.token.regex,
.token.important {
  color: var(--syntax-variable);
}

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

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

.token.entity {
  cursor: help;
}

/* Diff highlighting */
.token.inserted {
  color: var(--syntax-inserted);
  background: var(--syntax-diff-bg-add);
}

.token.deleted {
  color: var(--syntax-deleted);
  background: var(--syntax-diff-bg-del);
}

pre.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight .token.deleted:not(.prefix) {
  display: block;
  padding: 0 1rem;
  margin: 0 -1rem;
  background-color: var(--syntax-diff-bg-del);
}

pre.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight .token.inserted:not(.prefix) {
  display: block;
  padding: 0 1rem;
  margin: 0 -1rem;
  background-color: var(--syntax-diff-bg-add);
}

/* Selection */
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  background: var(--color-accent);
  color: white;
  text-shadow: none;
}

/* Print styles */
@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Language-specific improvements */
.language-bash .token.function {
  color: var(--syntax-keyword);
}

.language-json .token.property {
  color: var(--syntax-property);
}

/* Code block enhancements */
pre[class*="language-"] code {
  display: block;
  overflow-x: auto;
}

/* Focus styles for accessibility */
pre[class*="language-"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Terminal/console styling */
.language-bash::before,
.language-shell::before,
.language-console::before {
  content: "$ ";
  color: var(--syntax-comment);
  user-select: none;
}

/* Add subtle animation for code blocks */
pre[class*="language-"] {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

pre[class*="language-"]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent);
}

[data-theme="dark"] pre[class*="language-"]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}