/* DriveWhip spacing, radii, sizing. 4px base grid. */

:root {
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  2.5rem;  /* 40 */
  --space-8:  3rem;    /* 48 */
  --space-9:  4rem;    /* 64 */
  --space-10: 6rem;    /* 96 */

  /* Radii — friendly, modern, generously rounded */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Content-frame sizes (social) */
  --frame-reel-w:    1080px;
  --frame-reel-h:    1920px;
  --frame-square:    1080px;
  --frame-portrait-h:1350px; /* 4:5 carousel */

  /* Safe zone padding for video (avoid UI overlap) */
  --safe-top:    220px;
  --safe-bottom: 320px;
  --safe-x:      72px;
}