/* ============================================================
   FLYBITS SPACING & LAYOUT
   4px base grid. Bento-box layouts favour generous gaps.
   ============================================================ */
:root{
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;
  --sp-32:128px;

  /* Radii — the bento-box grid is built on soft, generous rounding */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;   /* default control radius */
  --radius-lg:24px;   /* cards */
  --radius-xl:32px;   /* bento tiles */
  --radius-2xl:44px;  /* hero panels */
  --radius-pill:999px;

  /* Container widths */
  --container-sm:640px;
  --container-md:960px;
  --container-lg:1200px;
  --container-xl:1440px;

  /* Layout gutters */
  --gutter:clamp(20px,5vw,80px); /* @kind spacing */
}