/**
 * ===================================
 * 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: xs, sm, md, lg, xl, 2xl, 3xl
 */

/* ===================================
   Spacing Tokens (CSS Variables)
   =================================== */
:root {
    --spacing-0: 0;
    --spacing-2xs: 0.125rem; /* 2px */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-3xs: 0.375rem; /* 6px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-2sm: 0.625rem; /* 10px */
    --spacing-3sm: 0.75rem;  /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-mdl: 1.25rem;  /* 20px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-1-5xl: 2.5rem; /* 40px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-2-5xl: 3.5rem; /* 56px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 6rem;     /* 96px */
}

/* ===================================
   Margin - All Sides
   =================================== */
.gc-m-0 { margin: var(--spacing-0) !important; }
.gc-m-xs { margin: var(--spacing-xs) !important; }
.gc-m-sm { margin: var(--spacing-sm) !important; }
.gc-m-md { margin: var(--spacing-md) !important; }
.gc-m-lg { margin: var(--spacing-lg) !important; }
.gc-m-xl { margin: var(--spacing-xl) !important; }
.gc-m-2xl { margin: var(--spacing-2xl) !important; }
.gc-m-3xl { margin: var(--spacing-3xl) !important; }
.gc-m-4xl { margin: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Top
   =================================== */
.gc-mt-0 { margin-top: var(--spacing-0) !important; }
.gc-mt-xs { margin-top: var(--spacing-xs) !important; }
.gc-mt-sm { margin-top: var(--spacing-sm) !important; }
.gc-mt-md { margin-top: var(--spacing-md) !important; }
.gc-mt-lg { margin-top: var(--spacing-lg) !important; }
.gc-mt-xl { margin-top: var(--spacing-xl) !important; }
.gc-mt-2xl { margin-top: var(--spacing-2xl) !important; }
.gc-mt-3xl { margin-top: var(--spacing-3xl) !important; }
.gc-mt-4xl { margin-top: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Right
   =================================== */
.gc-mr-0 { margin-right: var(--spacing-0) !important; }
.gc-mr-xs { margin-right: var(--spacing-xs) !important; }
.gc-mr-sm { margin-right: var(--spacing-sm) !important; }
.gc-mr-md { margin-right: var(--spacing-md) !important; }
.gc-mr-lg { margin-right: var(--spacing-lg) !important; }
.gc-mr-xl { margin-right: var(--spacing-xl) !important; }
.gc-mr-2xl { margin-right: var(--spacing-2xl) !important; }
.gc-mr-3xl { margin-right: var(--spacing-3xl) !important; }
.gc-mr-4xl { margin-right: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Bottom
   =================================== */
.gc-mb-0 { margin-bottom: var(--spacing-0) !important; }
.gc-mb-xs { margin-bottom: var(--spacing-xs) !important; }
.gc-mb-sm { margin-bottom: var(--spacing-sm) !important; }
.gc-mb-md { margin-bottom: var(--spacing-md) !important; }
.gc-mb-lg { margin-bottom: var(--spacing-lg) !important; }
.gc-mb-xl { margin-bottom: var(--spacing-xl) !important; }
.gc-mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.gc-mb-3xl { margin-bottom: var(--spacing-3xl) !important; }
.gc-mb-4xl { margin-bottom: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Left
   =================================== */
.gc-ml-0 { margin-left: var(--spacing-0) !important; }
.gc-ml-xs { margin-left: var(--spacing-xs) !important; }
.gc-ml-sm { margin-left: var(--spacing-sm) !important; }
.gc-ml-md { margin-left: var(--spacing-md) !important; }
.gc-ml-lg { margin-left: var(--spacing-lg) !important; }
.gc-ml-xl { margin-left: var(--spacing-xl) !important; }
.gc-ml-2xl { margin-left: var(--spacing-2xl) !important; }
.gc-ml-3xl { margin-left: var(--spacing-3xl) !important; }
.gc-ml-4xl { margin-left: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Horizontal (Left + Right)
   =================================== */
.gc-mx-0 { margin-left: var(--spacing-0) !important; margin-right: var(--spacing-0) !important; }
.gc-mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.gc-mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.gc-mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.gc-mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.gc-mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.gc-mx-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
.gc-mx-3xl { margin-left: var(--spacing-3xl) !important; margin-right: var(--spacing-3xl) !important; }
.gc-mx-4xl { margin-left: var(--spacing-4xl) !important; margin-right: var(--spacing-4xl) !important; }

/* ===================================
   Margin - Vertical (Top + Bottom)
   =================================== */
.gc-my-0 { margin-top: var(--spacing-0) !important; margin-bottom: var(--spacing-0) !important; }
.gc-my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.gc-my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.gc-my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.gc-my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.gc-my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.gc-my-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
.gc-my-3xl { margin-top: var(--spacing-3xl) !important; margin-bottom: var(--spacing-3xl) !important; }
.gc-my-4xl { margin-top: var(--spacing-4xl) !important; margin-bottom: var(--spacing-4xl) !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(--spacing-0) !important; }
.gc-p-xs { padding: var(--spacing-xs) !important; }
.gc-p-sm { padding: var(--spacing-sm) !important; }
.gc-p-md { padding: var(--spacing-md) !important; }
.gc-p-lg { padding: var(--spacing-lg) !important; }
.gc-p-xl { padding: var(--spacing-xl) !important; }
.gc-p-2xl { padding: var(--spacing-2xl) !important; }
.gc-p-3xl { padding: var(--spacing-3xl) !important; }
.gc-p-4xl { padding: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Top
   =================================== */
.gc-pt-0 { padding-top: var(--spacing-0) !important; }
.gc-pt-xs { padding-top: var(--spacing-xs) !important; }
.gc-pt-sm { padding-top: var(--spacing-sm) !important; }
.gc-pt-md { padding-top: var(--spacing-md) !important; }
.gc-pt-lg { padding-top: var(--spacing-lg) !important; }
.gc-pt-xl { padding-top: var(--spacing-xl) !important; }
.gc-pt-2xl { padding-top: var(--spacing-2xl) !important; }
.gc-pt-3xl { padding-top: var(--spacing-3xl) !important; }
.gc-pt-4xl { padding-top: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Right
   =================================== */
.gc-pr-0 { padding-right: var(--spacing-0) !important; }
.gc-pr-xs { padding-right: var(--spacing-xs) !important; }
.gc-pr-sm { padding-right: var(--spacing-sm) !important; }
.gc-pr-md { padding-right: var(--spacing-md) !important; }
.gc-pr-lg { padding-right: var(--spacing-lg) !important; }
.gc-pr-xl { padding-right: var(--spacing-xl) !important; }
.gc-pr-2xl { padding-right: var(--spacing-2xl) !important; }
.gc-pr-3xl { padding-right: var(--spacing-3xl) !important; }
.gc-pr-4xl { padding-right: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Bottom
   =================================== */
.gc-pb-0 { padding-bottom: var(--spacing-0) !important; }
.gc-pb-xs { padding-bottom: var(--spacing-xs) !important; }
.gc-pb-sm { padding-bottom: var(--spacing-sm) !important; }
.gc-pb-md { padding-bottom: var(--spacing-md) !important; }
.gc-pb-lg { padding-bottom: var(--spacing-lg) !important; }
.gc-pb-xl { padding-bottom: var(--spacing-xl) !important; }
.gc-pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.gc-pb-3xl { padding-bottom: var(--spacing-3xl) !important; }
.gc-pb-4xl { padding-bottom: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Left
   =================================== */
.gc-pl-0 { padding-left: var(--spacing-0) !important; }
.gc-pl-xs { padding-left: var(--spacing-xs) !important; }
.gc-pl-sm { padding-left: var(--spacing-sm) !important; }
.gc-pl-md { padding-left: var(--spacing-md) !important; }
.gc-pl-lg { padding-left: var(--spacing-lg) !important; }
.gc-pl-xl { padding-left: var(--spacing-xl) !important; }
.gc-pl-2xl { padding-left: var(--spacing-2xl) !important; }
.gc-pl-3xl { padding-left: var(--spacing-3xl) !important; }
.gc-pl-4xl { padding-left: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Horizontal (Left + Right)
   =================================== */
.gc-px-0 { padding-left: var(--spacing-0) !important; padding-right: var(--spacing-0) !important; }
.gc-px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.gc-px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.gc-px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.gc-px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.gc-px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.gc-px-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
.gc-px-3xl { padding-left: var(--spacing-3xl) !important; padding-right: var(--spacing-3xl) !important; }
.gc-px-4xl { padding-left: var(--spacing-4xl) !important; padding-right: var(--spacing-4xl) !important; }

/* ===================================
   Padding - Vertical (Top + Bottom)
   =================================== */
.gc-py-0 { padding-top: var(--spacing-0) !important; padding-bottom: var(--spacing-0) !important; }
.gc-py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.gc-py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.gc-py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.gc-py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.gc-py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.gc-py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
.gc-py-3xl { padding-top: var(--spacing-3xl) !important; padding-bottom: var(--spacing-3xl) !important; }
.gc-py-4xl { padding-top: var(--spacing-4xl) !important; padding-bottom: var(--spacing-4xl) !important; }

/* ===================================
   Gap Utilities (for Flexbox/Grid)
   =================================== */
.gc-gap-0 { gap: var(--spacing-0) !important; }
.gc-gap-xs { gap: var(--spacing-xs) !important; }
.gc-gap-sm { gap: var(--spacing-sm) !important; }
.gc-gap-md { gap: var(--spacing-md) !important; }
.gc-gap-lg { gap: var(--spacing-lg) !important; }
.gc-gap-xl { gap: var(--spacing-xl) !important; }
.gc-gap-2xl { gap: var(--spacing-2xl) !important; }
.gc-gap-3xl { gap: var(--spacing-3xl) !important; }
.gc-gap-4xl { gap: var(--spacing-4xl) !important; }

/* Gap - Horizontal only */
.gc-gap-x-0 { column-gap: var(--spacing-0) !important; }
.gc-gap-x-xs { column-gap: var(--spacing-xs) !important; }
.gc-gap-x-sm { column-gap: var(--spacing-sm) !important; }
.gc-gap-x-md { column-gap: var(--spacing-md) !important; }
.gc-gap-x-lg { column-gap: var(--spacing-lg) !important; }
.gc-gap-x-xl { column-gap: var(--spacing-xl) !important; }
.gc-gap-x-2xl { column-gap: var(--spacing-2xl) !important; }
.gc-gap-x-3xl { column-gap: var(--spacing-3xl) !important; }
.gc-gap-x-4xl { column-gap: var(--spacing-4xl) !important; }

/* Gap - Vertical only */
.gc-gap-y-0 { row-gap: var(--spacing-0) !important; }
.gc-gap-y-xs { row-gap: var(--spacing-xs) !important; }
.gc-gap-y-sm { row-gap: var(--spacing-sm) !important; }
.gc-gap-y-md { row-gap: var(--spacing-md) !important; }
.gc-gap-y-lg { row-gap: var(--spacing-lg) !important; }
.gc-gap-y-xl { row-gap: var(--spacing-xl) !important; }
.gc-gap-y-2xl { row-gap: var(--spacing-2xl) !important; }
.gc-gap-y-3xl { row-gap: var(--spacing-3xl) !important; }
.gc-gap-y-4xl { row-gap: var(--spacing-4xl) !important; }

/* ===================================
   Usage Examples
   =================================== */

/*
Example 1: Card with spacing
<div class="gc-p-lg gc-mb-md">
    <h3 class="gc-mb-sm">Title</h3>
    <p class="gc-mb-md">Description</p>
    <button class="gc-btn gc-mt-sm">Action</button>
</div>

Example 2: Centered container
<div class="gc-mx-auto gc-px-md" style="max-width: 1200px;">
    Content
</div>

Example 3: Flex with gap
<div class="gc-flex gc-gap-md gc-p-lg">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Example 4: Responsive spacing
<div class="gc-p-sm gc-md:p-lg gc-lg:p-xl">
    Responsive padding
</div>
*/