/* Load once in the document containing the inline SVG icons.
 * Set data-theme="light" or data-theme="dark" on the app root or a container.
 * Only paint colors are defined here; icon geometry is untouched.
 */
:root,
[data-theme="light"] {
  --icon-reference: #334155;
  --icon-construction: #64748b;
  --icon-guide: #94a3b8;
  --icon-surface-shadow: #94a3b8;
  --icon-surface: #cbd5e1;
  --icon-surface-light: #e2e8f0;
  --icon-selected: #0284c7;
  --icon-selected-edge: #0369a1;
  --icon-selected-surface: #38bdf8;
  --icon-selected-light: #7dd3fc;
  --icon-selected-highlight: #bae6fd;
  --icon-selected-soft: #e0f2fe;
}

[data-theme="dark"],
[data-theme="dracula"],
[data-theme="forest"],
[data-theme="business"],
[data-theme="luxury"],
[data-theme="cyberpunk"],
[data-theme="blender"] {
  --icon-reference: #cbd5e1;
  --icon-construction: #94a3b8;
  --icon-guide: #94a3b8;
  --icon-surface-shadow: #334155;
  --icon-surface: #475569;
  --icon-surface-light: #64748b;
  --icon-selected: #0ea5e9;
  --icon-selected-edge: #7dd3fc;
  --icon-selected-surface: #38bdf8;
  --icon-selected-light: #7dd3fc;
  --icon-selected-highlight: #bae6fd;
  --icon-selected-soft: #0c4a6e;
}