/* Botnest shape, spacing, elevation, density & motion tokens. */

:root {
  /* ---- Shape (soft, calm radii) ---- */
  --bn-radius-xs:   4px;   /* chips, badges, small tags */
  --bn-radius-sm:   8px;   /* inputs, buttons */
  --bn-radius-md:   12px;  /* cards, menus */
  --bn-radius-lg:   16px;  /* modals, side panels */
  --bn-radius-xl:   22px;  /* hero shells */
  --bn-radius-pill: 999px; /* progress, streak dots, avatars */

  /* ---- Spacing (4px base) ---- */
  --bn-sp-1:  4px;
  --bn-sp-2:  8px;
  --bn-sp-3:  12px;
  --bn-sp-4:  16px;
  --bn-sp-5:  20px;
  --bn-sp-6:  24px;
  --bn-sp-7:  32px;
  --bn-sp-8:  40px;
  --bn-sp-9:  48px;
  --bn-sp-10: 64px;

  /* ---- Density: compact (DEFAULT) ----
     Data-first tools: tight rows, 14px body. */
  --bn-control-h:    32px;  /* inputs, buttons */
  --bn-control-h-sm: 26px;
  --bn-control-h-lg: 38px;
  --bn-row-h:        36px;  /* table rows */
  --bn-cell-pad-x:   12px;
  --bn-cell-pad-y:   7px;
  --bn-font-body:    14px;
  --bn-font-small:   12.5px;
  --bn-gap-control:  8px;
  --bn-card-pad:     14px;

  /* ---- Glass / blur (overlays only) ---- */
  --bn-blur: 14px;

  /* ---- Motion: calm but alive ---- */
  --bn-dur-1: 150ms;  /* hovers, toggles */
  --bn-dur-2: 200ms;  /* reveals, fades */
  --bn-dur-3: 250ms;  /* panels, modals */
  --bn-ease:     cubic-bezier(0.25, 0, 0.15, 1);  /* standard out */
  --bn-ease-io:  cubic-bezier(0.45, 0, 0.2, 1);   /* move / resize */
  --bn-ease-spring: cubic-bezier(0.34, 1.4, 0.45, 1); /* physical feedback ONLY: chart load-in growth, card tilt settle — never UI transitions */
  /* No bounce. No springs. No parallax (spring ease is reserved for the physical feedback above). */
}

/* ---- Density: comfortable (roomier reading surfaces) ----
   <div data-bn-density="comfortable"> … scopes to any subtree.
   data-bn-density="compact" also works (matches the default). */
[data-bn-density="comfortable"] {
  --bn-control-h:    38px;
  --bn-control-h-sm: 30px;
  --bn-control-h-lg: 44px;
  --bn-row-h:        48px;
  --bn-cell-pad-x:   16px;
  --bn-cell-pad-y:   12px;
  --bn-font-body:    15px;
  --bn-font-small:   13px;
  --bn-gap-control:  10px;
  --bn-card-pad:     20px;
}
[data-bn-density="compact"] {
  --bn-control-h:    32px;
  --bn-control-h-sm: 26px;
  --bn-control-h-lg: 38px;
  --bn-row-h:        36px;
  --bn-cell-pad-x:   12px;
  --bn-cell-pad-y:   7px;
  --bn-font-body:    14px;
  --bn-font-small:   12.5px;
  --bn-gap-control:  8px;
  --bn-card-pad:     14px;
}