/* ═══════════════════════════════════════════════════════════════════════════
   SPACING TOKENS — Single source of truth for the spacing rhythm.
   See docs/style-guide.md §7 for which tier to use in which context.

   Loaded after typography.css and before component CSS. Tokens are
   theme-agnostic — same values in light and dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  /* ── Tight (within a component) ── */
  --space-1:  0.25rem;  /*  4px — icon-to-text gap, badge padding */

  /* ── Compact (between related elements) ── */
  --space-2:  0.5rem;   /*  8px — stacked labels, list item padding */
  --space-3:  0.75rem;  /* 12px — tighter list rows */

  /* ── Standard (within a card / between sections in a card) ── */
  --space-4:  1rem;     /* 16px — between field rows, default gap */
  --space-5:  1.5rem;   /* 24px — title to content, between toggle rows */

  /* ── Generous (between cards / between major page sections) ── */
  --space-6:  2rem;     /* 32px — between cards */
  --space-8:  3rem;     /* 48px — between major page sections */

  /* ── Landing only (marketing rhythm) ── */
  --space-10: 4rem;     /* 64px — between landing sections */
  --space-12: 5rem;     /* 80px — hero-to-next-section gap */
}