/**
 * Spacing System - Wheelie Frontend
 *
 * Aligned with iOS Theme.Spacing from:
 * wheelie-app/Wheelie/Wheelie/Utils/Constants/Theme.swift
 *
 * Provides consistent spacing throughout the application using CSS custom properties
 * and utility classes.
 */

:root {
  /* ========================================
     SPACING SCALE (matches iOS Theme.Spacing)
     ======================================== */
  --spacing-xs: 4px;   /* Theme.Spacing.xs */
  --spacing-sm: 8px;   /* Theme.Spacing.sm */
  --spacing-md: 16px;  /* Theme.Spacing.md */
  --spacing-lg: 24px;  /* Theme.Spacing.lg */
  --spacing-xl: 32px;  /* Theme.Spacing.xl */

  /* ========================================
     CORNER RADIUS (matches iOS Theme.CornerRadius)
     ======================================== */
  --radius-sm: 8px;    /* Theme.CornerRadius.sm */
  --radius-md: 12px;   /* Theme.CornerRadius.md */
  --radius-lg: 16px;   /* Theme.CornerRadius.lg */

  /* ========================================
     BORDER WIDTH (matches iOS Theme.BorderWidth)
     ======================================== */
  --border-thin: 1px;    /* Theme.BorderWidth.thin */
  --border-medium: 2px;  /* Theme.BorderWidth.medium */
  --border-thick: 4px;   /* Theme.BorderWidth.thick */

  /* ========================================
     ICON SIZE (matches iOS Theme.IconSize)
     ======================================== */
  --icon-sm: 16px;  /* Theme.IconSize.sm */
  --icon-md: 20px;  /* Theme.IconSize.md */
  --icon-lg: 24px;  /* Theme.IconSize.lg */
}

/* ========================================
   PADDING UTILITY CLASSES
   ======================================== */

/* All sides */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Horizontal (left + right) */
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

/* Vertical (top + bottom) */
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Individual sides */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

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

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

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

/* ========================================
   MARGIN UTILITY CLASSES
   ======================================== */

/* All sides */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Horizontal (left + right) */
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

/* Vertical (top + bottom) */
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

/* Individual sides */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

/* ========================================
   GAP UTILITY CLASSES (for flexbox/grid)
   ======================================== */

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

/* ========================================
   BORDER RADIUS UTILITY CLASSES
   ======================================== */

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Individual corners */
.rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

.rounded-b-sm { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* ========================================
   BORDER WIDTH UTILITY CLASSES
   ======================================== */

.border-thin { border-width: var(--border-thin); }
.border-medium { border-width: var(--border-medium); }
.border-thick { border-width: var(--border-thick); }

/* ========================================
   ICON SIZE UTILITY CLASSES
   ======================================== */

.icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
  font-size: var(--icon-sm);
}

.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
  font-size: var(--icon-md);
}

.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  font-size: var(--icon-lg);
}

/* ========================================
   USAGE EXAMPLES
   ======================================== */

/*
  CSS Variables:
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  border-radius: var(--radius-md);
  gap: var(--spacing-sm);

  Utility Classes:
  <div class="p-md rounded-md">Card content</div>
  <div class="px-lg py-md">Form content</div>
  <div class="mt-lg mb-md">Section</div>
  <div class="gap-sm">Grid container</div>
  <i class="icon-md">Font Awesome icon</i>
*/