/* code.css — Code block styling + highlight.js overrides */

/* Block code */
pre {
  margin: var(--sp-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

pre code,
pre code.hljs {
  display: block;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: var(--sp-6);
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-x: auto;
  tab-size: 4;
  border-radius: var(--radius-lg);
}

pre code:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Inline code */
:not(pre) > code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  word-break: break-word;
}

/* Line numbers */
.hljs-ln-numbers {
  user-select: none;
  -webkit-user-select: none;
  text-align: right;
  color: #636678;
  border-right: 1px solid #2A2A40;
  padding-right: 12px;
  vertical-align: top;
  width: 1%;
  min-width: 2.5em;
}

.hljs-ln-code {
  padding-left: 16px;
}

/* Catppuccin-inspired syntax colors */
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name {
  color: #CBA6F7; /* lavender */
}

.hljs-string,
.hljs-attr,
.hljs-addition {
  color: #A6E3A1; /* green */
}

.hljs-comment,
.hljs-quote {
  color: #6C7086; /* overlay */
  font-style: italic;
}

.hljs-number,
.hljs-literal {
  color: #FAB387; /* peach */
}

.hljs-function .hljs-title,
.hljs-title.function_,
.hljs-section {
  color: #89B4FA; /* blue */
}

.hljs-type,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: #F9E2AF; /* yellow */
}

.hljs-variable,
.hljs-template-variable {
  color: #F38BA8; /* red/pink */
}

.hljs-meta,
.hljs-meta .hljs-keyword {
  color: #F5C2E7; /* pink */
}

.hljs-attribute {
  color: #89DCEB; /* teal */
}

.hljs-deletion {
  color: #F38BA8;
  background: rgba(243, 139, 168, 0.1);
}

.hljs-addition {
  background: rgba(166, 227, 161, 0.1);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* About section — C-comment code style */
.code-about pre code {
  color: #6C7086;
  font-style: italic;
}