/*
 * draw.io in Dracula colors: added to its page (/index.html) by server.mjs, after its own stylesheet.
 * draw.io keeps its interface colors in variables (styles/grapheditor.css): the plain ones are its light
 * mode (here Alucard, Dracula's light theme), the --dark-* ones its dark mode (here Dracula).
 * The canvas behind diagrams in dark mode is set in compose.yaml (DRAWIO_CONFIG, darkColor).
 * (html:root:root outweighs draw.io's :root.geSystemColors.)
 */
html:root:root {
  /* Light: Alucard */
  --ge-panel-color: #f7f3df;
  --toolbar-color: #f7f3df;
  --workspace-color: #ece8d2;
  --inactive-color: #e4dfc6;
  --active-color: #d6d0b4;
  --primary-color: #ddd3f5;
  --primary-hover-color: #cfc2f1;
  --accent-color: #e9e1f9;
  --accent-hover-color: #ded3f6;
  --accent-text-color: #644ac9;
  --border-color: #ddd8c0;
  --highlight-color: #e9e4cd;
  --scrollbar-color: #ddd8c0;
  --scrollbar-hover-color: #a39d80;
  --text-color: #1f1f1f;
  --dialog-color: #f7f3df;
  --strong-text-color: #1f1f1f;
  --secondary-text-color: #6c664b;
  --faint-text-color: #8d876b;
  --field-color: #fffbeb;
  --field-border-color: #d6d0b4;
  --strong-border-color: #bdb69a;
  --card-color: #fffbeb;
  --soft-color: #f2eed8;
  --soft-hover-color: #ebe6cd;
  --focus-color: #644ac9;
  --mention-color: #644ac9;
  --mention-background-color: #e9e1f9;
  --selected-color: #e3daf7;
  --selected-hover-color: #d8ccf4;
  --prop-stripe-color: #fbf7e4;
  --prop-accent-color: #e9e1f9;
  --prop-accent-text-color: #644ac9;

  /* Dark: Dracula */
  --dark-color: #282a36;
  --dark-toolbar-color: #21222c;
  --ge-dark-panel-color: #21222c;
  --dark-header-color: #21222c;
  --dark-border-color: #343746;
  --dark-text-color: #e2e2dc;
  --dark-accent-color: #3b3360;
  --dark-accent-text-color: #bd93f9;
  --dark-active-accent-color: #54468a;
  --dark-inverse-active-color: #c9c9d6;
  --dark-highlight-color: #191a21;
  --dark-dialog-color: #282a36;
  --dark-strong-text-color: #f8f8f2;
  --dark-secondary-text-color: #a7aed3;
  --dark-faint-text-color: #6272a4;
  --dark-field-color: #191a21;
  --dark-field-border-color: #44475a;
  --dark-strong-border-color: #6272a4;
  --dark-card-color: #343746;
  --dark-soft-color: #44475a;
  --dark-soft-hover-color: #4d5066;
  --dark-focus-color: #bd93f9;
  --dark-mention-color: #ff79c6;
  --dark-mention-background-color: #4b2d48;
  --dark-active-item-color: #6272a4;
  --dark-error-background-color: #a3243b;
  --dark-scrollbar-color: #343746;
}

/* Selected text in fields and labels */
.geEditor ::selection { background: color-mix(in srgb, #bd93f9 35%, transparent); }