/* ============================================================
   DNX Experience — Spacing, radii, shadows, motion
   Vendored verbatim from the DNX Experience design system.
   ============================================================ */

:root {
  /* ── Spacing scale (4px base) ──────────────────────────── */
  --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;

  /* App rhythm: top-nav uses 20px paddings; content max-width 1280px */
  --layout-max:      1280px;
  --layout-gutter:   25px;
  --box-pad-x:       24px;
  --box-pad-y:       24px;
  --box-header-pad:  20px 24px 16px;

  /* ── Radii ─────────────────────────────────────────────── */
  /* DNX is a FLAT, low-radius system. Boxes are often sharp;
     buttons & pills are fully rounded. */
  --radius:      10px;   /* base card/control radius (0.625rem) */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-tag:  30px;    /* status tags                        */
  --radius-pill: 100px;   /* buttons, chips, switches           */
  --radius-sharp: 0px;    /* dx-box flat containers             */

  /* ── Shadows ───────────────────────────────────────────── */
  /* Brand "web" shadows are offset & directional (down-right). */
  --shadow-dnx-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-dnx-deep:    12px 12px 50px rgba(0, 0, 0, 0.4);
  /* UI shadows — soft, for popovers / dropdowns / dialogs.     */
  --shadow-xs: 0 1px 2px rgba(37, 37, 62, 0.06);
  --shadow-sm: 0 1px 3px rgba(37, 37, 62, 0.08), 0 1px 2px rgba(37, 37, 62, 0.04);
  --shadow-md: 0 4px 12px rgba(37, 37, 62, 0.10);
  --shadow-lg: 0 12px 32px rgba(37, 37, 62, 0.14);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   200ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-slower: 600ms;
  --dur-theme:  500ms;
}