/* ─── Suna Spacing System ─── */

:root {
  /* ── Base Scale ── */
  --space-px:   1px;
  --space-0-5:  0.125rem;   /*  2px */
  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */

  /* ── Post Safe Areas ── */
  --post-margin-square:    7%;   /* 1:1 posts */
  --post-margin-portrait:  6%;   /* 4:5 posts */
  --post-margin-story:     5%;   /* 9:16 stories */
  --post-margin-landscape: 5%;   /* 16:9 / LinkedIn */

  /* ── Post Padding ── */
  --post-pad-sm:  var(--space-6);
  --post-pad-md:  var(--space-10);
  --post-pad-lg:  var(--space-16);

  /* ── Element Spacing ── */
  --gap-tight:   var(--space-2);
  --gap-sm:      var(--space-3);
  --gap-md:      var(--space-6);
  --gap-lg:      var(--space-10);
  --gap-xl:      var(--space-16);

  /* ── Border Radius ── */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-pill:  9999px;
}