/**
 * Kookee SDK - Code Block Syntax Highlighting
 * Based on VS Code Dark+ theme
 *
 * Usage:
 *   import '@kookee/sdk/styles/code.css';
 *
 * Or via CDN:
 *   <link rel="stylesheet" href="https://unpkg.com/@kookee/sdk/styles/code.css">
 */

/* Code block wrapper with header */
.kookee-code-block {
  position: relative;
  margin: 1rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #1e1e1e;
}

.kookee-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #2d2d2d;
  border-bottom: 1px solid #3d3d3d;
}

.kookee-code-block__language {
  font-size: 0.75rem;
  color: #a0a0a0;
  font-family: system-ui, -apple-system, sans-serif;
}

.kookee-code-block__copy {
  font-size: 0.75rem;
  color: #a0a0a0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: system-ui, -apple-system, sans-serif;
  transition: background-color 0.15s, color 0.15s;
}

.kookee-code-block__copy:hover {
  background: #3d3d3d;
  color: #d4d4d4;
}

.kookee-code-block pre {
  margin: 0;
  padding: 1rem;
  background: transparent;
  border-radius: 0;
  overflow-x: auto;
  line-height: 1.7;
}

.kookee-code-block pre code {
  display: block;
  background: none;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco,
    'Courier New', monospace;
  font-size: 0.875rem;
  color: #d4d4d4;
  padding: 0;
  border: none;
}

/* Inline code - Slack-style (global, not scoped to .kookee-code-block) */
code:not(pre code):not(.kookee-code-block pre code) {
  background-color: #f8e8ea !important;
  color: #c41e3a !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.25rem !important;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco,
    'Courier New', monospace !important;
  font-size: 0.875em !important;
  border: 1px solid #f0d0d4 !important;
}

/* Remove Tailwind prose backticks from inline code */
code:not(pre code)::before,
code:not(pre code)::after {
  content: none !important;
}

/* Syntax highlighting - VS Code Dark+ theme */
.kookee-code-block .hljs-comment,
.kookee-code-block .hljs-quote {
  color: #6a9955;
  font-style: italic;
}

.kookee-code-block .hljs-keyword,
.kookee-code-block .hljs-selector-tag,
.kookee-code-block .hljs-addition {
  color: #569cd6;
}

.kookee-code-block .hljs-number,
.kookee-code-block .hljs-string,
.kookee-code-block .hljs-meta .hljs-meta-string,
.kookee-code-block .hljs-literal,
.kookee-code-block .hljs-doctag,
.kookee-code-block .hljs-regexp {
  color: #ce9178;
}

.kookee-code-block .hljs-title,
.kookee-code-block .hljs-section,
.kookee-code-block .hljs-name,
.kookee-code-block .hljs-selector-id,
.kookee-code-block .hljs-selector-class {
  color: #dcdcaa;
}

.kookee-code-block .hljs-attribute,
.kookee-code-block .hljs-attr,
.kookee-code-block .hljs-variable,
.kookee-code-block .hljs-template-variable,
.kookee-code-block .hljs-class .hljs-title,
.kookee-code-block .hljs-type {
  color: #4ec9b0;
}

.kookee-code-block .hljs-symbol,
.kookee-code-block .hljs-bullet,
.kookee-code-block .hljs-subst,
.kookee-code-block .hljs-meta,
.kookee-code-block .hljs-meta .hljs-keyword,
.kookee-code-block .hljs-selector-attr,
.kookee-code-block .hljs-selector-pseudo,
.kookee-code-block .hljs-link {
  color: #d7ba7d;
}

.kookee-code-block .hljs-built_in,
.kookee-code-block .hljs-deletion {
  color: #ce9178;
}

.kookee-code-block .hljs-formula {
  background: #1e1e1e;
}

.kookee-code-block .hljs-emphasis {
  font-style: italic;
}

.kookee-code-block .hljs-strong {
  font-weight: bold;
}

.kookee-code-block .hljs-property {
  color: #9cdcfe;
}

.kookee-code-block .hljs-punctuation {
  color: #d4d4d4;
}

.kookee-code-block .hljs-template-tag {
  color: #569cd6;
}

.kookee-code-block .hljs-params {
  color: #d4d4d4;
}