/*
  Critical docs code theme.

  This file is linked directly from app.html so syntax colors are available
  before Vite/Svelte route CSS and hydration. Keep token colors here instead of
  relying on client-injected CSS for code examples.
*/

.docs-code-block,
.code-tabs [role="tabpanel"] {
  --docs-code-accent: #8fa3b3;
  --docs-code-bg: #071827;
  --docs-code-fg: #d7dee5;
  --docs-code-header-bg: #102a3a;
  --docs-code-token-comment: #8fa3b3;
  --docs-code-token-punctuation: #d7dee5;
  --docs-code-token-constant: #fb7185;
  --docs-code-token-string: #9ee6b7;
  --docs-code-token-operator: #67e8f9;
  --docs-code-token-keyword: #93c5fd;
  --docs-code-token-function: #facc15;
  --docs-code-token-variable: #fdba74;
}

.docs-code-block[data-language="astro"],
.code-tabs [role="tabpanel"][data-language="astro"] {
  --docs-code-accent: #ff8a3d;
  --docs-code-fg: #ffe5d2;
}

.docs-code-block[data-language="html"],
.code-tabs [role="tabpanel"][data-language="html"] {
  --docs-code-accent: #f97316;
  --docs-code-fg: #ffedd5;
}

.docs-code-block[data-language="http"],
.code-tabs [role="tabpanel"][data-language="http"] {
  --docs-code-accent: #38bdf8;
  --docs-code-fg: #e0f2fe;
}

.docs-code-block[data-language="js"],
.docs-code-block[data-language="javascript"],
.code-tabs [role="tabpanel"][data-language="js"],
.code-tabs [role="tabpanel"][data-language="javascript"] {
  --docs-code-accent: #facc15;
  --docs-code-fg: #fef9c3;
}

.docs-code-block[data-language="json"],
.code-tabs [role="tabpanel"][data-language="json"] {
  --docs-code-accent: #c084fc;
  --docs-code-fg: #f3e8ff;
}

.docs-code-block[data-language="sh"],
.docs-code-block[data-language="bash"],
.code-tabs [role="tabpanel"][data-language="sh"],
.code-tabs [role="tabpanel"][data-language="bash"] {
  --docs-code-accent: #2dd4bf;
  --docs-code-fg: #ccfbf1;
}

.docs-code-block[data-language="ts"],
.docs-code-block[data-language="typescript"],
.code-tabs [role="tabpanel"][data-language="ts"],
.code-tabs [role="tabpanel"][data-language="typescript"] {
  --docs-code-accent: #60a5fa;
  --docs-code-fg: #dbeafe;
}

.docs-code-block[data-language="tsx"],
.code-tabs [role="tabpanel"][data-language="tsx"] {
  --docs-code-accent: #818cf8;
  --docs-code-fg: #e0e7ff;
}

.docs-code-block[data-language="text"],
.docs-code-block[data-language="txt"],
.code-tabs [role="tabpanel"][data-language="text"],
.code-tabs [role="tabpanel"][data-language="txt"] {
  --docs-code-accent: #8fa3b3;
  --docs-code-fg: #d7dee5;
}

.docs-code-block {
  background: var(--docs-code-bg);
  border: 1px solid rgb(248 246 240 / 0.12);
  border-radius: 8px;
  color: var(--docs-code-fg);
  margin: 1.25rem 0 1.75rem;
  max-width: 100%;
  overflow: hidden;
}

.docs-code-block figcaption {
  align-items: center;
  background: var(--docs-code-header-bg);
  border-bottom: 1px solid rgb(248 246 240 / 0.12);
  box-shadow: inset 0 3px 0 var(--docs-code-accent);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0;
  padding: 0.75rem 1rem;
}

.docs-code-block__language,
.code-panel-header > span:last-child {
  color: var(--docs-code-accent);
}

.docs-code-block__dots,
.code-panel-dots {
  display: flex;
  gap: 0.35rem;
}

.docs-code-block__dots i,
.code-panel-dots i {
  background: rgb(248 246 240 / 0.36);
  border-radius: 999px;
  display: block;
  height: 0.48rem;
  width: 0.48rem;
}

.docs-code-block__dots i:first-child,
.code-panel-dots i:first-child {
  background: var(--docs-code-accent);
}

.docs-code-block pre,
.code-tabs pre {
  background: var(--docs-code-bg);
  color: var(--docs-code-fg);
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
}

.docs-code-block code,
.code-tabs pre code {
  background: transparent;
  color: var(--docs-code-fg);
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 0;
  tab-size: 2;
  white-space: pre;
}

.docs-code-block .token.comment,
.docs-code-block .token.block-comment,
.docs-code-block .token.prolog,
.docs-code-block .token.doctype,
.docs-code-block .token.cdata,
.code-tabs .token.comment,
.code-tabs .token.block-comment,
.code-tabs .token.prolog,
.code-tabs .token.doctype,
.code-tabs .token.cdata {
  color: var(--docs-code-token-comment);
}

.docs-code-block .token.punctuation,
.docs-code-block .token.script-punctuation,
.docs-code-block .token.attr-equals,
.docs-code-block .token.plain-text,
.code-tabs .token.punctuation,
.code-tabs .token.script-punctuation,
.code-tabs .token.attr-equals,
.code-tabs .token.plain-text {
  color: var(--docs-code-token-punctuation);
}

.docs-code-block .token.property,
.docs-code-block .token.tag,
.docs-code-block .token.boolean,
.docs-code-block .token.number,
.docs-code-block .token.constant,
.docs-code-block .token.symbol,
.docs-code-block .token.deleted,
.docs-code-block .token.literal-property,
.docs-code-block .token.namespace,
.code-tabs .token.property,
.code-tabs .token.tag,
.code-tabs .token.boolean,
.code-tabs .token.number,
.code-tabs .token.constant,
.code-tabs .token.symbol,
.code-tabs .token.deleted,
.code-tabs .token.literal-property,
.code-tabs .token.namespace {
  color: var(--docs-code-token-constant);
}

.docs-code-block .token.selector,
.docs-code-block .token.attr-name,
.docs-code-block .token.string,
.docs-code-block .token.char,
.docs-code-block .token.builtin,
.docs-code-block .token.inserted,
.docs-code-block .token.attr-value,
.code-tabs .token.selector,
.code-tabs .token.attr-name,
.code-tabs .token.string,
.code-tabs .token.char,
.code-tabs .token.builtin,
.code-tabs .token.inserted,
.code-tabs .token.attr-value {
  color: var(--docs-code-token-string);
}

.docs-code-block .token.operator,
.docs-code-block .token.entity,
.docs-code-block .token.url,
.docs-code-block .language-css .token.string,
.docs-code-block .style .token.string,
.code-tabs .token.operator,
.code-tabs .token.entity,
.code-tabs .token.url,
.code-tabs .language-css .token.string,
.code-tabs .style .token.string {
  color: var(--docs-code-token-operator);
}

.docs-code-block .token.atrule,
.docs-code-block .token.keyword,
.docs-code-block .token.template-punctuation,
.docs-code-block .token.interpolation-punctuation,
.code-tabs .token.atrule,
.code-tabs .token.keyword,
.code-tabs .token.template-punctuation,
.code-tabs .token.interpolation-punctuation {
  color: var(--docs-code-token-keyword);
}

.docs-code-block .token.function,
.docs-code-block .token.function-name,
.docs-code-block .token.class-name,
.code-tabs .token.function,
.code-tabs .token.function-name,
.code-tabs .token.class-name {
  color: var(--docs-code-token-function);
}

.docs-code-block .token.regex,
.docs-code-block .token.important,
.docs-code-block .token.variable,
.docs-code-block .token.parameter,
.code-tabs .token.regex,
.code-tabs .token.important,
.code-tabs .token.variable,
.code-tabs .token.parameter {
  color: var(--docs-code-token-variable);
}

.docs-code-block .token.bold,
.code-tabs .token.bold,
.docs-code-block .token.important,
.code-tabs .token.important {
  font-weight: 700;
}

.docs-code-block .token.italic,
.code-tabs .token.italic {
  font-style: italic;
}