/*
 * Top bar and canvas toolbar buttons. One calm style for everything, so the eye goes to the single main action:
 * Save is the only filled button, Delete only turns its text red, and the rest stay quiet until hovered.
 * The two high-contrast themes keep strong black/white edges on every button.
 */
html[data-theme] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help) {
  --action-bg: transparent;
  --action-fg: #e5e7eb;
  --action-edge: rgba(255, 255, 255, 0.14);
  --action-hover: rgba(255, 255, 255, 0.08);
  background: var(--action-bg) !important;
  color: var(--action-fg) !important;
  border: 1px solid var(--action-edge) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help) {
  --action-fg: #1f2937;
  --action-edge: rgba(15, 23, 42, 0.16);
  --action-hover: rgba(15, 23, 42, 0.06);
}
/* the top bar's secondary actions and the icon buttons have no outline at all */
html[data-theme] body :is(#btn-new, #btn-open, #btn-export, #btn-examples, #cs-examples, #btn-undo, #btn-redo, #btn-theme, #btn-help) {
  --action-edge: transparent;
}
/* the one main action */
html[data-theme] body :is(#btn-save, #cs-welcome-new) {
  --action-bg: #2563eb; --action-fg: #ffffff; --action-edge: #2563eb; --action-hover: #1d4ed8;
}
html[data-theme] body #tb-delete { --action-fg: #fca5a5; --action-hover: rgba(248, 113, 113, 0.14); }
html[data-theme="light"] body #tb-delete { --action-fg: #b91c1c; --action-hover: rgba(220, 38, 38, 0.08); }

/* High contrast: strong edges and the theme's own colours, never the soft ones above */
html[data-theme="high-contrast"] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help) {
  --action-bg: #000000; --action-fg: #ffffff; --action-edge: #ffffff; --action-hover: #1f1f1f;
}
html[data-theme="high-contrast"] body :is(#btn-save, #cs-welcome-new) { --action-bg: #ffff00; --action-fg: #000000; --action-edge: #ffff00; --action-hover: #e6e600; }
html[data-theme="high-contrast-light"] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help) {
  --action-bg: #ffffff; --action-fg: #000000; --action-edge: #000000; --action-hover: #e8e8e8;
}
html[data-theme="high-contrast-light"] body :is(#btn-save, #cs-welcome-new) { --action-bg: #000000; --action-fg: #ffffff; --action-edge: #000000; --action-hover: #333333; }

html[data-theme] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help):hover:not(:disabled) {
  background: var(--action-hover, var(--action-bg)) !important;
  color: var(--action-fg, inherit) !important;
}
html[data-theme] body button[id]:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
html[data-theme] body :is(#btn-new, #btn-open, #btn-save, #btn-export, #btn-examples, #cs-examples,
  #cs-welcome-new, #cs-welcome-board, #cs-welcome-open, #cs-welcome-guide,
  #tb-zoom-in, #tb-zoom-out, #tb-fit, #tb-rotate, #tb-flip, #tb-delete, #tb-tidy, #tb-keys, #tb-checkpoints,
  #btn-undo, #btn-redo, #btn-theme, #btn-help):disabled {
  background: var(--action-bg, transparent) !important;
  color: var(--action-fg, #a0a0a0) !important;
  opacity: 0.4 !important;
  cursor: default;
}