/* SkyGaming docs overrides — Redocly bundles light grey code panels
   with syntax colors meant for dark backgrounds. These rules restore contrast. */

:root {
  --sg-code-bg: #0c0b14;
  --sg-code-fg: #e8e6f0;
  --sg-code-border: rgba(123, 97, 255, 0.28);
  --sg-inline-code-bg: rgba(123, 97, 255, 0.1);
  --sg-inline-code-fg: #4a3d99;
}

/* All fenced code blocks (guides + API prose) */
pre,
pre[class*='language-'],
pre > code,
pre code[class*='language-'] {
  background-color: var(--sg-code-bg) !important;
  color: var(--sg-code-fg) !important;
  text-shadow: none !important;
}

pre {
  border: 1px solid var(--sg-code-border) !important;
  border-radius: 8px !important;
}

pre code {
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
}

/* Inline `code` in prose (not inside pre) */
p code,
li code,
td code,
h1 code,
h2 code,
h3 code,
h4 code {
  background-color: var(--sg-inline-code-bg) !important;
  color: var(--sg-inline-code-fg) !important;
  border: 1px solid rgba(123, 97, 255, 0.18) !important;
}

/* Redocly markdown renderer — syntax-highlighted guides */
pre[class*='language-'] .token,
pre code[class*='language-'] .token {
  text-shadow: none !important;
}

/* OpenAPI reference — request/response sample panels */
.react-tabs__tab-panel,
.react-tabs__tab-panel > div,
.react-tabs__tab-panel > pre {
  background: var(--sg-code-bg) !important;
  color: var(--sg-code-fg) !important;
}

.react-tabs__tab-panel pre {
  border: none !important;
  border-radius: 0 !important;
}

/* Sample tabs on dark API panels */
.react-tabs__tab-list .react-tabs__tab {
  background-color: #1a1830 !important;
  color: #a6abb7 !important;
  border-color: rgba(123, 97, 255, 0.25) !important;
}

.react-tabs__tab-list .react-tabs__tab--selected {
  background-color: var(--sg-code-bg) !important;
  color: var(--sg-code-fg) !important;
}

/* Syntax highlighting tokens (Prism) — tuned for dark surfaces */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6e7681 !important;
  opacity: 1 !important;
}

.token.punctuation {
  color: #8b949e !important;
  opacity: 1 !important;
}

.token.property,
.token.tag,
.token.number,
.token.constant,
.token.symbol {
  color: #79c0ff !important;
}

.token.boolean {
  color: #ff7b72 !important;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.property.string {
  color: #7ee787 !important;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: #ffa657 !important;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d2a8ff !important;
}

.token.regex,
.token.important {
  color: #f0883e !important;
}

.token.deleted {
  color: #ff7b72 !important;
}

/* Right panel (OpenAPI samples) — keep dark even when theme tabs flip light */
[class*='react-tabs__tab-panel'] pre {
  background-color: var(--sg-code-bg) !important;
  color: var(--sg-code-fg) !important;
}