/* ============================================================
   Euclid — Node Editor · Design Tokens   (rev 2 · Jun 2026)
   Drop-in CSS custom properties. Values match node-prototype.html.
   ============================================================ */

:root {
  /* ---- Canvas / grid ---- */
  --eu-canvas:        #151617;
  --eu-grid-line:     #1e2023;
  --eu-grid-size:     64px;

  /* ---- Node body ---- */
  --eu-node-w:        158px;
  --eu-node-h:        60px;
  --eu-node-radius:   16px;
  /* Module grid unit — one footprint cell. It's HALF a canvas grid square
     (--eu-grid-size), so two cells span one square: a module sized
     geom.cols × geom.rows of this maps cleanly to the squares the canvas is
     drawn in (a 6 × 4 ADSR is 192 × 128 — three squares wide, two tall).
     Mirrored as MOD_W / MOD_H in view.js, which owns the px cords line up to.
     Custom per-module CSS can position against the same grid via these vars. */
  --eu-mod-w:         32px;
  --eu-mod-h:         32px;
  /* Module face — the shared look every .is-module starts from: a faint grid on
     the module unit, and an inset frame that marks the draggable area. */
  --eu-mod-inset:     8px;
  --eu-mod-line:      rgba(255,255,255,.04);
  --eu-node-grad-top: #212329;
  --eu-node-grad-mid: #191b1f;
  --eu-node-grad-bot: #141619;
  --eu-node-shadow:
      0 14px 30px -14px rgba(0,0,0,.7),
      0 2px 6px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -1px 0 rgba(0,0,0,.45);
  --eu-node-shadow-hover:
      0 22px 44px -16px rgba(0,0,0,.78),
      0 5px 12px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(0,0,0,.5);
  --eu-hover-lift:    -3px;
  --eu-ease:          cubic-bezier(.2,.9,.25,1);

  /* ---- Type ---- */
  --eu-font:          'Helvetica Neue LT Std','Helvetica Neue',Helvetica,Arial,sans-serif;
  --eu-title:         #eceef0;       /* node NAME — white */
  --eu-title-size:    16px;
  --eu-category:      #878b92;       /* node CATEGORY — grey (the colour lives in the cap) */
  --eu-category-size: 11px;
  --eu-data:          #868a90;       /* reinstated data field (plain grey text) */
  --eu-data-size:     12px;
  --eu-text-pad:      22px;          /* capped side — text clears the cap */
  --eu-text-pad-far:  18px;          /* opposite side */
  --eu-text-pad-both: 24px;          /* both-node (no cap) */
  --eu-meta-gap:      12px;          /* gap between category and data on the meta row */

  /* ---- Back cap ---- */
  --eu-cap-w:         12px;

  /* ---- Ring port ---- */
  --eu-port-d:        18px;
  --eu-port-ring:     4px;
  --eu-port-hollow:   #151617;
  --eu-port-offset:   -9px;          /* centre sits on the node edge */

  /* ---- Cord ---- */
  --eu-cord-w:        4.5px;
  --eu-cord-glow-w:   9px;
  --eu-cord-glow-op:  .16;
  --eu-cord-handle-min: 46;          /* px; bezier handle = max(this, |dx|*0.5) */

  /* ---- Light ---- */
  --eu-bloom-op:       .10;
  --eu-bloom-op-hover: .20;
  --eu-bloom-blur:     24px;
  --eu-specular:       rgba(255,255,255,.08);   /* pointer light */

  /* ---- Category palette ----
     One family per node category. `--eu-<fam>` is the parent (the category's
     own colour); `--eu-<fam>-1..8` are subcategory shades, dark → light. The
     menu tints each subcategory by a shade (lightest first, leaving headroom for
     up to eight). Categories: Filter=indigo · Value=green · Shape=orange ·
     Interp=cyan · Param=blush · Logic=silver · Control=slate · Elektra=gold. */
  --eu-silver:   #bec2c9;
  --eu-silver-1: #51565b; --eu-silver-2: #63686e; --eu-silver-3: #777b81; --eu-silver-4: #8a8f95;
  --eu-silver-5: #9fa2a9; --eu-silver-6: #b4b7bd; --eu-silver-7: #caccd1; --eu-silver-8: #e0e1e6;

  --eu-slate:    #96a2b4;
  --eu-slate-1:  #2d3c49; --eu-slate-2:  #3f4d5b; --eu-slate-3:  #525f6e; --eu-slate-4:  #657182;
  --eu-slate-5:  #7a8495; --eu-slate-6:  #9098a7; --eu-slate-7:  #a5acbb; --eu-slate-8:  #bcc0ce;

  --eu-indigo:   #5f6ad3;
  --eu-indigo-1: #001f7c; --eu-indigo-2: #152e8d; --eu-indigo-3: #2a3c9e; --eu-indigo-4: #3f49ae;
  --eu-indigo-5: #5459b9; --eu-indigo-6: #6969c2; --eu-indigo-7: #7e79cb; --eu-indigo-8: #9389d3;

  --eu-cyan:     #24b6ce;
  --eu-cyan-1:   #004c53; --eu-cyan-2:   #005e69; --eu-cyan-3:   #007181; --eu-cyan-4:   #008498;
  --eu-cyan-5:   #0096ae; --eu-cyan-6:   #42a8c2; --eu-cyan-7:   #67bbd6; --eu-cyan-8:   #88ceea;

  --eu-green:    #4cb782;
  --eu-green-1:  #004800; --eu-green-2:  #005c1f; --eu-green-3:  #006f38; --eu-green-4:  #078450;
  --eu-green-5:  #2e976a; --eu-green-6:  #4baa85; --eu-green-7:  #67be9f; --eu-green-8:  #82d1b8;

  --eu-gold:     #f1bf00;
  --eu-gold-1:   #874000; --eu-gold-2:   #985700; --eu-gold-3:   #a96e00; --eu-gold-4:   #b98500;
  --eu-gold-5:   #c69d00; --eu-gold-6:   #d3b536; --eu-gold-7:   #e1cd63; --eu-gold-8:   #efe588;

  --eu-orange:   #f3994b;
  --eu-orange-1: #812300; --eu-orange-2: #953a00; --eu-orange-3: #a94f00; --eu-orange-4: #bd6509;
  --eu-orange-5: #cd7e31; --eu-orange-6: #dc9750; --eu-orange-7: #eaaf6d; --eu-orange-8: #f9c78a;

  --eu-blush:    #f8c8c1;
  --eu-blush-1:  #71484b; --eu-blush-2:  #855b5b; --eu-blush-3:  #996e6c; --eu-blush-4:  #ae827d;
  --eu-blush-5:  #c19790; --eu-blush-6:  #d3ada4; --eu-blush-7:  #e6c3b9; --eu-blush-8:  #f9dace;

  --eu-red:      #d55c4e;
  --eu-red-1:    #6d0017; --eu-red-2:    #84001f; --eu-red-3:    #9b0027; --eu-red-4:    #b21b2f;
  --eu-red-5:    #c43f3d; --eu-red-6:    #d55c4e; --eu-red-7:    #e47761; --eu-red-8:    #f39176;

  --eu-lime:     #8fcc52;
  --eu-lime-1:   #5a5c00; --eu-lime-2:   #647200; --eu-lime-3:   #6d8900; --eu-lime-4:   #76a000;
  --eu-lime-5:   #81b60f; --eu-lime-6:   #8fcc52; --eu-lime-7:   #9fe27b; --eu-lime-8:   #b2f7a0;

  --eu-purple:   #9a52b5;
  --eu-purple-1: #3e007f; --eu-purple-2: #50008d; --eu-purple-3: #63169a; --eu-purple-4: #7629a7;
  --eu-purple-5: #893eaf; --eu-purple-6: #9a52b5; --eu-purple-7: #ac65bc; --eu-purple-8: #bd78c4;

  /* Back-compat aliases for the pre-palette token names still referenced around
     the app. Param is red now; pink stays as blush. */
  --eu-yellow:     var(--eu-gold);
  --eu-grey-light: var(--eu-silver);
  --eu-grey-mid:   var(--eu-slate);
  --eu-pink:       var(--eu-blush);
}

/* Helpers --------------------------------------------------- */

/* Set --type on a node; cap, port, category, and cord all key off it. */
.eu-cap {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--type), white 14%),
    var(--type) 55%,
    color-mix(in srgb, var(--type), black 12%));
}
.eu-port {
  border: var(--eu-port-ring) solid var(--type);
  background: var(--eu-port-hollow);
  box-shadow:
    0 0 7px color-mix(in srgb, var(--type), transparent 58%),
    inset 0 1px 1px rgba(255,255,255,.20),
    inset 0 0 0 1px color-mix(in srgb, var(--type), black 30%);
}
.eu-category { color: var(--type); }          /* category text = cap colour */
.eu-data     { color: var(--eu-data); }        /* data value = grey */