/* Chroma Syntax Highlighting Theme */
/* Dark/Light theme support with custom properties */

:root {
  /* Dark theme colors */
  --chroma-bg-dark: #0c1520;
  --chroma-bg-light: #f0f4f8;
  --chroma-text-dark: #c4d6e8;
  --chroma-text-light: #0d1b2a;
  --chroma-keyword: #a855f7;
  --chroma-string: #00ff88;
  --chroma-number: #38bdf8;
  --chroma-comment: #7a9bb8;
  --chroma-error: #ff6b6b;
}

/* Default dark theme for .highlight */
.highlight {
  background-color: var(--chroma-bg-dark);
  color: var(--chroma-text-dark);
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Light theme override */
html.theme-light .highlight {
  background-color: var(--chroma-bg-light);
  color: var(--chroma-text-light);
}

/* Light theme token colors for proper contrast */
html.theme-light .highlight .k,
html.theme-light .highlight .kc,
html.theme-light .highlight .kd,
html.theme-light .highlight .kn,
html.theme-light .highlight .kp,
html.theme-light .highlight .kr,
html.theme-light .highlight .kt {
  color: #7c3aed;
}

html.theme-light .highlight .s,
html.theme-light .highlight .sb,
html.theme-light .highlight .sc,
html.theme-light .highlight .sd,
html.theme-light .highlight .s1,
html.theme-light .highlight .s2,
html.theme-light .highlight .se,
html.theme-light .highlight .sh,
html.theme-light .highlight .si,
html.theme-light .highlight .sx {
  color: #059669;
}

html.theme-light .highlight .m,
html.theme-light .highlight .mb,
html.theme-light .highlight .mf,
html.theme-light .highlight .mh,
html.theme-light .highlight .mi,
html.theme-light .highlight .il,
html.theme-light .highlight .mo {
  color: #0284c7;
}

html.theme-light .highlight .c,
html.theme-light .highlight .c1,
html.theme-light .highlight .cm {
  color: #6888a8;
}

/* Keyword tokens - purple */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--chroma-keyword);
  font-weight: 500;
}

/* String tokens - green */
.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: var(--chroma-string);
}

/* Number tokens - cyan */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo {
  color: var(--chroma-number);
}

/* Comment tokens - gray, italic */
.highlight .c,
.highlight .c1,
.highlight .cm {
  color: var(--chroma-comment);
  font-style: italic;
}

/* Name tokens - default text color */
.highlight .n,
.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ni,
.highlight .nl,
.highlight .nn,
.highlight .nt,
.highlight .nv {
  color: inherit;
}

/* Error tokens - red */
.highlight .err {
  color: var(--chroma-error);
}

/* Line numbers styling */
.highlight .ln {
  color: var(--chroma-comment);
  user-select: none;
  -webkit-user-select: none;
}

/* Inline code is styled in main.css - just reset within code blocks */

/* Code block styling for pre tag */
pre {
  margin: 0;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}