:root {
  --cl-black: #000;
  --cl-white: #fff;
  --cl-text-default: #444;
  --cl-site-background: #fff;
  --cl-page-background: #eee;
  --cl-panel-background: #f8f8f8;
  --cl-panel-edge: #ccc;
  --cl-field-background: #f0f;
  --cl-field-text: #f0f;
  --cl-primary-bars: #f0f;
  --cl-mini-button-fg: #f0f;
  --cl-group-frame-fg: #f0f;
  --cl-tool-icon-fg: #f0f;
  --cl-tool-icon-active: #f0f;
  --cl-tool-icon-active-bg: #f0f;
  --cl-inner-icon-fg: #f0f;
  --cl-inner-icon-active: #f0f;
  --cl-board-grid: #f0f;
}

#site-root[data-theme="tone"] {
  --cl-field-background: #f0f0f0;
  --cl-field-text: #888;
  --cl-primary-bars: #fffa;
  --cl-mini-button-fg: #99a;
  --cl-group-frame-fg: #9bf;
  --cl-tool-icon-fg: #99a;
  --cl-tool-icon-active: #5af;
  --cl-tool-icon-active-bg: #f0f0f0;
  --cl-inner-icon-fg: #99a;
  --cl-inner-icon-active: #5af;
  --cl-board-grid: #8884;
}

#site-root[data-theme="lime"] {
  --cl-field-background: #f0f0f0;
  --cl-field-text: #444;
  --cl-primary-bars: #ccc8;
  /* --cl-primary-bars: #dfc8; */
  --cl-mini-button-fg: #8da;
  --cl-group-frame-fg: #ae8;
  --cl-tool-icon-fg: #6b4;
  --cl-tool-icon-active: #070;
  --cl-tool-icon-active-bg: #bf6;
  --cl-inner-icon-fg: #aaa;
  --cl-inner-icon-active: #6c4;
  --cl-board-grid: #0804;
}

#site-root[data-theme="frost"] {
  --cl-text-default: #555;
  --cl-field-background: #fff;
  --cl-field-text: #8cf;
  --cl-primary-bars: #def8;
  --cl-mini-button-fg: #8cf;
  --cl-group-frame-fg: #8cf;
  --cl-tool-icon-fg: #7bf;
  --cl-tool-icon-active: #48f;
  --cl-tool-icon-active-bg: #bdf;
  --cl-inner-icon-fg: #89a;
  --cl-inner-icon-active: #4af;
  --cl-board-grid: #08f4;
}

#site-root[data-theme="neon"] {
  --fg: #0bc;
  /* --fg: #f80; */
  --cl-field-background: #444;
  --cl-field-text: var(--fg);
  --cl-primary-bars: #8886;
  --cl-panel-background: #222;
  --cl-mini-button-fg: var(--fg);
  --cl-group-frame-fg: var(--fg);
  --cl-tool-icon-fg: var(--fg);
  --cl-tool-icon-active: #fff;
  --cl-tool-icon-active-bg: var(--fg);
  --cl-inner-icon-fg: #aaa;
  --cl-inner-icon-active: var(--fg);
  --cl-board-grid: var(--fg);
}

#site-root[data-theme="dark"] {
  --cl-site-background: #333;
  --cl-field-background: #444;
  --cl-panel-background: #eee;
  --cl-primary-bars: #333;
}

body {
  overflow: hidden;
  color: var(--cl-text-default);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}