/* ============================================================
   VOREN · SPACING, RADII, SHADOWS, MOTION
   4px base grid. Radii are restrained (Linear/Vercel-adjacent):
   tight on controls, medium on cards, never pill-round on surfaces.
   ============================================================ */
:root {
  /* Spacing (4px grid) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* inputs, small buttons */
  --radius-md:   8px;   /* buttons, chips */
  --radius-lg:   10px;  /* cards, nodes */
  --radius-xl:   14px;  /* panels, modals */
  --radius-2xl:  20px;  /* large marketing surfaces */
  --radius-full: 999px;

  /* Border widths */
  --border-hairline: 1px;
  --border-thick:    1.5px;

  /* Shadows — dark UI relies on borders + faint lift, not heavy drops */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.6);
  --shadow-node: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--border-default);
  --ring-accent: 0 0 0 1px var(--blue-500), 0 0 0 4px var(--accent-ring);
  --ring-focus:  0 0 0 3px var(--accent-ring);

  /* Inner highlight for elevated dark surfaces */
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.04);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   280ms;  /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --sidebar-w: 340px;
}