/* ════════════════════════════════════════════
   FASTKIT — syntax.css
   VS Code–style syntax highlighting za blog i docs
   Koristi Prism.js token klase
════════════════════════════════════════════ */

/* ── Pre/code blok wrapper ── */
.blog-post-body pre,
.docs-content pre {
  position: relative;
  margin: var(--s5) 0;
  border-radius: var(--r3);
  overflow: hidden;
  border: 1px solid var(--border-2);
  background: #0d1117;
}

/* Override docs.css background za .code-block pre */
.blog-post-body .code-block pre,
.docs-content .code-block pre {
  background: #0d1117;
  margin: 0;
  border: none;
  border-radius: 0;
}

.blog-post-body pre code,
.docs-content pre code,
.blog-post-body .code-block code,
.docs-content .code-block code {
  display: block;
  padding: var(--s5) var(--s6);
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.85;
  background: none;
  border: none;
  color: #e6edf3;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
}

.blog-post-body pre code::-webkit-scrollbar,
.docs-content pre code::-webkit-scrollbar { height: 4px; }
.blog-post-body pre code::-webkit-scrollbar-thumb,
.docs-content pre code::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

/* ── Inline code ── */
.blog-post-body p code,
.blog-post-body li code,
.blog-post-body h2 code,
.blog-post-body h3 code,
.docs-content p code,
.docs-content li code,
.docs-content h2 code,
.docs-content h3 code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: 2px 6px;
  border-radius: var(--r1);
  color: var(--accent);
}

/* ── File label iznad bloka ── */
.code-file-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8b949e;
  background: #161b22;
  border: 1px solid var(--border-2);
  border-bottom: none;
  border-radius: var(--r3) var(--r3) 0 0;
  padding: 6px var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: 0;
  margin-top: var(--s5);
}

.code-file-label + pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ════════════════════════════════════════════
   PRISM.JS TOKENS — Dark paleta (default)
   GitHub Dark Dimmed / VS Code One Dark Pro
════════════════════════════════════════════ */

.token.keyword,
.token.keyword.module,
.token.keyword.control-flow  { color: #ff7b72; }
.token.builtin,
.token.class-name             { color: #ffa657; }
.token.string,
.token.string-interpolation   { color: #a5d6ff; }
.token.number,
.token.boolean                { color: #79c0ff; }
.token.comment,
.token.prolog,
.token.doctype                { color: #8b949e; font-style: italic; }
.token.function,
.token.function-variable      { color: #d2a8ff; }
.token.parameter              { color: #e6edf3; }
.token.operator,
.token.punctuation            { color: #e6edf3; }
.token.decorator,
.token.at-rule                { color: #ffa657; }
.token.property               { color: #79c0ff; }
.token.null,
.token.constant               { color: #79c0ff; }
.token.variable               { color: #ffa657; }
.token.tag                    { color: #7ee787; }
.token.attr-name              { color: #ffa657; }
.token.attr-value             { color: #a5d6ff; }
.token.namespace              { color: #ffa657; }

/* ════════════════════════════════════════════
   LIGHT MODE — tri scenarija:
   1. data-theme="light"  (eksplicitni toggle)
   2. data-theme="auto"   + system prefers light
   3. nema data-theme     + system prefers light
════════════════════════════════════════════ */

/* ── Shared light vars ── */
[data-theme="light"] .blog-post-body pre,
[data-theme="light"] .docs-content pre {
  background: #f6f8fa;
  border-color: #d0d7de;
}

[data-theme="light"] .blog-post-body pre code,
[data-theme="light"] .docs-content pre code {
  color: #24292f;
  scrollbar-color: #d0d7de transparent;
}

[data-theme="light"] .token.keyword,
[data-theme="light"] .token.keyword.module,
[data-theme="light"] .token.keyword.control-flow  { color: #cf222e; }
[data-theme="light"] .token.builtin,
[data-theme="light"] .token.class-name             { color: #953800; }
[data-theme="light"] .token.string,
[data-theme="light"] .token.string-interpolation   { color: #0a3069; }
[data-theme="light"] .token.number,
[data-theme="light"] .token.boolean                { color: #0550ae; }
[data-theme="light"] .token.comment                { color: #6e7781; font-style: italic; }
[data-theme="light"] .token.function,
[data-theme="light"] .token.function-variable      { color: #8250df; }
[data-theme="light"] .token.parameter              { color: #24292f; }
[data-theme="light"] .token.operator,
[data-theme="light"] .token.punctuation            { color: #24292f; }
[data-theme="light"] .token.decorator,
[data-theme="light"] .token.at-rule                { color: #953800; }
[data-theme="light"] .token.property               { color: #0550ae; }
[data-theme="light"] .token.null,
[data-theme="light"] .token.constant               { color: #0550ae; }
[data-theme="light"] .token.variable               { color: #953800; }
[data-theme="light"] .token.namespace              { color: #953800; }

[data-theme="light"] .code-file-label {
  background: #eaeef2;
  color: #57606a;
  border-color: #d0d7de;
}

/* ── Auto theme + system prefers light ── */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .blog-post-body pre,
  [data-theme="auto"] .docs-content pre,
  :root:not([data-theme]) .blog-post-body pre,
  :root:not([data-theme]) .docs-content pre {
    background: #f6f8fa;
    border-color: #d0d7de;
  }

  [data-theme="auto"] .blog-post-body pre code,
  [data-theme="auto"] .docs-content pre code,
  :root:not([data-theme]) .blog-post-body pre code,
  :root:not([data-theme]) .docs-content pre code {
    color: #24292f;
    scrollbar-color: #d0d7de transparent;
  }

  [data-theme="auto"] .token.keyword,
  [data-theme="auto"] .token.keyword.module,
  [data-theme="auto"] .token.keyword.control-flow,
  :root:not([data-theme]) .token.keyword               { color: #cf222e; }

  [data-theme="auto"] .token.builtin,
  [data-theme="auto"] .token.class-name,
  :root:not([data-theme]) .token.builtin,
  :root:not([data-theme]) .token.class-name             { color: #953800; }

  [data-theme="auto"] .token.string,
  [data-theme="auto"] .token.string-interpolation,
  :root:not([data-theme]) .token.string,
  :root:not([data-theme]) .token.string-interpolation   { color: #0a3069; }

  [data-theme="auto"] .token.number,
  [data-theme="auto"] .token.boolean,
  :root:not([data-theme]) .token.number,
  :root:not([data-theme]) .token.boolean                { color: #0550ae; }

  [data-theme="auto"] .token.comment,
  :root:not([data-theme]) .token.comment                { color: #6e7781; font-style: italic; }

  [data-theme="auto"] .token.function,
  [data-theme="auto"] .token.function-variable,
  :root:not([data-theme]) .token.function,
  :root:not([data-theme]) .token.function-variable      { color: #8250df; }

  [data-theme="auto"] .token.parameter,
  :root:not([data-theme]) .token.parameter              { color: #24292f; }

  [data-theme="auto"] .token.operator,
  [data-theme="auto"] .token.punctuation,
  :root:not([data-theme]) .token.operator,
  :root:not([data-theme]) .token.punctuation            { color: #24292f; }

  [data-theme="auto"] .token.decorator,
  [data-theme="auto"] .token.at-rule,
  :root:not([data-theme]) .token.decorator,
  :root:not([data-theme]) .token.at-rule                { color: #953800; }

  [data-theme="auto"] .token.property,
  :root:not([data-theme]) .token.property               { color: #0550ae; }

  [data-theme="auto"] .token.null,
  [data-theme="auto"] .token.constant,
  :root:not([data-theme]) .token.null,
  :root:not([data-theme]) .token.constant               { color: #0550ae; }

  [data-theme="auto"] .token.variable,
  :root:not([data-theme]) .token.variable               { color: #953800; }

  [data-theme="auto"] .token.namespace,
  :root:not([data-theme]) .token.namespace              { color: #953800; }

  [data-theme="auto"] .code-file-label,
  :root:not([data-theme]) .code-file-label {
    background: #eaeef2;
    color: #57606a;
    border-color: #d0d7de;
  }
}

/* ── Eksplicitni dark — uvek tamna pozadina ── */
[data-theme="dark"] .blog-post-body pre,
[data-theme="dark"] .docs-content pre {
  background: #0d1117;
  border-color: #30363d;
}

[data-theme="dark"] .blog-post-body pre code,
[data-theme="dark"] .docs-content pre code {
  color: #e6edf3;
  scrollbar-color: #30363d transparent;
}