/* Thème sombre des cellules Starboard, piloté par le thème du site parent (starboard-theme.js). */
html.sombre {
  color-scheme: dark;
  --background-color: var(--sb-page-bg, #212529);
  --background-color-secondary: color-mix(in srgb, var(--background-color) 93%, white);
  --background-color-tertiary: color-mix(in srgb, var(--background-color) 86%, white);
  --code-background-color: color-mix(in srgb, var(--background-color) 90%, white);
  --foreground-color: #e4e8eb;
  --foreground-color-secondary: #c3c9ce;
  --foreground-color-tertiary: #97a0a7;
  --text-color: #e4e8eb;
  --border-color: color-mix(in srgb, var(--background-color) 78%, white);
  --border-color-secondary: color-mix(in srgb, var(--background-color) 84%, white);
  --gutter-background-color: var(--background-color);
  --gutter-selected-background-color: var(--background-color-tertiary);
  --controls-color: #9aa3aa;
  --editor-line-number-color: #6f7980;
  --insertion-line-color: color-mix(in srgb, var(--background-color) 80%, white);
  --insertion-line-plus-color: color-mix(in srgb, var(--background-color) 74%, white);
  --blockquote-background-color: var(--background-color-secondary);
  --blockquote-border-left-color: var(--border-color);
  --hr-color: var(--border-color);
}

html.sombre body {
  background-color: var(--background-color) !important;
  color: var(--foreground-color);
}

html.sombre .cm-editor {
  background: #e9ebec !important;
  filter: invert(1) hue-rotate(180deg);
}

html.sombre .cm-editor .cm-gutters {
  background: #e3e5e7 !important;
  border-color: #d5d8db !important;
}

html.sombre .cm-editor .cm-activeLine,
html.sombre .cm-editor .cm-activeLineGutter {
  background: rgba(0, 0, 0, 0.045) !important;
}

html.sombre .btn,
html.sombre button {
  color: var(--foreground-color);
}

html.sombre .btn:hover {
  color: var(--foreground-color);
  background-color: var(--background-color-tertiary);
}

html.sombre .console-output,
html.sombre pre,
html.sombre code {
  color: var(--foreground-color);
}

html.sombre input,
html.sombre textarea,
html.sombre select {
  background-color: var(--background-color-secondary);
  color: var(--foreground-color);
  border-color: var(--border-color);
}