/* Code block container */
.code-block {
  @apply font-mono text-sm leading-relaxed;
  tab-size: 2;
}

/* Inline code */
:not(pre) > code {
  @apply bg-gray-800/50 rounded px-1.5 py-0.5 text-sm font-mono text-gray-200;
}

/* Base theme */
.highlight {
  color: #e4e4e7; /* zinc-200 */
}

/* Code block header */
.code-block-header {
  @apply flex items-center justify-between mb-2;
}

/* Language badge */
.language-badge {
  @apply text-xs font-medium text-gray-400 bg-gray-800/50 rounded px-2 py-0.5;
}

/* Copy button */
.copy-button {
  @apply flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-300 bg-gray-800/50 hover:bg-gray-700/50 rounded px-2 py-1 transition-all duration-200;
}

.copy-button svg {
  @apply w-3.5 h-3.5;
}

/* Syntax highlighting */
.highlight .c { color: #94a3b8; } /* Comment - slate-400 */
.highlight .k { color: #818cf8; } /* Keyword - indigo-400 */
.highlight .s { color: #4ade80; } /* String - green-400 */
.highlight .n { color: #e4e4e7; } /* Name - zinc-200 */
.highlight .o { color: #f472b6; } /* Operator - pink-400 */
.highlight .p { color: #e4e4e7; } /* Punctuation - zinc-200 */
.highlight .m { color: #c084fc; } /* Number - purple-400 */

/* Function names */
.highlight .nf,
.highlight .nx { color: #60a5fa; } /* blue-400 */

/* Constants and keywords */
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt { color: #818cf8; } /* indigo-400 */

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2 { color: #4ade80; } /* green-400 */

/* Numbers */
.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo { color: #c084fc; } /* purple-400 */

/* Comments */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs { color: #94a3b8; } /* slate-400 */

/* Success state */
.copy-button.success {
  @apply bg-green-600/50 hover:bg-green-500/50 text-green-300 hover:text-green-200;
}

/* Error state */
.copy-button.error {
  @apply bg-red-600/50 hover:bg-red-500/50 text-red-300 hover:text-red-200;
}