/* DATA-DROP — 00-tokens.css
 * Design tokens: a "blueprint" field aesthetic. Dark drawing area, crisp
 * high-contrast UI, big touch targets, high-vis install-state colors.
 * Owned by: shell/store agent. Other modules read these vars (never redefine).
 */

:root {
  /* ---- surfaces (dark blueprint) ------------------------------------- */
  --dd-bg:            #0b1220;   /* app background */
  --dd-stage:         #0a1a2e;   /* drawing area base (deep blueprint blue) */
  --dd-stage-grid:    rgba(120, 170, 220, 0.10); /* faint grid on the stage */
  --dd-panel-bg:      #101a2b;   /* toolbar / side panel */
  --dd-panel-bg-2:    #16233a;   /* raised controls */
  --dd-line:          #243450;   /* hairline borders */
  --dd-line-strong:   #35507a;

  /* ---- ink / text ---------------------------------------------------- */
  --dd-ink:           #eaf2ff;   /* primary text */
  --dd-ink-dim:       #9fb3d1;   /* secondary text */
  --dd-ink-faint:     #64789a;   /* tertiary / captions */

  /* ---- brand / accent ------------------------------------------------ */
  --dd-accent:        #38bdf8;   /* cyan — blueprint highlight */
  --dd-accent-2:      #7dd3fc;
  --dd-accent-ink:    #04263a;   /* text on accent fills */
  --dd-blueprint:     #1d4ed8;   /* draft-line blue */

  /* ---- semantic status ---------------------------------------------- */
  --dd-ok:            #22c55e;
  --dd-warn:          #f59e0b;
  --dd-err:           #ef4444;
  --dd-info:          #38bdf8;

  /* ---- INSTALL-STATE palette (high-vis, ordered) --------------------
   * Cold/undone -> warm/hot -> green "done". Readable in sunlight.       */
  --dd-state-needs-pull:        #64748b; /* slate — nothing yet */
  --dd-state-ran:               #38bdf8; /* cyan — cable ran */
  --dd-state-dropped:           #6366f1; /* indigo — dropped at location */
  --dd-state-terminated:        #a855f7; /* violet — terminated */
  --dd-state-labeled:           #ec4899; /* pink — labeled */
  --dd-state-faceplated:        #f97316; /* orange — faceplate on */
  --dd-state-faceplate-labeled: #f59e0b; /* amber — faceplate labeled */
  --dd-state-tested:            #eab308; /* yellow — tested */
  --dd-state-complete:          #22c55e; /* green — complete */

  /* ---- element-type accent (layer dots / default draw colors) -------- */
  --dd-type-drop:     #38bdf8;
  --dd-type-tray:     #f97316;
  --dd-type-rack:     #a855f7;
  --dd-type-pathway:  #22d3ee;
  --dd-type-device:   #34d399;
  --dd-type-photo:    #facc15;

  /* ---- geometry / touch --------------------------------------------- */
  --dd-tb-h:          56px;       /* toolbar height (below the 48px chrome) */
  --dd-touch:         44px;       /* min touch target */
  --dd-radius:        10px;
  --dd-radius-sm:     7px;
  --dd-gap:           10px;
  --dd-panel-w:       340px;

  /* ---- type ---------------------------------------------------------- */
  --dd-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dd-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  /* ---- elevation ----------------------------------------------------- */
  --dd-shadow:   0 6px 24px rgba(0, 0, 0, 0.45);
  --dd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --dd-ring:     0 0 0 2px var(--dd-accent);
}