/* Saltycustoms Design System — Spacing Tokens */
/* 4px base unit with 2px micro-step */

:root {
  /* ── Base Scale ──────────────────────────────────────────── */
  --spacing-xxs:     2px;   /* micro-step — tight icon gaps */
  --spacing-xs:      4px;   /* dense category-strip dividers */
  --spacing-sm:      8px;   /* caption / date-row gutters, card caption spacing */
  --spacing-md:      12px;  /* internal row padding */
  --spacing-base:    16px;  /* card meta block padding; between-card gutters */
  --spacing-lg:      24px;  /* host-card, reservation-card padding; footer gutters */
  --spacing-xl:      32px;  /* icon sizes, larger section gaps */
  --spacing-xxl:     48px;  /* footer vertical padding */
  --spacing-section: 64px;  /* major page-band vertical breathing room */

  /* ── Component-specific Shortcuts ───────────────────────── */
  --spacing-card-pad:      var(--spacing-base);   /* property-card meta block */
  --spacing-card-pad-lg:   var(--spacing-lg);     /* host-card, reservation-card */
  --spacing-nav-height:    80px;                  /* top nav height */
  --spacing-search-height: 64px;                  /* search bar pill height */
  --spacing-btn-height:    48px;                  /* primary CTA height */
  --spacing-btn-px:        24px;                  /* primary CTA horizontal padding */
  --spacing-btn-py:        14px;                  /* primary CTA vertical padding */
  --spacing-datepicker-day:40px;                  /* date-picker day cell size */
  --spacing-orb-size:      48px;                  /* search orb / touch target */
  --spacing-icon-size:     32px;                  /* product-tab illustrated icon */
}