/* ============================================================
   PIIPS — SPACING, RADII, SHADOWS, MOTION
   8pt-ish rhythm, tight mobile gutters (16px screen padding).
   ============================================================ */

:root {
  /* ---- Spacing scale --------------------------------------- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-8:  16px;   /* screen gutter */
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;

  --gutter:   16px;   /* horizontal screen padding */
  --feed-gap: 12px;   /* between feed rows */

  /* ---- Radii (sheets use 8, popups 4) ---------------------- */
  --radius-xs:   4px;   /* popups, chips (Figma note: shared 4px) */
  --radius-sm:   6px;
  --radius-md:   8px;   /* sheets, cards, media */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px; /* avatars, FAB, segmented */

  /* ---- Hit targets ----------------------------------------- */
  --tap-min: 44px;

  /* ---- Elevation -------------------------------------------- */
  /* The app is flat-dark; elevation reads through surface tone,
     not drop shadow. Green glow is the one "lift" we allow.     */
  --shadow-sheet:  0 -8px 32px rgba(0,0,0,0.6);
  --shadow-fab:    0 4px 16px rgba(0,0,0,0.5);
  --glow-green:    0 0 0 1px rgba(0,255,0,0.6), 0 0 16px rgba(0,255,0,0.35);
  --glow-green-sm: 0 0 8px rgba(0,255,0,0.45);

  /* ---- Blur (scrims, frosted nav) -------------------------- */
  --blur-scrim: 4px;
  --blur-nav:   20px;

  /* ---- Motion ---------------------------------------------- */
  /* Crisp, electronic. Quick fades + appear (Figma: "fade and
     appear in 3s gradient" for upload; "heart stroke→red 1-2ms"). */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}