/* ============================================================
   VOREN · COLOR TOKENS
   Dark-first. Neutrals are cool near-black → white, matching the
   product canvas. Blue is the single brand accent; green / red /
   amber are functional, carried over from the strategy-builder UI
   (data ports = green, condition ports = red).
   ============================================================ */
:root {
  /* ---- Neutral ramp (cool, near-black base) ---- */
  --neutral-950: #08080a;   /* canvas / app background */
  --neutral-900: #0d0e10;   /* base surface */
  --neutral-880: #121316;   /* card / node surface */
  --neutral-850: #17181c;   /* raised surface */
  --neutral-800: #1d1e23;   /* hover surface */
  --neutral-750: #26272d;   /* subtle border */
  --neutral-700: #303138;   /* border */
  --neutral-600: #3f4149;   /* strong border / divider */
  --neutral-500: #5c5e68;   /* disabled text / icon-faint */
  --neutral-400: #7a7d88;   /* tertiary text */
  --neutral-300: #9a9da8;   /* secondary text */
  --neutral-200: #c3c6cf;   /* muted heading */
  --neutral-100: #e6e8ec;   /* body-strong */
  --neutral-050: #f4f5f7;   /* primary text */
  --white:       #fcfeff;   /* logo white / pure */
  --black:       #000000;

  /* ---- Brand blue (chosen for dark theme: luminous, not neon) ---- */
  --blue-100: #d7e6ff;
  --blue-300: #8db6ff;
  --blue-400: #5f97ff;
  --blue-500: #3d7bff;   /* PRIMARY ACCENT */
  --blue-600: #2f63e0;
  --blue-700: #2650b8;
  --blue-glow: rgba(61, 123, 255, 0.35);

  /* ---- Functional (from product canvas) ---- */
  --green-500: #3fb765;  /* data flow / success */
  --green-400: #52c97a;
  --red-500:   #f0503c;  /* condition / danger */
  --red-400:   #ff6a58;
  --amber-500: #e3b341;  /* warning / pending param */
  --amber-400: #f2c65c;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */
  /* Backgrounds & surfaces */
  --bg-canvas:      var(--neutral-950);
  --bg-base:        var(--neutral-900);
  --surface-card:   var(--neutral-880);
  --surface-raised: var(--neutral-850);
  --surface-hover:  var(--neutral-800);
  --surface-sunken: var(--neutral-950);

  /* Text */
  --text-primary:   var(--neutral-050);
  --text-secondary: var(--neutral-300);
  --text-tertiary:  var(--neutral-400);
  --text-disabled:  var(--neutral-500);
  --text-inverse:   var(--neutral-950);
  --text-accent:    var(--blue-400);

  /* Borders */
  --border-subtle:  var(--neutral-750);
  --border-default: var(--neutral-700);
  --border-strong:  var(--neutral-600);
  --border-accent:  var(--blue-500);

  /* Accent roles */
  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-400);
  --accent-press:   var(--blue-600);
  --accent-fg:      var(--white);
  --accent-soft:    rgba(61, 123, 255, 0.12);
  --accent-ring:    var(--blue-glow);

  /* Functional roles */
  --success:        var(--green-500);
  --success-soft:   rgba(63, 183, 101, 0.12);
  --danger:         var(--red-500);
  --danger-soft:    rgba(240, 80, 60, 0.12);
  --warning:        var(--amber-500);
  --warning-soft:   rgba(227, 179, 65, 0.12);

  /* Node-canvas semantics (product-specific) */
  --port-flow:      var(--neutral-200);  /* execution flow */
  --port-data:      var(--green-500);    /* numeric / value */
  --port-condition: var(--red-500);      /* boolean condition */
  --port-param:     var(--amber-500);    /* config parameter */
  --port-signal:    var(--blue-400);     /* signal / selection */
}