/* Stoplight Elements -> IBM Carbon Design bridge.

   Overwrites the COMPLETE Elements colour surface (all 56 --color-* variables +
   the Prism .token.* syntax classes) with official Carbon values, for both the
   white and g100 (dark) themes. Values come straight from the Carbon scale tokens
   in carbon.css (--cds-gray/blue/green/red/teal/yellow-*), so nothing is guessed
   and both themes are high-contrast. Elements defines its palette under
   [data-theme=light|dark]; we override at that level (loaded after its stylesheet)
   and sync data-theme to the Carbon toggle. Syntax tokens use !important because
   the code highlighter injects them at runtime. */

/* fonts + square corners + neutral (kill Elements' navy hue), both themes */
html[data-theme] {
  --font-prose: "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --border-radius: 0px;
  --canvas-s: 0%;
}

/* ============================ WHITE (Carbon light) ============================ */
html[data-theme="light"] {
  --color-canvas: #ffffff;
  --color-canvas-pure: #ffffff;
  --color-canvas-tint: var(--cds-gray-10);
  --color-canvas-50: var(--cds-gray-10);
  --color-canvas-100: var(--cds-gray-10);
  --color-canvas-200: var(--cds-gray-20);
  --color-canvas-300: var(--cds-gray-30);
  --color-canvas-400: var(--cds-gray-40);
  --color-canvas-500: var(--cds-gray-50);
  --color-canvas-dark: var(--cds-gray-20);
  --color-canvas-dialog: #ffffff;

  --color-text: var(--cds-gray-100);
  --color-text-primary: var(--cds-gray-100);
  --color-text-heading: var(--cds-gray-100);
  --color-text-paragraph: var(--cds-gray-90);
  --color-text-muted: var(--cds-gray-70);
  --color-text-light: var(--cds-gray-60);
  --color-text-disabled: var(--cds-gray-40);
  --color-text-danger: var(--cds-red-60);
  --color-text-success: var(--cds-green-60);
  --color-text-warning: #8e6a00;

  --color-border: var(--cds-gray-30);
  --color-border-light: var(--cds-gray-20);
  --color-border-dark: var(--cds-gray-50);
  --color-border-input: var(--cds-gray-30);
  --color-border-button: var(--cds-gray-50);

  --color-primary: var(--cds-blue-60);
  --color-primary-dark: var(--cds-blue-70);
  --color-primary-darker: var(--cds-blue-70);
  --color-primary-light: var(--cds-blue-40);
  --color-primary-tint: var(--cds-blue-10);
  --color-on-primary: #ffffff;
  --color-link: var(--cds-blue-60);
  --color-link-dark: var(--cds-blue-70);

  --color-success: var(--cds-green-60);
  --color-success-dark: var(--cds-green-60);
  --color-success-darker: var(--cds-green-60);
  --color-success-light: var(--cds-green-40);
  --color-success-tint: #defbe6;
  --color-on-success: #ffffff;

  --color-danger: var(--cds-red-60);
  --color-danger-dark: var(--cds-red-60);
  --color-danger-darker: var(--cds-red-60);
  --color-danger-light: var(--cds-red-50);
  --color-danger-tint: #fff1f1;
  --color-on-danger: #ffffff;

  --color-warning: var(--cds-yellow-30);
  --color-warning-dark: #d2a106;
  --color-warning-darker: #b28600;
  --color-warning-light: var(--cds-yellow-30);
  --color-warning-tint: #fcf4d6;
  --color-on-warning: var(--cds-gray-100);

  --color-code: var(--cds-gray-10);
  --color-on-code: var(--cds-gray-100);
  --color-darken-100: rgba(0, 0, 0, 0.08);
  --color-lighten-100: rgba(255, 255, 255, 0.9);
}

/* ============================ G100 (Carbon dark) ============================ */
html[data-theme="dark"] {
  --color-canvas: var(--cds-gray-100);
  --color-canvas-pure: var(--cds-gray-100);
  --color-canvas-tint: var(--cds-gray-90);
  --color-canvas-50: var(--cds-gray-90);
  --color-canvas-100: var(--cds-gray-80);
  --color-canvas-200: var(--cds-gray-80);
  --color-canvas-300: var(--cds-gray-70);
  --color-canvas-400: var(--cds-gray-70);
  --color-canvas-500: var(--cds-gray-60);
  --color-canvas-dark: #0b0b0b;
  --color-canvas-dialog: var(--cds-gray-90);

  --color-text: var(--cds-gray-10);
  --color-text-primary: var(--cds-gray-10);
  --color-text-heading: #ffffff;
  --color-text-paragraph: var(--cds-gray-20);
  --color-text-muted: var(--cds-gray-30);
  --color-text-light: var(--cds-gray-40);
  --color-text-disabled: var(--cds-gray-60);
  --color-text-danger: var(--cds-red-50);
  --color-text-success: var(--cds-green-40);
  --color-text-warning: var(--cds-yellow-30);

  --color-border: var(--cds-gray-60);
  --color-border-light: var(--cds-gray-70);
  --color-border-dark: var(--cds-gray-50);
  --color-border-input: var(--cds-gray-60);
  --color-border-button: var(--cds-gray-50);

  --color-primary: var(--cds-blue-40);
  --color-primary-dark: var(--cds-blue-30);
  --color-primary-darker: var(--cds-blue-20);
  --color-primary-light: var(--cds-blue-50);
  --color-primary-tint: rgba(69, 137, 255, 0.16);
  --color-on-primary: var(--cds-gray-100);
  --color-link: var(--cds-blue-40);
  --color-link-dark: var(--cds-blue-30);

  --color-success: var(--cds-green-40);
  --color-success-dark: var(--cds-green-40);
  --color-success-darker: var(--cds-green-40);
  --color-success-light: var(--cds-green-40);
  --color-success-tint: rgba(66, 190, 101, 0.16);
  --color-on-success: var(--cds-gray-100);

  --color-danger: var(--cds-red-50);
  --color-danger-dark: var(--cds-red-50);
  --color-danger-darker: var(--cds-red-50);
  --color-danger-light: var(--cds-red-50);
  --color-danger-tint: rgba(250, 77, 86, 0.16);
  --color-on-danger: var(--cds-gray-100);

  --color-warning: var(--cds-yellow-30);
  --color-warning-dark: var(--cds-yellow-30);
  --color-warning-darker: var(--cds-yellow-30);
  --color-warning-light: var(--cds-yellow-30);
  --color-warning-tint: rgba(241, 194, 27, 0.16);
  --color-on-warning: var(--cds-gray-100);

  --color-code: var(--cds-gray-90);
  --color-on-code: var(--cds-gray-10);
  --color-darken-100: rgba(0, 0, 0, 0.32);
  --color-lighten-100: rgba(255, 255, 255, 0.12);
}

/* ---- Prism syntax tokens -> Carbon --cds-code-* (auto light/dark). !important
   because the code highlighter sets these at runtime (e.g. punctuation was #333,
   invisible on the dark code surface). ---- */
pre[class*="language-"],
code[class*="language-"],
.sl-code-viewer,
.token { color: var(--cds-code-text) !important; }

.token.comment, .token.prolog, .token.doctype, .token.cdata, .token.block-comment {
  color: var(--cds-code-comment) !important;
}
.token.punctuation, .token.operator, .token.entity, .token.url, .token.variable {
  color: var(--cds-code-param) !important;
}
.token.property, .token.tag, .token.boolean, .token.number, .token.constant,
.token.symbol, .token.deleted {
  color: var(--cds-code-number) !important;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin,
.token.inserted {
  color: var(--cds-code-string) !important;
}
.token.atrule, .token.attr-value, .token.keyword, .token.regex, .token.important {
  color: var(--cds-code-keyword) !important;
}
.token.function, .token.class-name, .token.function-name {
  color: var(--cds-code-type) !important;
}

/* Flatten Elements' inverted panels (e.g. the "API Base URL" server callout, which
   Elements renders as a dark navy .sl-inverted banner regardless of theme) to a
   neutral Carbon gray surface. Override at .sl-inverted (out-specifies the theme
   root) and reset the HSL bases so derived text stays neutral + readable. */
html[data-theme] .sl-inverted {
  --canvas-h: 0; --canvas-s: 0%;
  --text-h: 0; --text-s: 0%; --text-l: 15%;
  --color-canvas: var(--cds-gray-10);
  --color-canvas-pure: var(--cds-gray-10);
  --color-canvas-tint: var(--cds-gray-10);
  --color-canvas-50: var(--cds-gray-10);
  --color-canvas-100: var(--cds-gray-20);
  --color-canvas-200: var(--cds-gray-20);
  --color-canvas-dark: var(--cds-gray-20);
  --color-text: var(--cds-gray-100);
  --color-text-heading: var(--cds-gray-100);
  --color-text-paragraph: var(--cds-gray-90);
  --color-text-muted: var(--cds-gray-70);
  --color-border: var(--cds-gray-30);
}
html[data-theme="dark"] .sl-inverted {
  --text-l: 90%;
  --color-canvas: var(--cds-gray-90);
  --color-canvas-pure: var(--cds-gray-90);
  --color-canvas-tint: var(--cds-gray-90);
  --color-canvas-50: var(--cds-gray-90);
  --color-canvas-100: var(--cds-gray-80);
  --color-canvas-200: var(--cds-gray-80);
  --color-canvas-dark: var(--cds-gray-100);
  --color-text: var(--cds-gray-10);
  --color-text-heading: #ffffff;
  --color-text-paragraph: var(--cds-gray-20);
  --color-text-muted: var(--cds-gray-30);
  --color-border: var(--cds-gray-60);
}

/* hide the "powered by Stoplight" badge on the public surface */
elements-api a[href*="stoplight.io"] { display: none !important; }

/* layout: fill viewport below the 48px Carbon header */
:root { --fg-topbar-h: var(--cds-header-height, 48px); }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--cds-bg); color: var(--cds-text-primary); }
.carbon-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.sl-shell { position: fixed; top: var(--fg-topbar-h); left: 0; right: 0; bottom: 0; overflow: hidden; }
elements-api { display: block; height: 100%; }