/* ==========================================================================
   Spacing Design Tokens
   ========================================================================== */

:root {
  /* Corner Radius */
  --radius-xs: 6px;
  --radius-sm: 4px;
  --radius-default: 10px;

  /* Margins */
  --margin-desktop: 64px;
  --margin-tablet: 32px;
  --margin-mobile: 24px;

  /* Vertical Padding */
  --padding-vertical-desktop: 72px;
  --padding-vertical-mobile: 48px;

  /* Base Spacing Scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 72px;

  /* Responsive Spacing Aliases */
  --spacing-margin: var(--margin-desktop);
  --spacing-padding-vertical: var(--padding-vertical-desktop);
}

/* Responsive Spacing */
@media (max-width: 1024px) {
  :root {
    --spacing-margin: var(--margin-tablet);
  }
}

@media (max-width: 768px) {
  :root {
    --spacing-margin: var(--margin-mobile);
    --spacing-padding-vertical: var(--padding-vertical-mobile);
  }
}

/* Utility Classes */
.f4f-margin-xs { margin: var(--spacing-xs); }
.f4f-margin-sm { margin: var(--spacing-sm); }
.f4f-margin-md { margin: var(--spacing-md); }
.f4f-margin-lg { margin: var(--spacing-lg); }
.f4f-margin-xl { margin: var(--spacing-xl); }

.f4f-padding-xs { padding: var(--spacing-xs); }
.f4f-padding-sm { padding: var(--spacing-sm); }
.f4f-padding-md { padding: var(--spacing-md); }
.f4f-padding-lg { padding: var(--spacing-lg); }
.f4f-padding-xl { padding: var(--spacing-xl); }

.f4f-radius-xs { border-radius: var(--radius-xs); }
.f4f-radius-sm { border-radius: var(--radius-sm); }
.f4f-radius-default { border-radius: var(--radius-default); }