/* ============================================================
   THEME — every color, size, and font in the editor lives here.
   Edit this file (and js/config.js for behavior/layout choices)
   to restyle the app; style.css only consumes these tokens.
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --bg:            #14171c;   /* app background */
  --panel:         #1d2129;   /* top bar, side panel, status bar */
  --panel2:        #232834;   /* cards / buttons inside panels */
  --line:          #323a48;   /* borders and separators */
  --text:          #d7dce4;   /* primary text */
  --muted:         #8b93a2;   /* secondary text, hints */

  /* ---- Semantic accent roles (kept deliberately distinct) ----
     primary   = interactive/CTA (blue)      — buttons, active tool, links
     selection = what you have selected (orange) — never used for actions
     success   = commit/confirm (green)      — Apply
     dims      = measurements (teal)         — dimension arcs/labels
     danger    = destructive (red)           — delete, conflicts            */
  --accent:        #3b82f6;   /* primary (interactive) */
  --accent2:       #ff8a3d;   /* selection highlight */
  --success:       #2fbf71;   /* confirm / apply */
  --success-hover: #27a862;
  --danger:        #e5484d;   /* destructive + conflicts */
  --warning-bg:    #3a3325;   /* toast background for gentle warnings */
  --warning-border:#8a6d3b;
  --warning-text:  #e8d5a3;

  /* ---- Canvas & grid ---- */
  --canvas-bg:     #171b21;   /* infinite canvas behind the artboard */
  --artboard-bg:   #f1f1ee;   /* the document rectangle — soft gray, easy on the eyes */
  --artboard-line: #323a48;
  --grid-dot:      #808ca0;   /* dot-grid color (used with --grid-dot-opacity) */
  --grid-dot-opacity: 0.38;
  --grid-dot-size: 1.4;       /* dot radius in screen px */

  /* ---- Rulers ---- */
  --ruler-size:    26px;      /* thickness of the ruler strips */
  --ruler-bg:      #1a1e26;
  --ruler-line:    #3a4252;
  --ruler-text:    #8b93a2;
  --ruler-font:    10px system-ui, sans-serif;

  /* ---- Geometry (SVG) ---- */
  --node-fill:     #ffffff;
  --node-stroke:   #4da3ff;
  --node-radius:   5;         /* screen px */
  --node-hover:    #4da3ff;
  --node-selected: #ff8a3d;
  --rubber-color:  #4da3ff;
  --sweep-color:   #ff8a3d;

  /* ---- Density ramp strips ---- */
  --density-bg:    rgba(23, 27, 33, 0.82);
  --density-curve: #3b82f6;
  --density-handle:#eaf2ff;

  /* ---- Dimensions / constraints ---- */
  --dim-color:     #2dd4bf;   /* satisfied dimension arcs + labels (teal — not the success green) */
  --dim-conflict:  #e5484d;   /* unsatisfiable dimension */
  --dim-selected:  #ff8a3d;
  --dim-font-family: system-ui, sans-serif;
  --dim-font-weight: 600;

  /* ---- Layout ---- */
  --panel-width:   282px;
  --radius:        6px;       /* button/input corner radius */
  --radius-lg:     8px;       /* card corner radius */
  --icon-size:     17px;      /* toolbar icon size */
  --font:          13px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-small:    11.5px;
  --gap:           8px;

  /* ---- Buttons ---- */
  --btn-bg:        #232834;
  --btn-border:    #323a48;
  --btn-active-bg: #4da3ff;
  --btn-active-fg: #10141a;
  --btn-primary-bg:#2a4a6e;
  --btn-primary-border: #3c6ea5;
  --btn-primary-hover: #33608f;
}