/* ===================================================
   Theme Color Palette
   ===================================================
   Each theme defines the same set of CSS custom properties.
   Edit any value here to change the look across the app.

   Variable          | Purpose
   ------------------|----------------------------------------
   --bg              | Page background
   --fg              | Primary text / foreground
   --fg-dim          | Faint UI (e.g. help borders)
   --grid-dot        | Write-surface grid dots (stronger than --fg-dim)
   --connection      | ASCII box lines, shift-drawn connections, box overlay, connect-tool dot
   --accent          | Lasso outlines, links, select-tool dot
   --sketch          | Freehand sketch strokes, draw-tool dot
   --depth-dot       | Depth-mode indicator dot
   --selection-extra | Extra selection palette color
   --selection-accent| Accent selection palette color
   --cursor-border   | Blinking write cursor outline
   --selection-bg    | Text selection background
   --selection-fg    | Text selection foreground
   --menu-bg         | Legacy (right-click menu background uses --bg)
   --menu-fg         | Context menu text / row hover contrast
   =================================================== */


/* -- Light (default) -------------------------------- */

:root,
body.theme-light {
  color-scheme: only light;

  --bg:             #fefefd;
  --fg:             #000000;
  --fg-dim:         rgba(0, 0, 0, 0.18);
  --grid-dot:       rgba(0, 0, 0, 0.075);

  --connection:     #00abf0;
  --connection-dot: #00abf0;
  --accent:         #00abf0;
  --sketch:         #ff4f4f;
  --depth-dot:      #00abf0;
  --tool-select:    #b3b3b3;
  --selection-extra: #6ce7a4;
  --selection-accent: #000000;

  --cursor-border:  rgba(0, 0, 0, 0.92);
  --selection-bg:   #00abf0;
  --selection-fg:   #f0f4fc;
  --menu-bg:        #eeeeeb;
  --menu-fg:        #000000;
}


/* -- Grey ------------------------------------------- */

body.theme-grey {
  color-scheme: only light;

  --bg:             #f1f1f1;
  --grid-dot:       rgba(255, 255, 255, 0.68);
}


/* -- Dim -------------------------------------------- */

body.theme-dim {
  color-scheme: only dark;

  --bg:             #252527;
  --fg:             #ffffff;
  --fg-dim:         rgba(255, 255, 255, 0.18);
  --grid-dot:       rgba(255, 255, 255, 0.09);
  --grid-line:      rgba(255, 255, 255, 0.13);

  --connection:     #00abf0;
  --connection-dot: #00abf0;
  --accent:         #00abf0;
  --sketch:         #ff4f4f;
  --depth-dot:      #00abf0;
  --tool-select:    #b3b3b3;
  --selection-extra: #6ce7a4;
  --selection-accent: #ededed;

  --cursor-border:  rgba(255, 255, 255, 0.92);
  --selection-bg:   #00abf0;
  --selection-fg:   #f0f4fc;
  --menu-bg:        #2f2f31;
  --menu-fg:        #ffffff;
}

/* -- Blue ------------------------------------------- */

body.theme-blue {
  color-scheme: only dark;

  --bg:             #0d1627;
  --fg:             #8bafff;
  --fg-dim:         rgba(139, 175, 255, 0.22);
  --grid-dot:       rgba(139, 175, 255, 0.11);
  --grid-line:      rgba(139, 175, 255, 0.14);

  --connection:     #6ce7a4;
  --connection-dot: #6ce7a4;
  --accent:         #8bafff;
  --sketch:         #ff4f4f;
  --depth-dot:      #8bafff;
  --tool-select:    #60708d;
  --selection-extra: #fdff5d;
  --selection-accent: #00abf0;

  --cursor-border:  rgba(139, 175, 255, 0.92);
  --selection-bg:   #8bafff;
  --selection-fg:   #0d1627;
  --menu-bg:        #13213a;
  --menu-fg:        #8bafff;
}

body.theme-dark {
  color-scheme: only dark;

  --bg:             #000000;
  --fg:             #ffffff;
  --fg-dim:         rgba(255, 255, 255, 0.18);
  --grid-dot:       rgba(255, 255, 255, 0.055);
  --grid-line:      rgba(255, 255, 255, 0.105);

  --connection:     #00abf0;
  --connection-dot: #00abf0;
  --accent:         #00abf0;
  --sketch:         #ff4f4f;
  --depth-dot:      #00abf0;
  --tool-select:    #b3b3b3;
  --selection-extra: #6ce7a4;
  --selection-accent: #ededed;

  --cursor-border:  rgba(255, 255, 255, 0.92);
  --selection-bg:   #00abf0;
  --selection-fg:   #f0f4fc;
  --menu-bg:        #111111;
  --menu-fg:        #ffffff;
}

@supports (color: color(display-p3 1 0 0)) {
  body.theme-light,
  body.theme-grey,
  body.theme-dim,
  body.theme-dark {
    --connection:     color(display-p3 0 0.6706 0.9412);
    --connection-dot: color(display-p3 0 0.6706 0.9412);
    --accent:         color(display-p3 0 0.6706 0.9412);
    --sketch:         color(display-p3 1 0.3098 0.3098);
    --depth-dot:      color(display-p3 0 0.6706 0.9412);
    --selection-extra: color(display-p3 0.4235 0.9059 0.6431);
    --selection-bg:   color(display-p3 0 0.6706 0.9412);
  }

  body.theme-blue {
    --connection:     color(display-p3 0.4235 0.9059 0.6431);
    --connection-dot: color(display-p3 0.4235 0.9059 0.6431);
    --selection-accent: color(display-p3 0 0.6706 0.9412);
    --selection-extra: color(display-p3 0.9922 1 0.3647);
    --sketch:         color(display-p3 1 0.3098 0.3098);
  }
}