/* ── Surface ─────────────────────────────────────────────────────────────────
   Depth is a hairline plus a very low, cool shadow — never blur alone, never a
   coloured left border as decoration (the cobalt sideline means hovered or
   active, nothing else).

   RADIUS DISCIPLINE: hover cells and statement tiles are SQUARE. Rounding is
   for controls, panels and cards only. */
:root {
  --radius-cell:0;
  --radius-chip:3px;
  --radius-control:4px;
  --radius-inset:6px;
  --radius-panel:8px;
  --radius-card:10px;
  --radius-instrument:12px;
  --radius-node:50%;

  --border-w:1px; /* @kind spacing */
  --sideline-w:2px; /* @kind spacing */

  --shadow-1:0 1px 2px rgba(11,17,26,.04);
  --shadow-2:0 10px 26px -18px rgba(11,17,26,.32);
  --shadow-3:0 12px 30px -20px rgba(11,17,26,.34);
  --shadow-4:0 14px 30px -18px rgba(11,17,26,.35);
  --shadow-instrument:0 1px 2px rgba(11,17,26,.04),0 18px 40px -24px rgba(11,17,26,.26);
  --ring-signal:0 0 0 5px rgba(37,99,235,.12);

  /* diagram inks */
  --diagram-hairline:var(--n-200);
  --diagram-outline:var(--n-300);
  --diagram-active:var(--signal-400);
  --diagram-fill:var(--n-000);
  --diagram-fill-alt:var(--n-025);
  --diagram-fill-active:rgba(37,99,235,.12);
  --diagram-stop:var(--port-500);
  --diagram-dash:4 4; /* @kind other */
  --diagram-w-hair:1; /* @kind other */
  --diagram-w-outline:1.3; /* @kind other */
  --diagram-w-active:1.6; /* @kind other */

  --veil:rgba(250,251,253,.82);
  --blur-veil:12px; /* @kind other */

  --z-header:40; /* @kind other */
  --z-overlay:60; /* @kind other */
}