/* ============================================================
   PRISM THEME — Selaras design system portofolio
   Semua warna pakai CSS variable dari style.css
   Dark mode otomatis via [data-theme="dark"] dari ThemeManager
   ============================================================ */

code[class*="language-"],
pre[class*="language-"] {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.75;
  direction: ltr;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  tab-size: 2;
  hyphens: none;
}

/* Block code — <pre> */
pre[class*="language-"] {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.45em;
  color: var(--accent);
  white-space: normal;
}

/* ── TOKEN COLORS ── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--text-muted);
  font-style: italic;
}

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

.token.namespace {
  opacity: 0.7;
}

.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.property,
.token.tag {
  color: var(--color-info);
} /* biru: #2d5c8c */

.token.string,
.token.char,
.token.attr-name,
.token.selector,
.token.builtin {
  color: var(--accent-cool);
} /* hijau: #2d5c4a */

.token.operator,
.token.url,
.token.entity {
  color: var(--color-warning);
} /* kuning: #b08d23 */

.token.keyword,
.token.atrule,
.token.attr-value {
  color: var(--accent);
} /* burnt orange: #c4622d */

.token.function,
.token.class-name {
  color: var(--color-danger);
} /* merah muted: #a33b3b */

.token.regex,
.token.variable,
.token.important {
  color: var(--accent-warm);
} /* oranye: #e8956d */

.token.bold {
  font-weight: 700;
}
.token.italic {
  font-style: italic;
}
.token.inserted {
  background: rgba(45, 92, 74, 0.15);
}
.token.deleted {
  background: rgba(163, 59, 59, 0.15);
}

/* ── DARK MODE ── */
/* Pakai [data-theme="dark"] yang di-set ThemeManager di main.js — no extra JS needed */

[data-theme="dark"] pre[class*="language-"] {
  background: var(--bg-elevated); /* #252321 */
  border-color: var(--border);
}

[data-theme="dark"] :not(pre) > code[class*="language-"] {
  background: var(--bg-card); /* #1e1d1b */
  color: var(--accent); /* #e07843 */
}

[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
  color: var(--text-muted);
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant {
  color: var(--color-info);
} /* #4a8cae */

[data-theme="dark"] .token.string,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.selector {
  color: var(--color-success);
} /* #4a8c73 */

[data-theme="dark"] .token.keyword,
[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value {
  color: var(--accent);
} /* #e07843 */

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
  color: var(--color-danger);
} /* #c95555 */

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.variable {
  color: var(--color-warning);
} /* #d9b142 */

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important {
  color: var(--accent-warm);
} /* #c4622d */

/* ── LINE NUMBERS PLUGIN ── */
pre[class*="language-"].line-numbers {
  position: relative;
  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: 1.5rem; /* sejajar dengan padding-top <pre> */
  left: 0;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid var(--border-strong);
  user-select: none;
}

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

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

/* Dark mode line numbers */
[data-theme="dark"] .line-numbers .line-numbers-rows {
  border-right-color: var(--border-strong);
}

[data-theme="dark"] .line-numbers-rows > span::before {
  color: var(--text-muted);
}