/**
* ===================================
* GunCult UI Kit - Spacing Utilities
* ===================================
*
* Система utility классов для быстрой разработки
* Naming convention: gc-{property}{direction}-{size}
*
* Properties:
* - m = margin
* - p = padding
*
* Directions:
* - t = top
* - r = right
* - b = bottom
* - l = left
* - x = horizontal (left + right)
* - y = vertical (top + bottom)
* - (none) = all sides
*
* Sizes: 0, 1, 1-5, 2, 2-5, 3, 4, 6, 8, 12, 16, 96 (+ legacy xs/sm/md aliases)
*/
/* ===================================
Utility-классы на --space-*; число в имени = Figma space/N.
xs/sm/md/lg — legacy alias. Контракт: .cursor/rules/spacing-tokens.mdc
===================================
*/
/* Figma-only steps (no legacy alias) */
.gc-m-1-5 { margin: var(--space-1-5) !important; }
.gc-m-2-5 { margin: var(--space-2-5) !important; }
.gc-m-3 { margin: var(--space-3) !important; }
.gc-p-1-5 { padding: var(--space-1-5) !important; }
.gc-p-2-5 { padding: var(--space-2-5) !important; }
.gc-p-3 { padding: var(--space-3) !important; }
.gc-gap-1-5 { gap: var(--space-1-5) !important; }
.gc-gap-2-5 { gap: var(--space-2-5) !important; }
.gc-gap-3 { gap: var(--space-3) !important; }
/* ===================================
Margin - All Sides
=================================== */
.gc-m-0 { margin: var(--space-0) !important; }
.gc-m-1, .gc-m-xs { margin: var(--space-1) !important; }
.gc-m-2, .gc-m-sm { margin: var(--space-2) !important; }
.gc-m-4, .gc-m-md { margin: var(--space-4) !important; }
.gc-m-6, .gc-m-lg { margin: var(--space-6) !important; }
.gc-m-8, .gc-m-xl { margin: var(--space-8) !important; }
.gc-m-12, .gc-m-2xl { margin: var(--space-12) !important; }
.gc-m-16, .gc-m-3xl { margin: var(--space-16) !important; }
.gc-m-96, .gc-m-4xl { margin: var(--space-product-96) !important; }
/* ===================================
Margin - Top
=================================== */
.gc-mt-0 { margin-top: var(--space-0) !important; }
.gc-mt-1, .gc-mt-xs { margin-top: var(--space-1) !important; }
.gc-mt-2, .gc-mt-sm { margin-top: var(--space-2) !important; }
.gc-mt-4, .gc-mt-md { margin-top: var(--space-4) !important; }
.gc-mt-6, .gc-mt-lg { margin-top: var(--space-6) !important; }
.gc-mt-8, .gc-mt-xl { margin-top: var(--space-8) !important; }
.gc-mt-12, .gc-mt-2xl { margin-top: var(--space-12) !important; }
.gc-mt-16, .gc-mt-3xl { margin-top: var(--space-16) !important; }
.gc-mt-96, .gc-mt-4xl { margin-top: var(--space-product-96) !important; }
/* ===================================
Margin - Right
=================================== */
.gc-mr-0 { margin-right: var(--space-0) !important; }
.gc-mr-1, .gc-mr-xs { margin-right: var(--space-1) !important; }
.gc-mr-2, .gc-mr-sm { margin-right: var(--space-2) !important; }
.gc-mr-4, .gc-mr-md { margin-right: var(--space-4) !important; }
.gc-mr-6, .gc-mr-lg { margin-right: var(--space-6) !important; }
.gc-mr-8, .gc-mr-xl { margin-right: var(--space-8) !important; }
.gc-mr-12, .gc-mr-2xl { margin-right: var(--space-12) !important; }
.gc-mr-16, .gc-mr-3xl { margin-right: var(--space-16) !important; }
.gc-mr-96, .gc-mr-4xl { margin-right: var(--space-product-96) !important; }
/* ===================================
Margin - Bottom
=================================== */
.gc-mb-0 { margin-bottom: var(--space-0) !important; }
.gc-mb-1, .gc-mb-xs { margin-bottom: var(--space-1) !important; }
.gc-mb-2, .gc-mb-sm { margin-bottom: var(--space-2) !important; }
.gc-mb-4, .gc-mb-md { margin-bottom: var(--space-4) !important; }
.gc-mb-6, .gc-mb-lg { margin-bottom: var(--space-6) !important; }
.gc-mb-8, .gc-mb-xl { margin-bottom: var(--space-8) !important; }
.gc-mb-12, .gc-mb-2xl { margin-bottom: var(--space-12) !important; }
.gc-mb-16, .gc-mb-3xl { margin-bottom: var(--space-16) !important; }
.gc-mb-96, .gc-mb-4xl { margin-bottom: var(--space-product-96) !important; }
/* ===================================
Margin - Left
=================================== */
.gc-ml-0 { margin-left: var(--space-0) !important; }
.gc-ml-1, .gc-ml-xs { margin-left: var(--space-1) !important; }
.gc-ml-2, .gc-ml-sm { margin-left: var(--space-2) !important; }
.gc-ml-4, .gc-ml-md { margin-left: var(--space-4) !important; }
.gc-ml-6, .gc-ml-lg { margin-left: var(--space-6) !important; }
.gc-ml-8, .gc-ml-xl { margin-left: var(--space-8) !important; }
.gc-ml-12, .gc-ml-2xl { margin-left: var(--space-12) !important; }
.gc-ml-16, .gc-ml-3xl { margin-left: var(--space-16) !important; }
.gc-ml-96, .gc-ml-4xl { margin-left: var(--space-product-96) !important; }
/* ===================================
Margin - Horizontal (Left + Right)
=================================== */
.gc-mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.gc-mx-1, .gc-mx-xs { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.gc-mx-2, .gc-mx-sm { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.gc-mx-4, .gc-mx-md { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.gc-mx-6, .gc-mx-lg { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.gc-mx-8, .gc-mx-xl { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.gc-mx-12, .gc-mx-2xl { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.gc-mx-16, .gc-mx-3xl { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
.gc-mx-96, .gc-mx-4xl { margin-left: var(--space-product-96) !important; margin-right: var(--space-product-96) !important; }
/* ===================================
Margin - Vertical (Top + Bottom)
=================================== */
.gc-my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.gc-my-1, .gc-my-xs { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.gc-my-2, .gc-my-sm { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.gc-my-4, .gc-my-md { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.gc-my-6, .gc-my-lg { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.gc-my-8, .gc-my-xl { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.gc-my-12, .gc-my-2xl { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.gc-my-16, .gc-my-3xl { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
.gc-my-96, .gc-my-4xl { margin-top: var(--space-product-96) !important; margin-bottom: var(--space-product-96) !important; }
/* ===================================
Margin - Auto (Centering)
=================================== */
.gc-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.gc-ml-auto { margin-left: auto !important; }
.gc-mr-auto { margin-right: auto !important; }
.gc-mt-auto { margin-top: auto !important; }
.gc-mb-auto { margin-bottom: auto !important; }
/* ===================================
Padding - All Sides
=================================== */
.gc-p-0 { padding: var(--space-0) !important; }
.gc-p-1, .gc-p-xs { padding: var(--space-1) !important; }
.gc-p-2, .gc-p-sm { padding: var(--space-2) !important; }
.gc-p-4, .gc-p-md { padding: var(--space-4) !important; }
.gc-p-6, .gc-p-lg { padding: var(--space-6) !important; }
.gc-p-8, .gc-p-xl { padding: var(--space-8) !important; }
.gc-p-12, .gc-p-2xl { padding: var(--space-12) !important; }
.gc-p-16, .gc-p-3xl { padding: var(--space-16) !important; }
.gc-p-96, .gc-p-4xl { padding: var(--space-product-96) !important; }
/* ===================================
Padding - Top
=================================== */
.gc-pt-0 { padding-top: var(--space-0) !important; }
.gc-pt-1, .gc-pt-xs { padding-top: var(--space-1) !important; }
.gc-pt-2, .gc-pt-sm { padding-top: var(--space-2) !important; }
.gc-pt-4, .gc-pt-md { padding-top: var(--space-4) !important; }
.gc-pt-6, .gc-pt-lg { padding-top: var(--space-6) !important; }
.gc-pt-8, .gc-pt-xl { padding-top: var(--space-8) !important; }
.gc-pt-12, .gc-pt-2xl { padding-top: var(--space-12) !important; }
.gc-pt-16, .gc-pt-3xl { padding-top: var(--space-16) !important; }
.gc-pt-96, .gc-pt-4xl { padding-top: var(--space-product-96) !important; }
/* ===================================
Padding - Right
=================================== */
.gc-pr-0 { padding-right: var(--space-0) !important; }
.gc-pr-1, .gc-pr-xs { padding-right: var(--space-1) !important; }
.gc-pr-2, .gc-pr-sm { padding-right: var(--space-2) !important; }
.gc-pr-4, .gc-pr-md { padding-right: var(--space-4) !important; }
.gc-pr-6, .gc-pr-lg { padding-right: var(--space-6) !important; }
.gc-pr-8, .gc-pr-xl { padding-right: var(--space-8) !important; }
.gc-pr-12, .gc-pr-2xl { padding-right: var(--space-12) !important; }
.gc-pr-16, .gc-pr-3xl { padding-right: var(--space-16) !important; }
.gc-pr-96, .gc-pr-4xl { padding-right: var(--space-product-96) !important; }
/* ===================================
Padding - Bottom
=================================== */
.gc-pb-0 { padding-bottom: var(--space-0) !important; }
.gc-pb-1, .gc-pb-xs { padding-bottom: var(--space-1) !important; }
.gc-pb-2, .gc-pb-sm { padding-bottom: var(--space-2) !important; }
.gc-pb-4, .gc-pb-md { padding-bottom: var(--space-4) !important; }
.gc-pb-6, .gc-pb-lg { padding-bottom: var(--space-6) !important; }
.gc-pb-8, .gc-pb-xl { padding-bottom: var(--space-8) !important; }
.gc-pb-12, .gc-pb-2xl { padding-bottom: var(--space-12) !important; }
.gc-pb-16, .gc-pb-3xl { padding-bottom: var(--space-16) !important; }
.gc-pb-96, .gc-pb-4xl { padding-bottom: var(--space-product-96) !important; }
/* ===================================
Padding - Left
=================================== */
.gc-pl-0 { padding-left: var(--space-0) !important; }
.gc-pl-1, .gc-pl-xs { padding-left: var(--space-1) !important; }
.gc-pl-2, .gc-pl-sm { padding-left: var(--space-2) !important; }
.gc-pl-4, .gc-pl-md { padding-left: var(--space-4) !important; }
.gc-pl-6, .gc-pl-lg { padding-left: var(--space-6) !important; }
.gc-pl-8, .gc-pl-xl { padding-left: var(--space-8) !important; }
.gc-pl-12, .gc-pl-2xl { padding-left: var(--space-12) !important; }
.gc-pl-16, .gc-pl-3xl { padding-left: var(--space-16) !important; }
.gc-pl-96, .gc-pl-4xl { padding-left: var(--space-product-96) !important; }
/* ===================================
Padding - Horizontal (Left + Right)
=================================== */
.gc-px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.gc-px-1, .gc-px-xs { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.gc-px-2, .gc-px-sm { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.gc-px-4, .gc-px-md { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.gc-px-6, .gc-px-lg { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.gc-px-8, .gc-px-xl { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.gc-px-12, .gc-px-2xl { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.gc-px-16, .gc-px-3xl { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
.gc-px-96, .gc-px-4xl { padding-left: var(--space-product-96) !important; padding-right: var(--space-product-96) !important; }
/* ===================================
Padding - Vertical (Top + Bottom)
=================================== */
.gc-py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.gc-py-1, .gc-py-xs { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.gc-py-2, .gc-py-sm { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.gc-py-4, .gc-py-md { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.gc-py-6, .gc-py-lg { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.gc-py-8, .gc-py-xl { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.gc-py-12, .gc-py-2xl { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.gc-py-16, .gc-py-3xl { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.gc-py-96, .gc-py-4xl { padding-top: var(--space-product-96) !important; padding-bottom: var(--space-product-96) !important; }
/* ===================================
Gap Utilities (for Flexbox/Grid)
=================================== */
.gc-gap-0 { gap: var(--space-0) !important; }
.gc-gap-1, .gc-gap-xs { gap: var(--space-1) !important; }
.gc-gap-2, .gc-gap-sm { gap: var(--space-2) !important; }
.gc-gap-4, .gc-gap-md { gap: var(--space-4) !important; }
.gc-gap-6, .gc-gap-lg { gap: var(--space-6) !important; }
.gc-gap-8, .gc-gap-xl { gap: var(--space-8) !important; }
.gc-gap-12, .gc-gap-2xl { gap: var(--space-12) !important; }
.gc-gap-16, .gc-gap-3xl { gap: var(--space-16) !important; }
.gc-gap-96, .gc-gap-4xl { gap: var(--space-product-96) !important; }
/* Gap - Horizontal only */
.gc-gap-x-0 { column-gap: var(--space-0) !important; }
.gc-gap-x-1, .gc-gap-x-xs { column-gap: var(--space-1) !important; }
.gc-gap-x-2, .gc-gap-x-sm { column-gap: var(--space-2) !important; }
.gc-gap-x-4, .gc-gap-x-md { column-gap: var(--space-4) !important; }
.gc-gap-x-6, .gc-gap-x-lg { column-gap: var(--space-6) !important; }
.gc-gap-x-8, .gc-gap-x-xl { column-gap: var(--space-8) !important; }
.gc-gap-x-12, .gc-gap-x-2xl { column-gap: var(--space-12) !important; }
.gc-gap-x-16, .gc-gap-x-3xl { column-gap: var(--space-16) !important; }
.gc-gap-x-96, .gc-gap-x-4xl { column-gap: var(--space-product-96) !important; }
/* Gap - Vertical only */
.gc-gap-y-0 { row-gap: var(--space-0) !important; }
.gc-gap-y-1, .gc-gap-y-xs { row-gap: var(--space-1) !important; }
.gc-gap-y-2, .gc-gap-y-sm { row-gap: var(--space-2) !important; }
.gc-gap-y-4, .gc-gap-y-md { row-gap: var(--space-4) !important; }
.gc-gap-y-6, .gc-gap-y-lg { row-gap: var(--space-6) !important; }
.gc-gap-y-8, .gc-gap-y-xl { row-gap: var(--space-8) !important; }
.gc-gap-y-12, .gc-gap-y-2xl { row-gap: var(--space-12) !important; }
.gc-gap-y-16, .gc-gap-y-3xl { row-gap: var(--space-16) !important; }
.gc-gap-y-96, .gc-gap-y-4xl { row-gap: var(--space-product-96) !important; }
/* ===================================
Usage Examples
=================================== */
/*
Example 1: Card with spacing (prefer numeric sizes)
Example 2: Centered container
Content
Example 3: Flex with gap
Example 4: Responsive spacing
Responsive padding
*/